:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #07111f;
    color: #f7faff;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(52rem 42rem at -10% -12%, rgba(26, 122, 204, .31), transparent 65%),
        radial-gradient(35rem 28rem at 110% 105%, rgba(15, 110, 185, .13), transparent 70%),
        #07111f;
}

.portal-shell {
    width: min(100% - 4rem, 76rem);
    margin: 0 auto;
    padding: clamp(2rem, 7vw, 5.5rem) 0 4rem;
}

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 clamp(1.75rem, 5vw, 3.25rem);
}

.portal-brand {
    color: #f8fbff;
    font-size: 1.05rem;
    font-weight: 780;
    letter-spacing: -.045em;
    text-decoration: none;
}

.portal-brand span, .eyebrow { color: #2ba9eb; }
.portal-actions { display: flex; align-items: center; gap: .55rem; }
.locale-switcher { display: flex; gap: .3rem; }

.locale-switcher a {
    border-radius: .55rem;
    color: #9eacbd;
    padding: .38rem .5rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
}

.locale-switcher a:hover,
.locale-switcher a:focus-visible,
.locale-switcher a[aria-current=page] { background: rgba(43, 169, 235, .15); color: #55c2f5; }

.account-link,
.logout-form button {
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #b8c5d3;
    padding: .38rem .5rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.account-link:hover,
.account-link:focus-visible,
.logout-form button:hover,
.logout-form button:focus-visible { color: #f3f8fd; background: rgba(255, 255, 255, .07); outline: 0; }

.auth-card {
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgba(158, 186, 216, .19);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(18, 31, 52, .96), rgba(13, 25, 45, .96));
    padding: clamp(1.6rem, 6vw, 3.25rem);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .025);
}

.auth-card--compact { max-width: 34rem; margin: 0 auto; }

h1 {
    margin: 0 0 .65rem;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    line-height: 1.13;
    letter-spacing: -.045em;
}

.eyebrow {
    margin: 0 0 .75rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.intro, .security-note, .field-help { color: #aeb9c8; line-height: 1.62; }
.intro { max-width: 35rem; margin: 0 0 2.1rem; font-size: .98rem; }
.security-note { margin: 1.5rem 0 0; font-size: .88rem; }
.field-help { margin: .45rem 0 0; font-size: .85rem; }
.auth-footer { margin: 1.35rem 0 0; color: #aeb9c8; font-size: .9rem; text-align: center; }
.auth-footer a { color: #58c4f5; font-weight: 720; text-decoration: none; }
.auth-footer a:hover, .auth-footer a:focus-visible { color: #a7e0fb; text-decoration: underline; }
.link-button { border: 0; background: none; color: #58c4f5; padding: 0; font: inherit; font-weight: 720; cursor: pointer; }
.link-button:hover, .link-button:focus-visible { color: #a7e0fb; text-decoration: underline; }
.registration-success-icon { display: grid; width: 3.4rem; height: 3.4rem; margin: 0 0 1.2rem; place-items: center; border: 1px solid rgba(74, 190, 244, .7); border-radius: 50%; background: rgba(27, 158, 221, .14); color: #4fc5f5; box-shadow: 0 0 .9rem rgba(40, 174, 234, .16); }
.registration-success-icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 2.35; }

.login-notice {
    margin: 0 0 1.25rem;
    border: 1px solid rgba(232, 92, 106, .4);
    border-radius: .75rem;
    background: rgba(129, 42, 58, .25);
    color: #ffd2d7;
    padding: .75rem .9rem;
    font-size: .9rem;
}

.auth-card form > div,
.form-field { margin: 0 0 1.35rem; }

label {
    display: inline-block;
    margin-bottom: .55rem;
    color: #f2f6fb;
    font-size: .92rem;
    font-weight: 720;
    letter-spacing: -.012em;
}

input:not([type=checkbox]) {
    width: 100%;
    min-height: 3.45rem;
    border: 1px solid #33445a;
    border-radius: .8rem;
    background: #0d1b2e;
    color: #f8fbff;
    padding: .82rem 1rem;
    font: inherit;
    font-weight: 550;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:not([type=checkbox])::placeholder { color: #718095; font-weight: 450; }
input:not([type=checkbox]):hover { border-color: #51647b; }

input:not([type=checkbox]):focus {
    border-color: #36b7f4;
    outline: 0;
    background: #0e1e33;
    box-shadow: 0 0 0 3px rgba(43, 169, 235, .19);
}

.password-strength { margin-top: .7rem; }

.password-strength-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
}

.password-strength-track span {
    height: .25rem;
    border-radius: 999px;
    background: #2a3b51;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.password-strength[data-strength="1"] .password-strength-track span:nth-child(1) { background: #ed5567; box-shadow: 0 0 .6rem rgba(237, 85, 103, .25); }
.password-strength[data-strength="2"] .password-strength-track span:nth-child(-n+2) { background: #f5a34b; box-shadow: 0 0 .6rem rgba(245, 163, 75, .2); }
.password-strength[data-strength="3"] .password-strength-track span:nth-child(-n+3) { background: #36a9eb; box-shadow: 0 0 .6rem rgba(54, 169, 235, .2); }
.password-strength[data-strength="4"] .password-strength-track span { background: #43c59e; box-shadow: 0 0 .6rem rgba(67, 197, 158, .2); }

.password-strength-status {
    margin: .45rem 0 0;
    color: #9fadbe;
    font-size: .82rem;
    line-height: 1.35;
}

.password-strength[data-strength="1"] .password-strength-status { color: #ffadb7; }
.password-strength[data-strength="2"] .password-strength-status { color: #f6bd78; }
.password-strength[data-strength="3"] .password-strength-status { color: #75caff; }
.password-strength[data-strength="4"] .password-strength-status { color: #77d9bc; }

.phone-field { position: relative; }

.phone-control {
    display: grid;
    grid-template-columns: minmax(7.5rem, 9.3rem) 1fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #33445a;
    border-radius: .8rem;
    background: #0d1b2e;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.phone-control:focus-within {
    border-color: #36b7f4;
    background: #0e1e33;
    box-shadow: 0 0 0 3px rgba(43, 169, 235, .19);
}

.form-field.is-invalid > input:not([type=checkbox]),
.password-field.is-invalid > input:not([type=checkbox]) {
    border-color: #e85c6a;
    box-shadow: 0 0 0 3px rgba(232, 92, 106, .16);
}

.phone-field.is-invalid .phone-control {
    border-color: #e85c6a;
    box-shadow: 0 0 0 3px rgba(232, 92, 106, .16);
}

.country-picker { position: relative; min-width: 0; border-right: 1px solid #33445a; }

.country-code-input,
.phone-number-input {
    height: 100%;
    min-height: 3.45rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.country-code-input { padding-right: 2.25rem !important; color: #5bc5f6 !important; font-weight: 760 !important; }
.phone-number-input { letter-spacing: .025em; }
.country-picker-icon { position: absolute; top: 50%; right: .9rem; width: 1rem; color: #7f9ab3; pointer-events: none; transform: translateY(-50%); }

.region-list {
    position: absolute;
    z-index: 10;
    top: calc(100% - .3rem);
    right: 0;
    left: 0;
    max-height: 17rem;
    overflow: auto;
    border: 1px solid #3a5068;
    border-radius: .85rem;
    background: #102238;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .3);
}

.region-list button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    background: transparent;
    color: #f3f8fd;
    padding: .78rem 1rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.region-list button:hover,
.region-list button:focus { background: rgba(43, 169, 235, .15); outline: 0; }
.region-list button[aria-selected=true] { background: rgba(43, 169, 235, .1); }
.region-list button span { color: #5bc5f6; font-weight: 720; }

input[type=checkbox] {
    width: 1.1rem;
    height: 1.1rem;
    margin: .05rem .55rem 0 0;
    accent-color: #1597df;
    vertical-align: top;
}

.consent-field { display: flex; flex-wrap: wrap; align-items: flex-start; }
.consent-field label { flex: 1; margin: 0; color: #d8e0ea; font-size: .9rem; font-weight: 550; line-height: 1.45; }
.consent-field ul { width: 100%; }

.consent-field.is-invalid input[type=checkbox] { outline: 2px solid #e85c6a; outline-offset: 2px; }

.auth-card form ul {
    margin: .48rem 0 0;
    padding: 0;
    color: #ffadb7;
    font-size: .84rem;
    font-weight: 620;
    line-height: 1.4;
    list-style: none;
}
.form-server-error { margin: .48rem 0 0; color: #ffadb7; font-size: .84rem; font-weight: 620; line-height: 1.4; }

.verification-phone {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.35rem;
    border: 1px solid rgba(83, 165, 209, .28);
    border-radius: .8rem;
    background: rgba(11, 36, 59, .62);
    padding: .9rem 1rem;
}
.verification-phone span { color: #aeb9c8; font-size: .9rem; }
.verification-phone strong { color: #dff3ff; font-size: 1rem; letter-spacing: .045em; }
.verification-code { margin: 0 0 1.35rem; padding: 0; border: 0; }
.verification-code legend { margin-bottom: .7rem; color: #f2f6fb; font-size: .92rem; font-weight: 720; }
.verification-code__inputs { display: grid; grid-template-columns: repeat(6, minmax(2.55rem, 3.55rem)); justify-content: center; gap: .62rem; }
.verification-code__inputs input:not([type=checkbox]) { min-width: 0; min-height: 3.8rem; padding: .4rem; border-radius: .75rem; font-size: 1.5rem; font-weight: 760; letter-spacing: 0; text-align: center; }
.verification-code__inputs.is-invalid input:not([type=checkbox]) { border-color: #e85c6a; box-shadow: 0 0 0 3px rgba(232, 92, 106, .16); }
.auth-footer--resend { margin-top: 1.1rem; }
.auth-footer--resend button { border: 0; background: transparent; color: #58c4f5; padding: .2rem .4rem; font: inherit; font-weight: 720; text-decoration: none; cursor: pointer; }
.auth-footer--resend button:hover, .auth-footer--resend button:focus-visible { color: #a7e0fb; text-decoration: underline; outline: 0; }
.auth-footer--muted { color: #8797aa; }

.button {
    width: 100%;
    min-height: 3.5rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    background: linear-gradient(135deg, #159ce5, #1686d4);
    box-shadow: 0 .6rem 1.4rem rgba(6, 122, 198, .22);
    color: #fff;
    cursor: pointer;
    padding: .9rem 1rem;
    font: inherit;
    font-weight: 800;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.button:hover { filter: brightness(1.08); box-shadow: 0 .8rem 1.7rem rgba(6, 122, 198, .3); transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(84, 198, 246, .65); outline-offset: 3px; }
.button:active { transform: translateY(0); }
.button-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

.notice { border-radius: .8rem; padding: .85rem 1rem; }
.notice-error { background: #5e2028; }

.portal-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid rgba(158, 186, 216, .14);
    padding-bottom: .7rem;
}

.portal-nav a {
    border-radius: .6rem;
    color: #9eacbd;
    padding: .5rem .7rem;
    font-size: .88rem;
    font-weight: 720;
    text-decoration: none;
}

.portal-nav a:hover,
.portal-nav a:focus-visible { color: #eff8ff; background: rgba(255, 255, 255, .06); outline: 0; }
.portal-nav a[aria-current=page] { background: rgba(43, 169, 235, .14); color: #61c9f8; }

.workspace-heading { margin-bottom: 1.5rem; }
.workspace-heading .intro { margin-bottom: 0; }

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.service-card {
    display: flex;
    min-height: 19rem;
    flex-direction: column;
    border: 1px solid rgba(158, 186, 216, .17);
    border-radius: 1.1rem;
    background: linear-gradient(150deg, rgba(18, 31, 52, .85), rgba(10, 22, 40, .85));
    padding: 1.4rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.service-card--featured {
    border-color: rgba(43, 169, 235, .48);
    background: linear-gradient(150deg, rgba(20, 51, 79, .92), rgba(10, 27, 48, .92));
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .04);
}

.service-card-topline,
.service-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.service-label { color: #62c8f7; font-size: .72rem; font-weight: 830; letter-spacing: .09em; text-transform: uppercase; }
.service-card h2 { margin: 1.25rem 0 .65rem; font-size: 1.35rem; letter-spacing: -.03em; }
.service-card p { margin: 0; color: #adb9c9; font-size: .92rem; line-height: 1.6; }
.service-card form, .service-card .button-link { margin-top: auto; }
.service-card .button { min-height: 3rem; font-size: .9rem; }
.service-availability { margin-top: auto; color: #9fafc2; font-size: .82rem; font-weight: 650; }

.back-link { display: inline-block; margin: 0 0 1.4rem; color: #6dcaf7; font-size: .88rem; font-weight: 700; text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: #c1ecff; text-decoration: underline; }

.service-workspace {
    border: 1px solid rgba(158, 186, 216, .19);
    border-radius: 1.35rem;
    background: linear-gradient(145deg, rgba(18, 31, 52, .96), rgba(13, 25, 45, .96));
    padding: clamp(1.45rem, 4vw, 2.4rem);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025);
}

.service-workspace-header { align-items: flex-start; margin-bottom: 1.7rem; }
.service-workspace-header .intro { margin: 0; }
.service-workspace-header h1 { margin-bottom: .55rem; }

.configurator-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(98, 200, 247, .22);
    border-radius: 1rem;
    background: rgba(7, 17, 31, .34);
    padding: 1.1rem;
}

.configurator-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .75rem;
    background: rgba(43, 169, 235, .14);
    color: #70cefa;
    font-size: 1.2rem;
    font-weight: 800;
}

.configurator-panel h2 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.015em; }
.configurator-panel p { margin: 0; color: #aeb9c8; font-size: .9rem; line-height: 1.55; }

/* Product workspace: spacious application layout, intentionally distinct from a settings screen. */
.services-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 7.2rem;
    margin: 0 0 1.25rem;
    overflow: hidden;
}

.services-hero-copy { position: relative; z-index: 1; }
.services-hero .intro { margin-bottom: 0; }
.services-hero-art { position: relative; width: 13rem; height: 7rem; flex: 0 0 auto; opacity: .75; }
.services-hero-art span,
.services-hero-art i { position: absolute; display: block; border: 1px solid rgba(85, 194, 245, .35); border-radius: 50%; }
.services-hero-art span { top: -6.6rem; right: -1.5rem; width: 15rem; height: 15rem; box-shadow: inset 0 0 2.5rem rgba(30, 150, 220, .14); }
.services-hero-art i { top: -2.2rem; right: 2rem; width: 6.2rem; height: 6.2rem; background: radial-gradient(circle at 32% 30%, rgba(85, 194, 245, .38), rgba(18, 77, 126, .04) 66%); }

.service-switcher {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .2rem;
    overflow-x: auto;
    border: 1px solid rgba(151, 185, 215, .18);
    border-radius: .95rem;
    background: rgba(10, 24, 43, .66);
    padding: .28rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    scrollbar-width: none;
}

.service-switcher::-webkit-scrollbar { display: none; }
.service-switcher-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .52rem;
    border-radius: .7rem;
    color: #98aabd;
    padding: .48rem .68rem;
    font-size: .83rem;
    font-weight: 720;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

a.service-switcher-item:hover,
a.service-switcher-item:focus-visible { background: rgba(255, 255, 255, .055); color: #e7f6ff; outline: 0; }
.service-switcher-item[aria-current=page] { background: rgba(36, 157, 218, .2); box-shadow: inset 0 0 0 1px rgba(102, 204, 247, .13); color: #eaf9ff; }
.service-switcher-item--locked { color: #65798e; cursor: default; }
.service-switcher-item--available { color: #b3c4d4; }
.service-switcher-mark { display: grid; width: 1.42rem; height: 1.42rem; place-items: center; border: 1px solid rgba(139, 187, 215, .26); border-radius: .42rem; background: rgba(95, 142, 174, .1); color: #a9cce0; font-size: .66rem; font-weight: 850; letter-spacing: -.05em; }
.service-switcher-mark--free { border-color: rgba(99, 207, 249, .48); background: rgba(35, 161, 221, .17); color: #77d5fc; }
.service-switcher-item[aria-current=page] .service-switcher-mark { border-color: rgba(133, 219, 253, .68); background: rgba(56, 181, 237, .23); color: #eafaff; }
.service-switcher--workspace { margin-bottom: 1.5rem; }

.service-spotlight {
    position: relative;
    display: grid;
    min-height: 19.5rem;
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    border: 1px solid rgba(69, 185, 241, .44);
    border-radius: 1.45rem;
    background:
        radial-gradient(26rem 18rem at 100% 50%, rgba(20, 137, 204, .24), transparent 67%),
        linear-gradient(124deg, rgba(19, 49, 76, .97), rgba(10, 27, 48, .98));
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .21), inset 0 1px rgba(255, 255, 255, .045);
}

.service-spotlight::after { position: absolute; right: -15rem; bottom: -18rem; width: 38rem; height: 38rem; border: 1px solid rgba(89, 196, 246, .16); border-radius: 50%; content: ''; }
.service-spotlight-copy { position: relative; z-index: 1; max-width: 34rem; }
.service-spotlight h2 { margin: .7rem 0 .55rem; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.service-spotlight p { margin: 0; color: #c0cad6; line-height: 1.6; }
.service-ready { color: #92b5c9; font-size: .8rem; font-weight: 700; }
.service-ready::before { display: inline-block; width: .43rem; height: .43rem; margin: 0 .38rem .04rem 0; border-radius: 50%; background: #6f95aa; content: ''; }
.spotlight-action { width: min(100%, 12.5rem); margin-top: 1.55rem; }
.spotlight-action .button { min-height: 3.15rem; }
.button-link.spotlight-action { display: flex; gap: .55rem; }
.button-link.spotlight-action span { font-size: 1.15rem; line-height: 0; }

.service-spotlight-art { position: relative; z-index: 1; width: 15rem; height: 15rem; justify-self: end; }
.spotlight-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(104, 205, 249, .45); border-radius: 50%; transform: translate(-50%, -50%); }
.spotlight-ring--outer { width: 14.8rem; height: 14.8rem; box-shadow: inset 0 0 2rem rgba(52, 168, 228, .08); }
.spotlight-ring--inner { width: 9.3rem; height: 9.3rem; border-color: rgba(129, 215, 251, .3); }
.spotlight-core { position: absolute; top: 50%; left: 50%; display: grid; width: 4.9rem; height: 4.9rem; place-items: center; border: 1px solid rgba(164, 228, 255, .62); border-radius: 1.3rem; background: linear-gradient(145deg, #28a5e5, #176cae); box-shadow: 0 0 3rem rgba(43, 169, 235, .35), inset 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: 1.35rem; font-weight: 850; letter-spacing: -.07em; transform: translate(-50%, -50%) rotate(-9deg); }

.service-catalog { margin-top: clamp(2rem, 5vw, 3.5rem); }
.section-heading { margin-bottom: 1rem; }
.section-heading .eyebrow { margin-bottom: .4rem; }
.section-heading h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; }
.service-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.service-option { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid rgba(158, 186, 216, .16); border-radius: 1.1rem; background: rgba(15, 29, 50, .58); padding: 1.25rem; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.service-option:hover { border-color: rgba(89, 194, 245, .32); background: rgba(19, 39, 64, .72); transform: translateY(-2px); }
.service-option h3 { margin: .42rem 0 .42rem; font-size: 1.05rem; letter-spacing: -.02em; }
.service-option p { margin: 0; color: #aeb9c8; font-size: .88rem; line-height: 1.55; }
.service-option .service-availability { grid-column: 2; margin-top: .65rem; color: #92a5b9; }
.option-icon { position: relative; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; overflow: hidden; border: 1px solid rgba(99, 200, 247, .29); border-radius: .8rem; background: rgba(42, 158, 218, .11); }
.option-icon span { position: absolute; display: block; border-radius: 50%; background: #64ccf9; box-shadow: 0 0 .65rem rgba(100, 204, 249, .55); }
.option-icon--gateway span:nth-child(1) { width: .38rem; height: .38rem; transform: translateY(-.52rem); }
.option-icon--gateway span:nth-child(2) { width: .38rem; height: .38rem; transform: translate(-.58rem, .5rem); }
.option-icon--gateway span:nth-child(3) { width: .38rem; height: .38rem; transform: translate(.58rem, .5rem); }
.option-icon--server { align-content: center; gap: .18rem; }
.option-icon--server span { position: static; width: 1.1rem; height: .22rem; border-radius: .2rem; }

.service-breadcrumb { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem; color: #8fa1b5; font-size: .86rem; font-weight: 650; }
.service-breadcrumb a { color: #69caf7; text-decoration: none; }
.service-breadcrumb a:hover, .service-breadcrumb a:focus-visible { color: #c2edff; text-decoration: underline; }
.free-workspace-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-bottom: 1rem; }
.free-workspace-symbol { display: grid; width: 4.1rem; height: 4.1rem; place-items: center; border: 1px solid rgba(122, 213, 251, .5); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(42, 168, 229, .36), rgba(23, 91, 151, .32)); box-shadow: inset 0 1px rgba(255, 255, 255, .15); color: #f4fbff; font-size: 1.1rem; font-weight: 850; letter-spacing: -.06em; }
.free-workspace-copy .eyebrow { margin-bottom: .4rem; }
.free-workspace-copy h1 { margin-bottom: .35rem; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.free-workspace-copy .intro { margin: 0; }
.workspace-status { display: grid; justify-items: end; gap: .25rem; color: #90a3b8; font-size: .72rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.workspace-status .status-badge { color: #78dcbf; font-size: .85rem; letter-spacing: 0; text-transform: none; }
.free-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }
.configuration-card { display: flex; min-height: 11rem; align-items: flex-start; gap: 1.1rem; border: 1px solid rgba(88, 196, 246, .32); border-radius: 1.2rem; background: linear-gradient(145deg, rgba(18, 46, 72, .82), rgba(11, 27, 47, .9)); padding: 1.4rem; }
.configuration-card-icon { display: grid; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; align-content: center; justify-items: center; gap: .25rem; border-radius: .82rem; background: rgba(46, 169, 230, .15); }
.configuration-card-icon i { display: block; width: 1.15rem; height: .19rem; border-radius: .2rem; background: #74d2fa; }
.configuration-card h2 { margin: .08rem 0 .42rem; font-size: 1.08rem; letter-spacing: -.02em; }
.configuration-card p, .free-side-note p { margin: 0; color: #b3bfce; font-size: .9rem; line-height: 1.6; }
.free-side-note { border: 1px solid rgba(158, 186, 216, .16); border-radius: 1.2rem; background: rgba(12, 26, 45, .66); padding: 1.3rem; }
.free-side-note .service-label { display: block; margin-bottom: .6rem; }

.account-card {
    border: 1px solid rgba(158, 186, 216, .19);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(18, 31, 52, .96), rgba(13, 25, 45, .96));
    padding: clamp(1.6rem, 6vw, 3.25rem);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .025);
}

.account-columns {
    display: grid;
    grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.55fr);
    gap: 1.05rem;
}
.account-columns .account-card { margin: 0; }
.account-billing-heading h2,
.account-card > h2 { margin: 0; color: #f3f7fb; font-size: 1.6rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.account-billing-heading p,
.billing-requirement { margin: 0; color: #aeb9c8; font-size: .88rem; line-height: 1.55; }
.account-card > .account-intro { margin: .55rem 0 1.7rem; }
.billing-form { margin-top: 1.55rem; }
.billing-form-grid { display: grid; gap: 1.12rem; }
.billing-form .form-field { margin: 0; }
.billing-form label { display: block; margin-bottom: .52rem; color: #d9e3ed; font-size: .91rem; font-weight: 650; }
.billing-form .is-required > label::after { margin-left: .28rem; color: #57c3ef; content: '*'; }
.billing-form input,
.billing-form select { width: 100%; min-height: 3rem; border: 1px solid #314d67; border-radius: .5rem; background: rgba(13, 34, 56, .82); color: #f4f8fb; padding: .7rem .9rem; font-size: .91rem; }
.billing-form select option { background: #10233a; color: #f2f7fc; }
.billing-form input:focus,
.billing-form select:focus { outline: 0; border-color: #35afe7; background: #0e253e; box-shadow: 0 0 0 3px rgba(43, 169, 235, .19); }
.billing-form ul { margin: .38rem 0 0; color: #ff9aa5; padding-left: 1rem; font-size: .78rem; line-height: 1.4; }
.billing-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.billing-requirement { margin: 1.25rem 0; font-size: .8rem; }

.account-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.account-hero .intro { margin: .35rem 0 0; }
.account-avatar { display: grid; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid rgba(85, 194, 245, .4); border-radius: 50%; background: rgba(43, 169, 235, .12); color: #6acbfa; font-size: 1.35rem; font-weight: 800; }

.account-details { display: grid; margin: 0; }
.account-details > div { min-width: 0; border-bottom: 1px solid #243d56; padding: .85rem 0; }
.account-details > div:first-child { padding-top: 0; }
.account-details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.account-details dt { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .42rem; color: #91a0b3; font-size: .76rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.account-details dt .icon { width: .95rem; height: .95rem; color: #64c9f3; }
.account-details dd { overflow-wrap: anywhere; margin: 0; color: #f2f7fc; font-size: .94rem; font-weight: 650; }
.account-details dd.verified-contact { display: flex; align-items: center; gap: .48rem; }
.verified-contact-mark { display: grid; width: 1.18rem; height: 1.18rem; flex: 0 0 auto; place-items: center; color: #55d4aa; filter: drop-shadow(0 0 .28rem rgba(67, 197, 158, .3)); }
.verified-contact-mark .icon { width: 100%; height: 100%; stroke-width: 2.15; }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; color: #74d8b9; }
.status-badge::before { width: .48rem; height: .48rem; border-radius: 50%; background: #43c59e; box-shadow: 0 0 .6rem rgba(67, 197, 158, .45); content: ''; }

.account-security { margin-top: 1.5rem; border-top: 1px solid rgba(158, 186, 216, .14); padding-top: 1.4rem; }
.account-security h2 { margin: 0 0 .4rem; font-size: 1rem; letter-spacing: -.015em; }
.account-security p { margin: 0; color: #aeb9c8; font-size: .92rem; line-height: 1.55; }
.account-security p + p { margin-top: .55rem; }
.account-2fa-button { display: inline-flex; margin-top: 1rem; }
.totp-setup-grid { display: grid; grid-template-columns: minmax(12rem, 17rem) 1fr; align-items: center; gap: 2rem; }
.totp-qr { display: block; width: 100%; border-radius: .8rem; background: #fff; }
.totp-secret { display: block; overflow-wrap: anywhere; margin: .6rem 0 1.4rem; color: #67caf6; font-size: .9rem; letter-spacing: .08em; }
.totp-recovery-option { margin: .9rem 0 1.2rem; color: #9eb0c3; font-size: .88rem; }
.totp-recovery-option summary { color: #58c4f5; text-align: center; cursor: pointer; }
.totp-recovery-option .form-field { margin: 1rem 0 0; }
.has-error input { border-color: #e85c6a !important; box-shadow: 0 0 0 3px rgba(232, 92, 106, .12); }
.field-error { margin: .45rem 0 0; color: #ff9aa5; font-size: .82rem; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem 0; }
.recovery-confirm-button { margin-top: 1.5rem; text-align: center; }
.recovery-code-grid code { border: 1px solid rgba(88, 196, 246, .22); border-radius: .55rem; background: rgba(10, 26, 44, .8); color: #dff4fe; padding: .75rem; text-align: center; letter-spacing: .08em; }

@media (max-width: 700px) {
    .totp-setup-grid { grid-template-columns: 1fr; }
    .totp-qr { max-width: 15rem; margin: 0 auto; }
}

@media (max-width: 420px) {
    .portal-shell { width: min(100% - 1.5rem, 76rem); padding-top: 1.5rem; }
    .auth-card { border-radius: 1.2rem; padding: 1.4rem; }
    .phone-control { grid-template-columns: 6.9rem 1fr; }
    .country-code-input, .phone-number-input { padding-right: .75rem !important; padding-left: .75rem !important; }
    .country-picker-icon { right: .55rem; }
    .portal-actions { gap: .15rem; }
    .account-link { display: none; }
    .account-details { grid-template-columns: 1fr; }
    .account-columns, .billing-form-pair { grid-template-columns: 1fr; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card { min-height: 15rem; }
    .service-workspace-header { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 421px) and (max-width: 850px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-card:last-child { grid-column: span 2; min-height: 14rem; }
}

@media (max-width: 700px) {
    .services-hero-art { width: 7rem; transform: translateX(1.5rem); }
    .service-spotlight { grid-template-columns: minmax(0, 1fr) 10rem; gap: 1rem; min-height: 17rem; }
    .service-spotlight-art { width: 10rem; height: 10rem; }
    .spotlight-ring--outer { width: 9.8rem; height: 9.8rem; }
    .spotlight-ring--inner { width: 6.2rem; height: 6.2rem; }
    .spotlight-core { width: 3.65rem; height: 3.65rem; border-radius: .95rem; font-size: 1rem; }
    .free-workspace-grid { grid-template-columns: 1fr; }
    .free-side-note { min-height: 0; }
}

@media (max-width: 500px) {
    .services-hero { min-height: 0; }
    .services-hero-art { display: none; }
    .service-switcher { display: flex; width: 100%; }
    .service-switcher-item { padding-right: .56rem; padding-left: .56rem; }
    .service-spotlight { display: block; min-height: 0; padding: 1.4rem; }
    .service-spotlight-art { display: none; }
    .spotlight-action { width: 100%; }
    .service-options { grid-template-columns: 1fr; }
    .free-workspace-hero { grid-template-columns: auto minmax(0, 1fr); gap: .85rem; }
    .workspace-status { grid-column: 1 / -1; justify-items: start; border-top: 1px solid rgba(158, 186, 216, .14); padding-top: .75rem; }
    .configuration-card { min-height: 0; padding: 1.15rem; }
}

/* Customer workspace */
.icon { width: 1.12rem; height: 1.12rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-shell { width: min(100% - 3rem, 80rem); }
.portal-header { position: relative; margin-bottom: 2.2rem; }
.portal-header .portal-nav { align-self: stretch; margin: 0 auto; border: 0; padding: 0; }
.portal-nav > a,
.service-menu > summary { display: flex; min-height: 2.6rem; align-items: center; gap: .48rem; border-radius: .65rem; color: #9eacbd; padding: .5rem .72rem; font-size: .87rem; font-weight: 720; text-decoration: none; cursor: pointer; list-style: none; }
.service-menu > summary::-webkit-details-marker { display: none; }
.service-menu > summary:hover,
.service-menu > summary:focus-visible,
.service-menu[data-current=true] > summary,
.service-menu[open] > summary { background: rgba(43, 169, 235, .12); color: #71cff8; outline: 0; }
.service-menu-chevron { width: .85rem; height: .85rem; margin-left: .1rem; transition: transform .16s ease; }
.service-menu[open] .service-menu-chevron { transform: rotate(180deg); }
.service-menu { position: relative; }
.service-menu-panel { position: absolute; z-index: 20; top: calc(100% + .55rem); left: 0; width: min(22rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid rgba(117, 170, 207, .25); border-radius: .9rem; background: #0d1b2e; padding: .42rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .38); }
.service-menu-row { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; border: 0; border-radius: .62rem; background: transparent; color: #d9e4ef; padding: .68rem .78rem; font: inherit; font-size: .83rem; text-decoration: none; }
.service-menu-row > span { display: flex; align-items: center; gap: .55rem; }
a.service-menu-row:hover, form.service-menu-row:hover { background: rgba(255, 255, 255, .055); }
.service-menu-row.is-disabled { color: #617389; }
.menu-action { border: 0; border-radius: .5rem; background: rgba(43, 169, 235, .15); color: #6dccf7; padding: .38rem .55rem; font: inherit; font-size: .72rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.notice { margin: 0 0 1.25rem; border: 1px solid transparent; }
.notice-success { border-color: rgba(67, 197, 158, .32); background: rgba(25, 105, 84, .28); color: #a7ecd7; }
.configuration-card--form { border: 1px solid rgba(82, 184, 235, .26); border-radius: 1.05rem; background: rgba(255, 255, 255, .035); padding: clamp(1.25rem, 3vw, 1.8rem); }
.configuration-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.5rem; }
.configuration-heading-icon, .configuration-list-icon { display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(82, 184, 235, .35); border-radius: .7rem; background: rgba(43, 169, 235, .12); color: #6dccf7; }
.configuration-heading-icon { width: 2.65rem; height: 2.65rem; }
.configuration-heading h2 { margin: 0 0 .25rem; font-size: 1.12rem; }
.configuration-heading p { margin: 0; color: rgba(255, 255, 255, .62); font-size: .88rem; }
.configuration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem; }
.configuration-field { min-width: 0; }
.portal-authenticated .configuration-field--toggle .toggle-row { display: grid; width: 100%; margin: 0; min-height: 3rem; }
.configuration-field label { margin-bottom: .42rem; font-size: .82rem; }
.configuration-field input:not([type=checkbox]) { min-height: 3rem; border-radius: .68rem; padding: .68rem .82rem; font-size: .9rem; }
.configuration-field ul { margin: .4rem 0 0; color: #ff9ca8; padding: 0; font-size: .77rem; list-style: none; }
.configuration-field.is-invalid input { border-color: #e85c6a; }
.form-summary { margin-bottom: 1rem; border: 1px solid rgba(232, 92, 106, .35); border-radius: .65rem; background: rgba(129, 42, 58, .2); color: #ffd2d7; padding: .7rem .8rem; font-size: .83rem; }
.configuration-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.35rem; }
.configuration-actions .button, .modal-actions .button { display: inline-flex; width: auto; min-height: 2.85rem; align-items: center; justify-content: center; gap: .48rem; border-radius: .68rem; padding: .68rem .9rem; font-size: .82rem; }
.button--secondary, .button--quiet { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .055); box-shadow: none; color: #d8e4ef; }
.button--quiet { background: transparent; }
.simulation-note { color: rgba(255, 255, 255, .46); font-size: .76rem; }
.configuration-modal { width: min(calc(100% - 2rem), 32rem); border: 1px solid rgba(100, 173, 217, .3); border-radius: 1rem; background: #0d1b2e; color: #f7faff; padding: 1.4rem; box-shadow: 0 2rem 6rem rgba(0, 0, 0, .55); }
.configuration-modal::backdrop { background: rgba(2, 8, 16, .74); backdrop-filter: blur(4px); }
.modal-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.modal-topline h2 { margin: 0; font-size: 1.25rem; }
.modal-topline .eyebrow { margin-bottom: .35rem; }
.icon-button { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 0; border-radius: .55rem; background: rgba(255, 255, 255, .06); color: #aebdcb; cursor: pointer; }
.toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin: 1.2rem 0 0; cursor: pointer; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { margin-bottom: .2rem; font-size: .86rem; }
.toggle-row small { color: #91a2b5; font-size: .75rem; font-weight: 500; line-height: 1.45; }
.toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-control { position: relative; width: 2.7rem; height: 1.48rem; border: 1px solid #43556a; border-radius: 999px; background: #17273a; transition: .18s ease; }
.toggle-control::after { position: absolute; top: .17rem; left: .18rem; width: 1rem; height: 1rem; border-radius: 50%; background: #8fa0b3; content: ''; transition: .18s ease; }
.toggle-input:checked + .toggle-control { border-color: #31aeea; background: #137db9; }
.toggle-input:checked + .toggle-control::after { background: #fff; transform: translateX(1.18rem); }
.toggle-input:focus-visible + .toggle-control { outline: 3px solid rgba(84, 198, 246, .45); outline-offset: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 1rem; }
.saved-configurations { margin-top: 2.4rem; }
.section-heading--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.section-heading--row .eyebrow { margin-bottom: .35rem; }
.configuration-total { color: #8496aa; font-size: .77rem; }
.configuration-list { overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: .95rem; background: rgba(255, 255, 255, .03); }
.configuration-row { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .82rem 1rem; }
.configuration-row + .configuration-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.configuration-name { display: flex; min-width: 0; align-items: center; gap: .72rem; }
.configuration-list-icon { width: 2.2rem; height: 2.2rem; }
.configuration-list-icon .icon { width: .95rem; height: .95rem; }
.configuration-name strong, .configuration-name span { display: block; }
.configuration-name strong { overflow: hidden; color: #edf5fb; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.configuration-name span { margin-top: .16rem; color: #7f93a8; font-size: .73rem; }
.configuration-row-actions { display: flex; align-items: center; gap: .28rem; }
.configuration-row-actions form { margin: 0; }
.row-action { display: inline-flex; min-height: 2.2rem; align-items: center; gap: .35rem; border: 0; border-radius: .52rem; background: transparent; color: #9fb1c2; padding: .45rem .55rem; font: inherit; font-size: .75rem; font-weight: 720; text-decoration: none; cursor: pointer; }
.row-action .icon { width: .92rem; height: .92rem; }
.row-action:hover, .row-action:focus-visible { background: rgba(255, 255, 255, .065); color: #eaf5fc; outline: 0; }
.row-action--primary { color: #63caf7; }
.row-action--danger:hover, .row-action--danger:focus-visible { color: #ff9aa6; }
.empty-configurations { display: flex; min-height: 7rem; align-items: center; justify-content: center; gap: .65rem; border: 1px dashed rgba(255, 255, 255, .13); border-radius: .9rem; color: #7f91a5; font-size: .84rem; }

@media (max-width: 760px) {
    .portal-shell { width: min(100% - 1.5rem, 80rem); }
    .portal-header { flex-wrap: wrap; }
    .portal-header .portal-nav { order: 3; width: 100%; }
    .configuration-fields { grid-template-columns: 1fr; }
    .configuration-row { align-items: flex-start; flex-direction: column; }
    .configuration-row-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 460px) {
    .portal-actions .locale-switcher { display: none; }
    .configuration-actions .button { width: 100%; }
    .simulation-note { width: 100%; text-align: center; }
    .row-action span { display: none; }
}

/* Keep the service area in the same restrained visual language as the public web. */
.services-hero { display: block; min-height: 0; margin-bottom: 1.15rem; overflow: visible; }
.services-hero-copy { position: static; }
.services-hero .intro { max-width: 42rem; }

.service-switcher {
    display: flex;
    width: 100%;
    gap: 1.15rem;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.service-switcher-item {
    position: relative;
    gap: 0;
    border-radius: 0;
    padding: .6rem 0 .72rem;
    color: rgba(255, 255, 255, .62);
    font-size: .9rem;
    font-weight: 650;
}

a.service-switcher-item:hover,
a.service-switcher-item:focus-visible { background: transparent; color: #52b8eb; }
.service-switcher-item[aria-current=page] { background: transparent; box-shadow: none; color: #fff; }
.service-switcher-item[aria-current=page]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #0c87da; content: ''; }
.service-switcher-item--locked { color: rgba(255, 255, 255, .34); }
.service-switcher-item--available { color: rgba(255, 255, 255, .68); }
.service-switcher--workspace { margin-bottom: 1.8rem; }

.service-spotlight {
    display: block;
    min-height: 0;
    border-color: rgba(82, 184, 235, .3);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .05);
    padding: clamp(1.35rem, 3vw, 1.85rem);
    box-shadow: none;
}

.service-spotlight::after { display: none; }
.service-spotlight-copy { position: static; max-width: 43rem; }
.service-spotlight h2 { margin: .55rem 0 .4rem; font-size: 1.55rem; font-weight: 650; letter-spacing: -.035em; }
.service-spotlight p { color: rgba(255, 255, 255, .7); font-size: .94rem; }
.service-ready { color: rgba(255, 255, 255, .58); font-weight: 650; }
.service-ready::before { background: #52b8eb; }
.spotlight-action { width: min(100%, 13rem); margin-top: 1.25rem; }
.spotlight-action .button { min-height: 3rem; }

.service-catalog { margin-top: 2.75rem; }
.section-heading { margin-bottom: 1rem; text-align: left; }
.section-heading h2 { font-size: 1.25rem; font-weight: 650; }
.service-options { gap: 1rem; }
.service-option { display: block; border-color: rgba(255, 255, 255, .1); border-radius: 1rem; background: rgba(255, 255, 255, .05); padding: 1.25rem; }
.service-option:hover { border-color: rgba(82, 184, 235, .35); background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.service-option h3 { margin: .35rem 0 .4rem; font-size: 1.08rem; font-weight: 700; }
.service-option p { color: rgba(255, 255, 255, .7); }
.service-option .service-availability { display: block; margin-top: 1rem; color: #52b8eb; font-size: .78rem; font-weight: 700; }

.service-breadcrumb { margin-bottom: .85rem; color: rgba(255, 255, 255, .55); }
.service-breadcrumb a { color: #52b8eb; }
.free-workspace-hero { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.35rem; }
.free-workspace-copy h1 { font-size: 1.7rem; font-weight: 650; }
.workspace-status { color: rgba(255, 255, 255, .5); }
.workspace-status .status-badge { color: #74d8b9; }
.free-workspace-grid { grid-template-columns: minmax(0, 1fr) 15rem; }
.configuration-card { display: block; min-height: 0; border-color: rgba(82, 184, 235, .28); border-radius: 1rem; background: rgba(12, 135, 218, .08); padding: 1.4rem; }
.configuration-card h2 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.configuration-card p, .free-side-note p { color: rgba(255, 255, 255, .7); }
.free-side-note { border-color: rgba(255, 255, 255, .1); border-radius: 1rem; background: rgba(255, 255, 255, .05); padding: 1.3rem; }

@media (max-width: 700px) {
    .free-workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .service-switcher { gap: .9rem; }
    .service-switcher-item { padding-bottom: .65rem; }
    .service-spotlight { display: block; padding: 1.35rem; }
    .spotlight-action { width: 100%; }
    .free-workspace-hero { grid-template-columns: minmax(0, 1fr); }
    .workspace-status { justify-items: start; }
}

/* Approved customer portal layout — design reference v11. */
.portal-authenticated {
    background:
        radial-gradient(48rem 31rem at 0 -8%, rgba(22, 91, 150, .18), transparent 68%),
        radial-gradient(43rem 31rem at 104% 104%, rgba(8, 74, 130, .09), transparent 72%),
        #06111f;
}

.portal-authenticated .portal-shell {
    width: min(calc(100% - 2rem), 84.5rem);
    margin: 0 auto;
    padding: 1.25rem 0 4.5rem;
}

.portal-authenticated .portal-header {
    display: grid;
    min-height: 4.55rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin: 0 1.35rem 1.55rem;
    border: 1px solid #213a52;
    border-radius: .62rem;
    background: linear-gradient(100deg, rgba(10, 26, 45, .94), rgba(10, 25, 43, .72));
    padding: 0 1.7rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.portal-authenticated .portal-brand {
    display: inline-flex;
    width: max-content;
    align-items: center;
    color: #f5f8fc;
    font-size: 1.03rem;
    font-weight: 780;
    letter-spacing: -.045em;
}

.portal-authenticated .portal-brand-wordmark > span { color: #2ba9eb; }

.portal-authenticated .portal-header .portal-nav {
    display: flex;
    align-self: center;
    justify-self: center;
    gap: 2.15rem;
    margin: 0;
}

.portal-authenticated .portal-nav > a,
.portal-authenticated .service-menu > summary {
    min-height: 2.6rem;
    gap: .48rem;
    border-radius: .65rem;
    background: transparent;
    color: #9eacbd;
    padding: .5rem .72rem;
    font-size: .98rem;
    font-weight: 720;
}

.portal-authenticated .portal-nav > a:hover,
.portal-authenticated .portal-nav > a:focus-visible,
.portal-authenticated .portal-nav > a[aria-current=page],
.portal-authenticated .service-menu > summary:hover,
.portal-authenticated .service-menu > summary:focus-visible,
.portal-authenticated .service-menu[data-current=true] > summary,
.portal-authenticated .service-menu[open] > summary {
    background: rgba(43, 169, 235, .14);
    color: #61c9f8;
}

.portal-authenticated .portal-actions {
    justify-self: end;
    gap: 1.45rem;
}

.portal-authenticated .account-link,
.portal-authenticated .logout-form button {
    border-radius: 0;
    color: #96a5b5;
    padding: .4rem 0;
    font-size: .88rem;
    font-weight: 700;
}

.portal-authenticated .account-link:hover,
.portal-authenticated .account-link:focus-visible,
.portal-authenticated .logout-form button:hover,
.portal-authenticated .logout-form button:focus-visible {
    background: transparent;
    color: #eef5fb;
}

.portal-authenticated .locale-menu > summary { font-size: .86rem; }

.locale-menu { position: relative; order: 3; }
.locale-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #42b9ee;
    font-size: .78rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}
.locale-menu > summary::-webkit-details-marker { display: none; }
.locale-menu > summary .icon { width: .75rem; height: .75rem; }
.locale-menu[open] > summary .icon { transform: rotate(180deg); }
.locale-menu-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .75rem);
    right: 0;
    display: grid;
    min-width: 9rem;
    max-height: min(24rem, 70vh);
    overflow-y: auto;
    border: 1px solid #29455f;
    border-radius: .55rem;
    background: #0b1d31;
    padding: .3rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}
.locale-menu-panel a { border-radius: .35rem; color: #a9b8c7; padding: .45rem .65rem; font-size: .75rem; font-weight: 750; text-decoration: none; }
.locale-menu-panel a:hover,
.locale-menu-panel a[aria-current=page] { background: rgba(42, 169, 235, .13); color: #54c4f5; }

.portal-authenticated .service-menu-panel { top: calc(100% + 1.3rem); left: 50%; transform: translateX(-50%); }
.portal-authenticated .notice { margin: 0 1.35rem 1rem; border-radius: .55rem; padding: .75rem .9rem; font-size: .82rem; }
.live-notices:empty { display: none; }
[data-live-workspace] { transition: opacity .14s ease; }
[data-live-workspace][aria-busy=true] { opacity: .64; pointer-events: none; }

.portal-authenticated .service-breadcrumb,
.portal-authenticated .workspace-title,
.portal-authenticated .configuration-form,
.portal-authenticated .saved-configurations,
.portal-authenticated .account-page-title,
.portal-authenticated .account-card {
    margin-right: 1.35rem;
    margin-left: 1.35rem;
}

.portal-authenticated .service-breadcrumb {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: 2.45rem;
    margin-bottom: 1.3rem;
    color: #73879b;
    font-size: .92rem;
    font-weight: 650;
}
.portal-authenticated .service-breadcrumb a { color: #35b5ef; text-decoration: none; }
.portal-authenticated .workspace-title {
    margin-bottom: 2.15rem;
    color: #f7f9fc;
    font-size: clamp(2rem, 3vw, 2.45rem);
    font-weight: 720;
    letter-spacing: -.045em;
}

.configuration-workspace {
    display: grid;
    grid-template-columns: minmax(0, 2.54fr) minmax(18rem, 1fr);
    gap: 1.05rem;
    align-items: stretch;
}

.portal-authenticated .configuration-card--form,
.portal-authenticated .configuration-action-panel,
.portal-authenticated .approved-panel {
    border: 1px solid #23415b;
    border-radius: .62rem;
    background: rgba(10, 27, 47, .72);
    box-shadow: inset 0 1px rgba(255, 255, 255, .012);
}
.portal-authenticated .configuration-card--form.is-configuration-loaded,
.portal-authenticated .configuration-action-panel.is-configuration-loaded {
    animation: configuration-loaded-highlight 2.2s ease-out forwards;
}
@keyframes configuration-loaded-highlight {
    0% { border-color: #78d5fa; box-shadow: 0 0 0 1px rgba(120, 213, 250, .48), 0 0 1.65rem rgba(51, 181, 239, .24); }
    38% { border-color: #5dc8f4; box-shadow: 0 0 0 1px rgba(93, 200, 244, .28), 0 0 1rem rgba(51, 181, 239, .14); }
    100% { border-color: #23415b; box-shadow: inset 0 1px rgba(255, 255, 255, .012); }
}

.portal-authenticated .configuration-card--form {
    padding: 2.05rem 2.1rem 2.2rem;
}

.portal-authenticated .configuration-card-heading > h2,
.portal-authenticated .configuration-action-panel > h2,
.portal-authenticated .saved-configurations > h2 {
    margin: 0;
    color: #f3f7fb;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.2;
}
.portal-authenticated .configuration-card-heading > h2 { margin: 0; }
.portal-authenticated .configuration-name-accent { color: #49bdf0; }

.portal-authenticated .configuration-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .95rem 1.2rem;
    margin-top: 1.7rem;
}

.portal-authenticated .configuration-field label {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    margin-bottom: .52rem;
    color: #d9e3ed;
    font-size: .91rem;
    font-weight: 650;
}
.portal-authenticated .configuration-field label .icon { width: 1rem; height: 1rem; color: #64c9f3; stroke-width: 1.7; }
.portal-authenticated .configuration-field input:not([type=checkbox]) {
    min-height: 3rem;
    border: 1px solid #314d67;
    border-radius: .5rem;
    background: rgba(13, 34, 56, .82);
    padding: .75rem .9rem;
    color: #f4f8fb;
    font-size: .91rem;
}
.portal-authenticated .configuration-field input:not([type=checkbox])::placeholder { color: #6f8499; }
.portal-authenticated .configuration-field input:not([type=checkbox]):focus { border-color: #35afe7; background: #0e253e; }
.portal-authenticated .configuration-field .field-help { margin: .45rem 0 0; color: #788da1; font-size: .76rem; line-height: 1.35; }

.portal-authenticated .configuration-action-panel {
    display: flex;
    flex-direction: column;
    padding: 2.05rem 1.55rem;
}
.portal-authenticated .configuration-action-panel > h2 { margin-bottom: 1.7rem; }
.portal-authenticated .configuration-action-panel .button {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .58rem;
    border-radius: .48rem;
    font-size: .91rem;
    font-weight: 750;
}
.portal-authenticated .configuration-action-panel .button + .button { margin-top: .8rem; }
.portal-authenticated .configuration-action-panel .button--primary { border-color: #128ed0; background: linear-gradient(180deg, #27a9e9, #168dce); box-shadow: 0 .6rem 1.4rem rgba(10, 112, 171, .2); }
.portal-authenticated .configuration-action-panel .button--secondary { border-color: #31516d; background: rgba(18, 42, 65, .75); color: #d6e1eb; }
.portal-authenticated .configuration-new-token { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; color: #67c7f1; font-size: .79rem; font-weight: 700; text-decoration: none; }
.portal-authenticated .configuration-new-token:hover,
.portal-authenticated .configuration-new-token:focus-visible { color: #a4e2fb; text-decoration: underline; }
.portal-authenticated .configuration-action-hint { margin-top: auto; border-top: 1px solid rgba(49, 77, 103, .68); padding-top: 1rem; color: #74899d; font-size: .76rem; line-height: 1.5; }
.portal-authenticated .configuration-action-hint p { margin: 0; }
.portal-authenticated .configuration-action-hint p + p { margin-top: .6rem; }
.portal-authenticated .configuration-action-hint__title { margin-bottom: .65rem !important; color: #91a8ba; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.portal-authenticated .configuration-action-hint strong { color: #aabfce; font-weight: 700; }


.portal-authenticated .saved-configurations {
    margin-top: 1.05rem;
    padding: 1.65rem 2rem;
}
.portal-authenticated .saved-configurations > h2 { margin-bottom: 1.35rem; font-size: 1.35rem; }
.portal-authenticated .configuration-list { border: 0; border-radius: 0; background: transparent; }
.portal-authenticated .configuration-row,
.portal-authenticated .empty-configurations {
    min-height: 4.2rem;
    border: 1px solid #233d55;
    border-radius: .48rem;
    background: rgba(7, 20, 35, .42);
    padding: .75rem 1rem;
}
.portal-authenticated .configuration-row + .configuration-row { margin-top: .6rem; border-top: 1px solid #233d55; }
.portal-authenticated .configuration-name { gap: .75rem; }
.portal-authenticated .configuration-name strong { color: #edf4fa; font-size: .92rem; }
.portal-authenticated .token-count-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #7890a6;
    padding: .35rem 0;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.portal-authenticated .token-count-button::before { height: 1rem; margin-right: .75rem; border-left: 1px solid #2c465f; content: ''; }
.portal-authenticated .token-count-button:hover,
.portal-authenticated .token-count-button:focus-visible { color: #58c4f5; outline: 0; }
.portal-authenticated .client-tracking-disabled { display: inline-flex; align-items: center; color: #687f93; font-size: .78rem; }
.portal-authenticated .client-tracking-disabled::before { height: 1rem; margin-right: .75rem; border-left: 1px solid #2c465f; content: ''; }
.portal-authenticated .drag-handle {
    display: grid;
    width: 1.75rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #627b91;
    padding: 0;
    cursor: grab;
    touch-action: none;
}
.portal-authenticated .drag-handle:hover,
.portal-authenticated .drag-handle:focus-visible { background: rgba(255, 255, 255, .055); color: #58c4f5; outline: 0; }
.portal-authenticated .drag-handle:active { cursor: grabbing; }
.portal-authenticated .drag-handle .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.portal-authenticated .configuration-list.is-sorting .configuration-row { transition: transform .12s ease, opacity .12s ease, border-color .12s ease; }
.portal-authenticated .configuration-row.is-dragging { border-color: #3288b5; opacity: .58; }
.portal-authenticated .configuration-list[aria-busy=true] { opacity: .72; }
.portal-authenticated .configuration-row-actions { gap: 0; }
.portal-authenticated .configuration-row-actions > * + * { border-left: 1px solid #294157; }
.portal-authenticated .row-action { border-radius: 0; color: #92a6b9; padding: .45rem .85rem; font-size: .78rem; }
.portal-authenticated .row-action--primary { color: #53c2f4; }
.portal-authenticated .empty-configurations { border-style: solid; color: #74899d; }

.portal-authenticated .configuration-modal {
    width: min(calc(100% - 2rem), 38.8rem);
    border: 1px solid #2b4b66;
    border-radius: .72rem;
    background: #0b1d31;
    color: #f7faff;
    padding: 2.45rem 2.55rem 1.85rem;
    box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, .62);
}
.portal-authenticated .configuration-modal::backdrop { background: rgba(2, 9, 17, .78); backdrop-filter: blur(2px); }
.portal-authenticated .modal-topline { align-items: center; margin-bottom: 2rem; }
.portal-authenticated .modal-topline h2 { font-size: 1.95rem; font-weight: 720; letter-spacing: -.04em; }
.portal-authenticated .icon-button { width: 2.15rem; height: 2.15rem; background: transparent; }
.portal-authenticated .configuration-modal .configuration-field input:not([type=checkbox]) { min-height: 3.7rem; }
.portal-authenticated .configuration-modal .toggle-row {
    min-height: 5.25rem;
    margin: 1.8rem 0 0;
    border-top: 1px solid #223b52;
    padding-top: 1.35rem;
}
.portal-authenticated .configuration-modal .toggle-row strong { color: #f0f5fa; font-size: .9rem; }
.portal-authenticated .configuration-modal .toggle-row small { max-width: 27rem; color: #8295a8; font-size: .77rem; }
.portal-authenticated .modal-actions { margin-top: 1.4rem; border-top: 1px solid #223b52; padding-top: 1.35rem; }
.portal-authenticated .modal-actions .button { min-height: 3rem; border-radius: .48rem; padding: .7rem 1.15rem; }
.portal-authenticated .delivery-success-modal { width: min(calc(100% - 2rem), 42rem); }
.delivery-success-intro { margin: 0 0 .55rem; color: #dbe7f1; font-size: 1rem; line-height: 1.55; }
.delivery-success-validity { margin: 0 0 1.5rem; color: #8498aa; font-size: .84rem; line-height: 1.5; }
.one-time-key { margin: 0 0 1.5rem; border: 1px solid #294963; border-radius: .7rem; background: #08192a; padding: 1rem; }
.one-time-key label { display: block; margin-bottom: .65rem; color: #eef6fc; font-size: .84rem; font-weight: 760; }
.one-time-key > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.one-time-key input:not([type=checkbox]) { min-width: 0; min-height: 3.15rem; border-radius: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.one-time-key .copy-key-button { width: 3.15rem; height: 3.15rem; border: 1px solid #31536d; background: #102b42; color: #5ac5f4; }
.one-time-key > p { margin: .7rem 0 0; color: #ffbd75; font-size: .78rem; line-height: 1.45; }
.copy-key-status { display: block; min-height: 1.15rem; margin-top: .45rem; color: #65d5ad; font-size: .76rem; }
.peer-setup-commands { margin: 0 0 1.5rem; border-top: 1px solid #223b52; padding-top: 1.25rem; }
.peer-setup-commands h3 { margin: 0 0 .3rem; color: #dceaf5; font-size: .94rem; font-weight: 720; }
.peer-setup-commands > p { margin: 0 0 .85rem; color: #8498aa; font-size: .78rem; line-height: 1.45; }
.peer-setup-command + .peer-setup-command { margin-top: .8rem; }
.peer-setup-command label { display: block; margin-bottom: .42rem; color: #aabccc; font-size: .76rem; font-weight: 700; }
.peer-setup-command > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.peer-setup-command input { min-width: 0; min-height: 2.8rem; border: 1px solid #294963; border-radius: .5rem; background: #08192a; color: #dbe7f1; padding: .55rem .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; }
.peer-setup-command .copy-key-button { width: 2.8rem; height: 2.8rem; border: 1px solid #31536d; background: #102b42; color: #5ac5f4; }
.peer-setup-command .copy-key-status { min-height: 0; margin-top: .3rem; }
.delivery-success-modal > .button { width: 100%; }
.portal-authenticated .button--danger { border-color: #a13f4b; background: #a13f4b; color: #fff; box-shadow: none; }
.portal-authenticated .button--danger:hover,
.portal-authenticated .button--danger:focus-visible { border-color: #c3515e; background: #b64855; }

.portal-authenticated .confirmation-modal { width: min(calc(100% - 2rem), 35rem); }
.portal-authenticated .confirmation-question { margin: 0; color: #dce6ee; font-size: .98rem; line-height: 1.6; }
.portal-authenticated .confirmation-note,
.portal-authenticated .client-list-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border: 1px solid #284861;
    border-radius: .5rem;
    background: rgba(39, 115, 157, .1);
    color: #9fb3c5;
    padding: .8rem .9rem;
    font-size: .79rem;
    line-height: 1.5;
}
.portal-authenticated .confirmation-note { margin: 1.2rem 0 0; }
.portal-authenticated .confirmation-note .icon,
.portal-authenticated .client-list-note .icon { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .08rem; color: #57c3ef; }

.portal-authenticated .client-list-modal[open] {
    display: flex;
    width: min(calc(100% - 2rem), 42rem);
    height: min(38rem, calc(100vh - 2rem));
    flex-direction: column;
}
.portal-authenticated .client-list-modal .modal-topline { flex: 0 0 auto; margin-bottom: 1.25rem; }
.portal-authenticated .client-list-modal .modal-topline h2 { font-size: 1.55rem; }
.portal-authenticated .client-list-summary { margin: .35rem 0 0; color: #71889d; font-size: .79rem; }
.portal-authenticated .client-list-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    border-top: 1px solid #223b52;
    border-bottom: 1px solid #223b52;
    padding: .65rem .15rem;
    scrollbar-color: #345670 transparent;
}
.portal-authenticated .configuration-client-row {
    display: grid;
    min-height: 4.4rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid #213c54;
    border-radius: .48rem;
    background: rgba(7, 20, 35, .38);
    padding: .72rem .8rem;
}
.portal-authenticated .configuration-client-row + .configuration-client-row { margin-top: .55rem; }
.portal-authenticated .configuration-client-row.is-removing { opacity: 0; transform: translateX(.4rem); transition: opacity .16s ease, transform .16s ease; }
.portal-authenticated .configuration-client-identity { min-width: 0; }
.portal-authenticated .configuration-client-identity strong,
.portal-authenticated .configuration-client-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-authenticated .configuration-client-identity strong { color: #edf4fa; font-size: .86rem; }
.portal-authenticated .configuration-client-identity span { margin-top: .2rem; color: #778ca0; font-size: .75rem; }
.portal-authenticated .configuration-client-tokens { color: #91a6b8; font-size: .75rem; white-space: nowrap; }
.portal-authenticated .configuration-client-actions { display: flex; align-items: center; gap: .2rem; }
.portal-authenticated .configuration-client-actions form { margin: 0; }
.portal-authenticated .client-remove-button {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: #8297aa;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.portal-authenticated .client-remove-button:hover,
.portal-authenticated .client-remove-button:focus-visible { border-color: rgba(215, 75, 91, .35); background: rgba(179, 55, 70, .12); color: #f08591; outline: 0; }
.portal-authenticated .client-remove-button .icon { width: .95rem; height: .95rem; }
.portal-authenticated .client-list-empty { display: flex; min-height: 12rem; align-items: center; justify-content: center; gap: .6rem; color: #758a9e; font-size: .82rem; text-align: center; }
.portal-authenticated .client-list-empty .icon { width: 1rem; height: 1rem; }
.portal-authenticated .client-list-note { flex: 0 0 auto; margin: 1rem 0 0; }

.portal-authenticated .account-breadcrumb { margin-top: 2.45rem; }
.portal-authenticated .account-breadcrumb span { color: #35b5ef; }
.portal-authenticated .account-card { border-radius: .62rem; padding: 2.05rem 2.1rem 2.2rem; }
.portal-authenticated .account-intro { margin: 0 0 1.6rem; color: #91a2b4; font-size: .93rem; }
.portal-authenticated .account-details > div { border-color: #243d56; border-radius: 0; background: transparent; }
.portal-authenticated .billing-save-button,
.portal-authenticated .account-2fa-button {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .58rem;
    border-color: #128ed0;
    border-radius: .48rem;
    background: linear-gradient(180deg, #27a9e9, #168dce);
    box-shadow: 0 .6rem 1.4rem rgba(10, 112, 171, .2);
    font-size: .91rem;
    font-weight: 750;
}
.portal-authenticated .billing-save-button .icon,
.portal-authenticated .account-2fa-button .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.portal-authenticated .account-2fa-button--secondary { border-color: #31516d; background: rgba(18, 42, 65, .75); box-shadow: none; color: #d6e1eb; }

@media (max-width: 900px) {
    .portal-authenticated .portal-header { grid-template-columns: 1fr auto; }
    .portal-authenticated .portal-header .portal-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; border-top: 1px solid #20384f; padding: .35rem 0; }
    .portal-authenticated .portal-header { padding-top: .8rem; padding-bottom: .45rem; }
    .configuration-workspace { grid-template-columns: 1fr; }
    .portal-authenticated .configuration-action-panel { min-height: 0; }
}

@media (max-width: 650px) {
    .portal-authenticated .portal-shell { width: min(calc(100% - 1rem), 84.5rem); padding-top: .5rem; }
    .portal-authenticated .portal-header { padding-right: 1rem; padding-left: 1rem; }
    .portal-authenticated .portal-actions { gap: .75rem; }
    .portal-authenticated .account-link { display: none; }
    .portal-authenticated .configuration-fields { grid-template-columns: 1fr; }
    .portal-authenticated .service-breadcrumb,
    .portal-authenticated .workspace-title,
    .portal-authenticated .configuration-form,
    .portal-authenticated .saved-configurations,
    .portal-authenticated .account-breadcrumb,
    .portal-authenticated .account-card { margin-right: .25rem; margin-left: .25rem; }
    .portal-authenticated .configuration-card--form,
    .portal-authenticated .configuration-action-panel,
    .portal-authenticated .saved-configurations { padding: 1.35rem; }
    .portal-authenticated .configuration-row { align-items: flex-start; flex-direction: column; }
    .portal-authenticated .configuration-row-actions { width: 100%; justify-content: flex-end; }
    .portal-authenticated .configuration-client-row { grid-template-columns: minmax(0, 1fr) auto; }
    .portal-authenticated .configuration-client-tokens { grid-column: 1; }
    .portal-authenticated .configuration-client-actions { grid-column: 2; grid-row: 1 / span 2; }
}

/* System administration: metrics are available only to ROLE_SYSTEM_ADMIN. */
.system-admin-link { color: #8fc7e4; font-size: .78rem; font-weight: 750; text-decoration: none; }
.system-admin-link:hover { color: #fff; }
.portal-authenticated .system-admin-hero { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 1.35rem 1rem; overflow: hidden; border: 1px solid rgba(81, 183, 232, .34); border-radius: .82rem; background: linear-gradient(118deg, rgba(14, 43, 67, .94), rgba(9, 27, 46, .97)); padding: 1.8rem 2.05rem; }
.portal-authenticated .system-admin-hero h1 { margin: .32rem 0 .5rem; color: #f4faff; font-size: clamp(1.6rem, 3vw, 2.15rem); }
.portal-authenticated .system-admin-hero > div > p:last-child { max-width: 44rem; margin: 0; color: #b7c8d6; font-size: .92rem; }
.system-admin-year-switcher { display: inline-flex; flex: 0 0 auto; align-items: center; overflow: hidden; border: 1px solid rgba(105, 190, 231, .3); border-radius: .6rem; background: rgba(3, 20, 36, .5); box-shadow: inset 0 1px rgba(255, 255, 255, .045); }
.system-admin-year-switcher a,
.system-admin-year-switcher > span { display: grid; min-width: 2.2rem; height: 2.2rem; place-items: center; color: #8cc6e2; font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.system-admin-year-switcher a:hover { background: rgba(30, 161, 220, .18); color: #e6faff; }
.system-admin-year-switcher .system-admin-year-current { min-width: 4.25rem; border-right: 1px solid rgba(105, 190, 231, .2); border-left: 1px solid rgba(105, 190, 231, .2); color: #e5f6ff; font-size: .84rem; letter-spacing: .035em; }
.system-admin-year-switcher .is-disabled { color: #49677d; }
.portal-authenticated .system-admin-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 1.35rem 1rem; }
.portal-authenticated .system-admin-service { margin: 0; border-radius: .72rem; background: linear-gradient(155deg, rgba(13, 39, 61, .94), rgba(8, 25, 43, .94)); padding: 1.45rem; }
.system-admin-service .eyebrow { margin: 0; }
.system-admin-service h2 { margin: 1.1rem 0 .1rem; color: #f4faff; font-size: 2rem; }
.system-admin-service-label { margin: 0; color: #afc2d1; font-size: .82rem; }
.system-admin-service dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.45rem 0 0; border-top: 1px solid rgba(123, 179, 211, .16); padding-top: .9rem; }
.system-admin-service dt { color: #7894a8; font-size: .67rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.system-admin-service dd { margin: .3rem 0 0; color: #dcebf5; font-size: .83rem; font-weight: 700; }
.system-admin-chart { margin-top: 1.15rem; }
.system-admin-chart-plot { position: relative; height: 8rem; }
.system-admin-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.system-admin-chart-grid { fill: none; stroke: rgba(119, 176, 211, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.system-admin-chart-area { fill: url(#none); fill: rgba(21, 160, 231, .14); }
.system-admin-chart-line { fill: none; stroke: #1aa9f3; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .28rem rgba(43, 187, 249, .46)); }
.system-admin-chart-point { fill: #dff7ff; stroke: #119cde; stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: crosshair; transition: r .14s ease, fill .14s ease, stroke .14s ease; }
.system-admin-chart-point:hover,
.system-admin-chart-point:focus { r: 6; fill: #fff; stroke: #55cdfb; outline: none; }
.system-admin-chart-tooltip { position: absolute; z-index: 3; border: 1px solid rgba(101, 214, 255, .52); border-radius: .45rem; background: #062139; box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .32); color: #eafbff; padding: .38rem .52rem; font-size: .7rem; font-weight: 760; pointer-events: none; transform: translate(-50%, calc(-100% - .55rem)); white-space: nowrap; }
.system-admin-chart-dates { display: flex; justify-content: space-between; margin-top: .35rem; color: #718da1; font-size: .65rem; }
.portal-authenticated .system-admin-users { margin: 0 1.35rem; border-radius: .72rem; padding: 1.5rem; }
.system-admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.system-admin-section-heading .eyebrow { margin: 0 0 .35rem; }
.system-admin-section-heading h2 { margin: 0; color: #f4faff; font-size: 1.35rem; }
.system-admin-section-heading > strong { color: #67c7f3; font-size: 1.35rem; }
.system-admin-table-wrap { overflow-x: auto; }
.system-admin-users table { width: 100%; border-collapse: collapse; font-size: .84rem; text-align: left; }
.system-admin-users th { border-bottom: 1px solid rgba(123, 179, 211, .22); padding: .75rem .8rem; color: #829db1; font-size: .69rem; letter-spacing: .055em; text-transform: uppercase; }
.system-admin-users td { border-bottom: 1px solid rgba(123, 179, 211, .12); padding: .9rem .8rem; color: #d6e3ec; vertical-align: top; }
.system-admin-users tbody tr:last-child td { border-bottom: 0; }
.system-admin-product { display: block; color: #8ec9e9; white-space: nowrap; }
.system-admin-empty { color: #8095a6; }
.portal-authenticated .system-admin-insights { display: grid; grid-template-columns: 1fr 1.35fr; align-items: stretch; gap: 1rem; margin: 1rem 1.35rem; }
.portal-authenticated .system-admin-metrics, .portal-authenticated .system-admin-countries { box-sizing: border-box; min-height: 11.8rem; margin: 0; border-radius: .72rem; padding: 1.45rem; }
.system-admin-insights h2 { margin: .4rem 0 1.2rem; color: #f2f9ff; font-size: 1.1rem; }.system-admin-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.system-admin-metric-grid > div { border: 1px solid rgba(104, 181, 222, .16); border-radius: .52rem; background: rgba(3, 21, 38, .32); padding: .95rem; }.system-admin-metric-grid strong { display: block; color: #55c8f6; font-size: 1.6rem; }.system-admin-metric-grid span { display: block; margin-top: .25rem; color: #91a9ba; font-size: .72rem; line-height: 1.35; }
.system-admin-countries { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }.system-admin-country-copy { min-width: 0; }.system-admin-country-list-viewport { min-height: 4.95rem; }.system-admin-countries ul { display: grid; gap: .38rem; margin: 0; padding: 0; list-style: none; }.system-admin-countries li { display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; color: #b5c7d4; font-size: .76rem; }.system-admin-countries li i { width: .48rem; height: .48rem; border-radius: 50%; background: #1aa9f3; }.system-admin-countries li:nth-child(2) i { background: #58d1aa; }.system-admin-countries li:nth-child(3) i { background: #8676f9; }.system-admin-countries li:nth-child(4) i { background: #f0a34a; }.system-admin-countries li:nth-child(5) i { background: #df71a9; }.system-admin-countries li:nth-child(6) i { background: #64c8d8; }.system-admin-countries li:nth-child(7) i { background: #1aa9f3; }.system-admin-countries li:nth-child(8) i { background: #58d1aa; }.system-admin-countries li strong { color: #e7f3fa; }.system-admin-country-pager { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; }.system-admin-country-pager button { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid rgba(95, 194, 236, .27); border-radius: .36rem; background: rgba(7, 35, 55, .58); color: #8ed1ef; font: inherit; font-size: 1rem; cursor: pointer; }.system-admin-country-pager button:disabled { opacity: .35; cursor: default; }.system-admin-country-pager span { min-width: 2.2rem; color: #7897aa; font-size: .67rem; text-align: center; }.system-admin-country-pie { width: 7rem; height: 7rem; flex: 0 0 auto; filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .24)); }.system-admin-country-pie-base { fill: none; stroke: #17334a; stroke-width: 16; }
.portal-authenticated .system-admin-recent { margin: 1.35rem; }.system-admin-recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.portal-authenticated .system-admin-recent-service { margin: 0; border-radius: .72rem; padding: 1.25rem; }.system-admin-recent-service-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }.system-admin-recent-service h3 { margin: 0; color: #edf8ff; font-size: .98rem; }.system-admin-recent-service-heading a, .system-admin-all-users, .system-admin-back { color: #58c8f5; font-size: .74rem; font-weight: 760; text-decoration: none; }.system-admin-recent-service ol { display: grid; gap: .1rem; margin: .9rem 0 0; padding: 0; list-style: none; }.system-admin-recent-service li { border-top: 1px solid rgba(110, 177, 215, .12); padding: .58rem 0; }.system-admin-recent-service li > span, .system-admin-recent-service li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.system-admin-recent-service li > span { color: #c9dce8; font-size: .75rem; }.system-admin-recent-service li small { margin-top: .18rem; color: #7190a4; font-size: .66rem; }.system-admin-all-users { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; }.system-admin-all-users span { font-size: 1rem; }.system-admin-hero--compact { align-items: center; }.system-admin-back { border: 1px solid rgba(103, 190, 230, .25); border-radius: .5rem; padding: .62rem .75rem; }

@media (max-width: 900px) {
    .portal-authenticated .system-admin-services { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .portal-authenticated .system-admin-hero,
    .portal-authenticated .system-admin-services,
    .portal-authenticated .system-admin-users { margin-right: .25rem; margin-left: .25rem; }
    .portal-authenticated .system-admin-hero { padding: 1.45rem; }
    .portal-authenticated .system-admin-hero { align-items: stretch; flex-direction: column; }
    .system-admin-year-switcher { align-self: flex-start; }
    .portal-authenticated .system-admin-users { padding: 1.1rem; }
}

/* App shell refinement: product-level navigation and durable service footer. */
body { display: flex; flex-direction: column; }
.portal-shell { flex: 1 0 auto; }
.portal-footer { flex: 0 0 auto; border-top: 1px solid rgba(77, 126, 163, .2); background: rgba(4, 15, 27, .68); }
.portal-footer-inner { display: grid; width: min(calc(100% - 2rem), 81.8rem); grid-template-columns: minmax(15rem, 1.35fr) auto minmax(18rem, 1.5fr) auto; align-items: center; gap: 1.5rem; margin: 0 auto; padding: 1.15rem 1.35rem; color: #71869a; font-size: .76rem; }
.portal-footer-brand { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.portal-footer-brand > div { display: grid; gap: .12rem; }
.portal-footer-brand strong { color: #dce9f4; font-size: .82rem; letter-spacing: -.015em; }
.portal-footer-brand span { color: #71869a; }
.portal-footer-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(73, 182, 232, .28); border-radius: .6rem; background: linear-gradient(145deg, rgba(34, 148, 205, .2), rgba(19, 63, 98, .16)); color: #61caf6; }
.portal-footer-mark .icon { width: 1.05rem; height: 1.05rem; }
.portal-footer-status { display: inline-flex; align-items: center; gap: .46rem; margin: 0; color: #91b7aa; white-space: nowrap; }
.portal-footer-status i { display: block; width: .44rem; height: .44rem; border-radius: 50%; background: #4fcca2; box-shadow: 0 0 .6rem rgba(79, 204, 162, .55); }
.portal-footer-help { margin: 0; line-height: 1.45; }
.portal-footer-copyright { margin: 0; color: #60758a; white-space: nowrap; }

.portal-authenticated .portal-header {
    position: sticky;
    z-index: 15;
    top: .85rem;
    min-height: 5.15rem;
    margin-bottom: 2.1rem;
    border-color: rgba(69, 131, 173, .46);
    border-radius: .9rem;
    background: linear-gradient(105deg, rgba(9, 27, 47, .97), rgba(9, 31, 52, .94));
    padding: .65rem 1rem .65rem 1.1rem;
    box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .045);
    backdrop-filter: blur(16px);
}
.portal-authenticated .portal-brand { gap: .7rem; }
.portal-authenticated .portal-brand-mark { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgba(91, 202, 245, .55); border-radius: .72rem; background: linear-gradient(145deg, rgba(39, 169, 228, .3), rgba(19, 79, 132, .44)); box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 .4rem 1.1rem rgba(15, 115, 175, .16); color: #dff6ff; }
.portal-authenticated .portal-brand-mark .icon { width: 1.35rem; height: 1.35rem; }
.portal-authenticated .portal-brand-copy { display: grid; gap: .08rem; }
.portal-authenticated .portal-brand-name { color: #f1f8fe; font-size: .94rem; font-weight: 800; letter-spacing: -.035em; }
.portal-authenticated .portal-brand-context { color: #72c9ee; font-size: .67rem; font-weight: 720; letter-spacing: .055em; text-transform: uppercase; }
.portal-authenticated .portal-header .portal-nav { gap: .22rem; border: 1px solid rgba(77, 136, 176, .24); border-radius: .75rem; background: rgba(3, 16, 30, .35); padding: .25rem; }
.portal-authenticated .portal-nav > a,
.portal-authenticated .service-menu > summary { min-height: 2.85rem; border-radius: .54rem; padding: .58rem .85rem; font-size: .86rem; }
.portal-authenticated .portal-nav > a[aria-current=page],
.portal-authenticated .service-menu[data-current=true] > summary,
.portal-authenticated .service-menu[open] > summary { background: linear-gradient(135deg, rgba(27, 152, 215, .3), rgba(26, 104, 161, .26)); box-shadow: inset 0 0 0 1px rgba(88, 198, 242, .18); color: #bcf0ff; }
.portal-authenticated .portal-actions { gap: .4rem; }
.portal-authenticated .account-link,
.portal-authenticated .logout-form button { display: inline-flex; min-height: 2.55rem; align-items: center; gap: .42rem; border-radius: .52rem; padding: .5rem .68rem; color: #adc0d0; font-size: .82rem; }
.portal-authenticated .account-link .icon { width: 1rem; height: 1rem; color: #67c9f3; }
.portal-authenticated .logout-form { border-left: 1px solid rgba(91, 133, 163, .26); padding-left: .32rem; }
.portal-authenticated .logout-form button:hover,
.portal-authenticated .logout-form button:focus-visible { background: rgba(255, 255, 255, .065); }
.portal-authenticated .locale-menu { margin-left: .25rem; border-radius: .48rem; background: rgba(4, 19, 34, .42); padding: .48rem .58rem; }

@media (max-width: 900px) {
    .portal-footer-inner { grid-template-columns: 1fr auto; }
    .portal-footer-help { grid-column: 1 / -1; }
    .portal-authenticated .portal-header { top: .5rem; }
}

@media (max-width: 650px) {
    .portal-footer-inner { width: min(calc(100% - 1rem), 84.5rem); gap: .8rem; padding: 1rem; }
    .portal-footer-brand span, .portal-footer-help { display: none; }
    .portal-authenticated .portal-header { margin-right: .25rem; margin-left: .25rem; border-radius: .72rem; }
    .portal-authenticated .portal-brand-mark { width: 2.35rem; height: 2.35rem; }
    .portal-authenticated .portal-brand-name { font-size: .86rem; }
    .portal-authenticated .portal-brand-context { font-size: .6rem; }
    .portal-authenticated .portal-header .portal-nav { order: 3; margin-top: .15rem; }
    .portal-authenticated .logout-form { border-left: 0; padding-left: 0; }
    .portal-authenticated .logout-form button { padding-right: .35rem; padding-left: .35rem; }
}

/* Client portal corrections: real brand asset, service-only navigation and coherent overview. */
.portal-authenticated .portal-brand { gap: .58rem; }
.portal-authenticated .portal-brand-logo { display: block; width: 10.25rem; height: auto; filter: brightness(0) invert(1); }
.portal-authenticated .portal-brand-copy { padding-left: .62rem; border-left: 1px solid rgba(104, 158, 193, .34); }
.portal-authenticated .portal-brand-context { color: #88b5ce; font-size: .62rem; letter-spacing: .075em; }
.portal-authenticated .portal-header .portal-nav { min-width: 0; }
.portal-authenticated .portal-brand-mark,
.portal-authenticated .portal-brand-name { display: none; }
.portal-footer-logo { display: block; width: 7.9rem; height: auto; filter: brightness(0) invert(1); opacity: .86; }
.portal-footer-mark { display: none; }

.portal-authenticated .account-overview-hero {
    position: relative;
    display: flex;
    min-height: 11.5rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    margin: 0 1.35rem 1rem;
    border: 1px solid rgba(81, 183, 232, .36);
    border-radius: .82rem;
    background: radial-gradient(28rem 17rem at 100% 100%, rgba(31, 155, 215, .22), transparent 72%), linear-gradient(118deg, rgba(15, 45, 70, .94), rgba(9, 28, 47, .97));
    padding: 1.9rem 2.1rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1rem 2.5rem rgba(0, 0, 0, .15);
}
.portal-authenticated .account-overview-hero::after { position: absolute; right: -7rem; top: -12rem; width: 26rem; height: 26rem; border: 1px solid rgba(114, 210, 249, .15); border-radius: 50%; content: ''; }
.account-overview-copy, .account-overview-status { position: relative; z-index: 1; }
.account-overview-copy .eyebrow { margin-bottom: .45rem; }
.account-overview-copy h1 { margin: 0; color: #f4faff; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.account-overview-copy p:last-child { max-width: 37rem; margin: .55rem 0 0; color: #b6c7d5; font-size: .92rem; line-height: 1.55; }
.account-overview-status { display: grid; min-width: 9rem; justify-items: end; gap: .38rem; color: #9ab1c1; font-size: .7rem; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }
.account-overview-status .status-badge { color: #8ae0c2; font-size: .88rem; letter-spacing: 0; text-transform: none; }
.portal-authenticated .account-columns { gap: 1rem; margin: 0 1.35rem; }
.portal-authenticated .account-columns .account-card { margin: 0; }
.portal-authenticated .account-profile-card { background: linear-gradient(155deg, rgba(13, 37, 58, .94), rgba(9, 27, 46, .94)); }
.portal-authenticated .account-billing-card { background: linear-gradient(155deg, rgba(13, 37, 58, .94), rgba(9, 27, 46, .94)); }

@media (max-width: 650px) {
    .portal-authenticated .portal-brand-logo { width: 8.3rem; }
    .portal-authenticated .portal-brand-copy { padding-left: .45rem; }
    .portal-authenticated .account-overview-hero { min-height: 0; align-items: flex-start; flex-direction: column; gap: 1.15rem; margin-right: .25rem; margin-left: .25rem; padding: 1.45rem; }
    .account-overview-status { justify-items: start; border-top: 1px solid rgba(122, 185, 217, .24); padding-top: .85rem; }
    .portal-authenticated .account-columns { margin-right: .25rem; margin-left: .25rem; }
    .portal-authenticated .account-columns .account-card { margin-right: 0; margin-left: 0; }
    .portal-footer-logo { width: 6.8rem; }
}

/* The logo opens the service overview; its surface follows the workspace panels. */
.portal-authenticated .services-hero {
    position: relative;
    min-height: 10.75rem;
    margin: 0 1.35rem 1rem;
    overflow: hidden;
    border: 1px solid rgba(81, 183, 232, .34);
    border-radius: .82rem;
    background: radial-gradient(25rem 16rem at 100% 100%, rgba(27, 151, 214, .2), transparent 72%), linear-gradient(118deg, rgba(14, 43, 67, .94), rgba(9, 27, 46, .97));
    padding: 1.8rem 2.05rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1rem 2.5rem rgba(0, 0, 0, .14);
}
.portal-authenticated .services-hero::after { position: absolute; top: -13rem; right: -7rem; width: 28rem; height: 28rem; border: 1px solid rgba(110, 211, 250, .15); border-radius: 50%; content: ''; }
.portal-authenticated .services-hero-copy { position: relative; z-index: 1; }
.portal-authenticated .services-hero h1 { margin-bottom: .45rem; font-size: clamp(1.6rem, 3vw, 2.15rem); }
.portal-authenticated .services-hero .intro { max-width: 38rem; color: #b7c8d6; font-size: .92rem; }
.portal-authenticated .service-switcher { width: auto; margin: 0 1.35rem 1.15rem; border: 1px solid rgba(52, 93, 124, .7); border-radius: .66rem; background: rgba(6, 22, 38, .5); padding: .28rem; }
.portal-authenticated .service-switcher-item { border-radius: .46rem; padding: .62rem .82rem; }
.portal-authenticated .service-switcher-item[aria-current=page] { background: rgba(34, 144, 202, .2); box-shadow: inset 0 0 0 1px rgba(86, 193, 235, .15); }
.portal-authenticated .service-switcher-item[aria-current=page]::after { display: none; }
.portal-authenticated .service-spotlight { margin: 0 1.35rem; border-radius: .72rem; background: linear-gradient(145deg, rgba(13, 39, 61, .94), rgba(8, 25, 43, .94)); padding: 1.75rem 1.9rem; }
.portal-authenticated .service-catalog { margin: 2rem 1.35rem 0; }
.portal-authenticated .service-option { border-radius: .72rem; background: rgba(10, 31, 51, .74); }

@media (max-width: 650px) {
    .portal-authenticated .services-hero,
    .portal-authenticated .service-switcher,
    .portal-authenticated .service-spotlight,
    .portal-authenticated .service-catalog { margin-right: .25rem; margin-left: .25rem; }
    .portal-authenticated .services-hero { min-height: 0; padding: 1.45rem; }
    .portal-authenticated .service-switcher { overflow-x: auto; }
    .portal-authenticated .service-spotlight { padding: 1.4rem; }
}

/* One navigation layer: the brand is the client overview. */
.portal-authenticated .portal-header { grid-template-columns: minmax(0, 1fr) auto; }
.portal-authenticated .portal-actions { grid-column: 2; }
.portal-footer-brand > div,
.portal-footer-brand strong { display: none; }
.portal-footer-brand > span { color: #71869a; line-height: 1.4; }
.portal-authenticated .services-hero { min-height: 8.7rem; margin-bottom: 1.2rem; }
.portal-authenticated .service-spotlight { margin-top: 0; }
.portal-authenticated .service-spotlight--single { min-height: 14.5rem; }
.portal-authenticated .service-spotlight--single .service-spotlight-copy { max-width: 44rem; }

/* Equal service cards: one available today, the rest transparently marked as upcoming. */
.portal-authenticated .service-options--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 1.35rem; }
.portal-authenticated .service-options--three .service-option { display: flex; min-height: 16.5rem; flex-direction: column; border-radius: .72rem; padding: 1.45rem; }
.portal-authenticated .service-options--three .service-card-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.portal-authenticated .service-options--three .service-option h2 { margin: 1.1rem 0 .55rem; }
.portal-authenticated .service-options--three .service-option p { margin: 0; }
.portal-authenticated .service-option--active { border-color: rgba(82, 184, 235, .38); background: linear-gradient(155deg, rgba(15, 52, 79, .92), rgba(9, 29, 48, .96)); }
.portal-authenticated .service-option--coming-soon { background: rgba(10, 28, 46, .7); }
.portal-authenticated .service-option--coming-soon .service-ready { margin: 0; color: #91a6b8; }
.portal-authenticated .service-option--coming-soon .service-ready::before { background: #6c8194; box-shadow: none; }
.service-option-action { width: 100%; margin-top: auto; }
.service-option-action:not(.button) { padding-top: 1.5rem; }
.service-option-action .button,
.service-option-action.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; gap: .58rem; border-radius: .55rem; font-size: .84rem; }
.service-option-action-arrow { font-size: 1.05rem; font-weight: 500; line-height: 1; transition: transform .16s ease; }
.service-option-action:hover .service-option-action-arrow,
.service-option-action:focus-visible .service-option-action-arrow { transform: translateX(.16rem); }

@media (max-width: 900px) {
    .portal-authenticated .service-options--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-authenticated .service-options--three .service-option:last-child { grid-column: span 2; }
    .portal-authenticated .system-admin-insights { grid-template-columns: 1fr; }
    .system-admin-recent-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .portal-authenticated .service-options--three { grid-template-columns: 1fr; margin-right: .25rem; margin-left: .25rem; }
    .portal-authenticated .service-options--three .service-option,
    .portal-authenticated .service-options--three .service-option:last-child { grid-column: auto; min-height: 0; }
}

@media (max-width: 650px) {
    .portal-authenticated .portal-header { grid-template-columns: minmax(0, 1fr) auto; }
    .portal-authenticated .portal-actions { grid-column: 2; }
    .portal-authenticated .services-hero { min-height: 0; }
    .portal-authenticated .system-admin-insights, .portal-authenticated .system-admin-recent { margin-right: .25rem; margin-left: .25rem; }
    .system-admin-countries { align-items: flex-start; flex-direction: column; }.system-admin-country-pie { align-self: center; }
}

/* The country panel keeps a fixed, compact legend while the chart occupies the free space. */
.system-admin-countries { display: grid; grid-template-columns: minmax(15rem, .82fr) minmax(13rem, 1fr); align-items: stretch; }
.system-admin-country-copy { display: flex; min-width: 0; flex-direction: column; }
.system-admin-country-list-viewport { min-height: 6.15rem; }
.system-admin-country-chart { position: relative; display: grid; width: auto; min-width: 0; flex: initial; place-items: center; align-content: center; }
.system-admin-country-pie { width: 8.75rem; height: 8.75rem; }
.system-admin-country-detail { position: absolute; top: 50%; left: 50%; width: 6.35rem; margin: 0; color: #dff6ff; font-weight: 760; line-height: 1.15; text-align: center; transform: translate(-50%, -50%); }
.system-admin-country-detail-name, .system-admin-country-detail-value { display: block; }
.system-admin-country-detail-name { font-size: .76rem; }
.system-admin-country-detail-value { margin-top: .18rem; color: #fff; font-size: .92rem; font-weight: 500; }
.resend-verification-form { margin: 1.5rem 0 1rem; text-align: center; }
.resend-verification-form p { margin: 0 0 .75rem; color: #b9c9d6; font-size: .88rem; }
.resend-verification-form .button { width: 100%; min-height: 3.45rem; }
.system-admin-countries [data-country-entry][hidden] { display: none !important; }

@media (max-width: 650px) {
    .system-admin-countries { display: flex; }
    .system-admin-country-chart { align-self: stretch; }
    .system-admin-country-pie { width: 9rem; height: 9rem; }
}

.field-optional { color: #788da1; font-weight: 400; }