:root {
    --agnita-portal-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --agnita-portal-font-heading: Onest, Inter, ui-sans-serif, system-ui, sans-serif;
    --agnita-portal-bg: #0b1220;
    --agnita-portal-text: #f8fafc;
    --agnita-portal-text-muted: #99a7bd;
    --agnita-portal-surface: #151e2d;
    --agnita-portal-surface-raised: #1b2637;
    --agnita-portal-input: #263242;
    --agnita-portal-border: #293548;
    --agnita-portal-primary: #705de2;
    --agnita-portal-primary-hover: #806cf0;
    --agnita-portal-focus: #9b87f5;
    --agnita-portal-link: #b8a6ff;
    --agnita-portal-radius: 18px;
    --agnita-portal-shadow: 0 24px 70px rgb(2 6 23 / 28%);
    color-scheme: dark;
    font-family: var(--agnita-portal-font-body);
    background: var(--agnita-portal-bg);
    color: var(--agnita-portal-text);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--agnita-portal-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 72% -18%, rgb(112 93 226 / 16%), transparent 35rem),
        var(--agnita-portal-bg);
    color: var(--agnita-portal-text);
    font-family: var(--agnita-portal-font-body);
}

button,
input,
select,
textarea {
    font: inherit;
}

.portal-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 272px minmax(0, 1fr);
}

.portal-sidebar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    width: 272px;
    height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.4rem 1rem 1rem;
    border-right: 1px solid var(--agnita-portal-border);
    background:
        radial-gradient(circle at 0 0, rgb(112 93 226 / 15%), transparent 18rem),
        rgb(14 22 35 / 96%);
    backdrop-filter: blur(18px);
}

.portal-brand {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.65rem;
    color: var(--agnita-portal-text);
    font-weight: 700;
    text-decoration: none;
}

.portal-brand img {
    width: 29px;
    height: 29px;
    filter: brightness(0) invert(1);
}

.portal-brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.portal-brand-name {
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.portal-brand-product {
    padding-left: 0.75rem;
    border-left: 1px solid rgb(255 255 255 / 18%);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.portal-navigation {
    display: grid;
    gap: 0.35rem;
    margin-top: 2.2rem;
}

.portal-navigation-label {
    margin: 1.25rem 0 0.45rem;
    padding: 0 0.8rem;
    color: #687890;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portal-navigation-label:first-child {
    margin-top: 0;
}

.portal-navigation a {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 0.85rem;
    padding: 0 0.8rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #b3bfd0;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 160ms ease;
    transition-property: background, border-color, color, transform;
}

.portal-navigation a svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #718099;
    transition: color 160ms ease;
}

.portal-navigation .portal-navigation-external-icon {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: auto;
    color: #858eaa;
    stroke-width: 2;
}

.portal-navigation a:hover {
    background: rgb(255 255 255 / 4%);
    color: var(--agnita-portal-text);
    transform: translateX(2px);
}

.portal-navigation a.active {
    border-color: rgb(155 135 245 / 18%);
    background: linear-gradient(90deg, rgb(112 93 226 / 26%), rgb(112 93 226 / 8%));
    color: #fff;
}

.portal-navigation a.active svg {
    color: #bcaeff;
}

.portal-icon-button svg,
.portal-menu-button svg,
.portal-topbar-action svg,
.portal-sidebar-sign-in-button svg,
.portal-primary-action svg {
    width: 1rem;
    height: 1rem;
}

.portal-sidebar-account,
.portal-sidebar-sign-in {
    margin-top: auto;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 14px;
    background: rgb(255 255 255 / 2.5%);
}

.portal-sidebar-account {
    display: grid;
    min-width: 0;
    align-items: center;
    padding: 0.75rem;
    gap: 0.7rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-account-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    border: 1px solid rgb(155 135 245 / 30%);
    border-radius: 11px;
    background: rgb(112 93 226 / 20%);
    color: #d8d0ff;
    font-size: 0.85rem;
    font-weight: 800;
    place-items: center;
}

.portal-account-copy {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.portal-account-copy strong,
.portal-account-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-account-copy strong {
    color: var(--agnita-portal-text);
    font-size: 0.82rem;
}

.portal-account-copy small {
    color: var(--agnita-portal-text-muted);
    font-size: 0.7rem;
}

.portal-icon-button,
.portal-menu-button {
    display: inline-grid;
    border: 0;
    background: transparent;
    color: var(--agnita-portal-text-muted);
    cursor: pointer;
    place-items: center;
}

.portal-icon-button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.portal-icon-button:hover {
    background: rgb(255 255 255 / 6%);
    color: #fff;
}

.portal-sidebar-sign-in {
    padding: 1rem;
}

.portal-sidebar-sign-in p {
    margin: 0 0 0.75rem;
    color: var(--agnita-portal-text-muted);
    font-size: 0.78rem;
}

.portal-sidebar-sign-in-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #d9d2ff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.portal-workspace {
    min-width: 0;
}

.portal-topbar {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px solid rgb(41 53 72 / 72%);
    background: rgb(11 18 32 / 96%);
}

.portal-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 11px;
}

.portal-topbar-copy {
    display: grid;
    gap: 0.1rem;
}

.portal-topbar-copy span {
    font-size: 0.88rem;
    font-weight: 700;
}

.portal-topbar-copy small {
    color: var(--agnita-portal-text-muted);
    font-size: 0.72rem;
}

.portal-topbar-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.85rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 10px;
    color: #d5dce8;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.portal-topbar-action:hover {
    border-color: rgb(155 135 245 / 38%);
    background: rgb(112 93 226 / 10%);
    color: #fff;
}

.portal-topbar-tools {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.portal-language-selector {
    position: relative;
    flex: 0 0 auto;
}

.portal-language-trigger {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 10px;
    background: rgb(14 20 32 / 74%);
    color: #d5dce8;
    cursor: pointer;
    font: inherit;
}

.portal-language-trigger:hover,
.portal-language-trigger[aria-expanded="true"] {
    border-color: rgb(155 135 245 / 44%);
    background: rgb(112 93 226 / 12%);
    color: #fff;
}

.portal-language-trigger:focus-visible,
.portal-language-menu button:focus-visible {
    outline: 2px solid #9b87f5;
    outline-offset: 2px;
}

.portal-language-symbol,
.portal-language-option-code {
    display: inline-grid;
    min-width: 26px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgb(112 93 226 / 20%);
    color: #cfc4ff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.portal-language-name {
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-language-chevron {
    color: var(--agnita-portal-text-muted);
    font-size: 0.9rem;
    line-height: 1;
    transform: translateY(-1px);
}

.portal-language-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.6rem);
    right: 0;
    display: grid;
    width: 190px;
    gap: 0.25rem;
    padding: 0.45rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 12px;
    background: #111827;
    box-shadow: 0 18px 48px rgb(0 0 0 / 36%);
}

.portal-language-menu button {
    display: grid;
    min-height: 42px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d5dce8;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
}

.portal-language-menu button:hover,
.portal-language-menu button.active {
    background: rgb(112 93 226 / 14%);
    color: #fff;
}

.portal-language-check {
    color: #a995ff;
    font-weight: 800;
}

.portal-topbar-account {
    min-width: 150px;
}

.portal-content {
    width: min(1240px, calc(100% - clamp(2rem, 6vw, 6rem)));
    margin: 0 auto;
    padding: clamp(2.25rem, 5vw, 4.5rem) 0 5rem;
}

.portal-content h1[tabindex="-1"]:focus {
    outline: none;
}

.portal-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.portal-eyebrow {
    margin: 0 0 0.65rem;
    color: var(--agnita-portal-link);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portal-page-heading h1,
.portal-welcome h1 {
    margin: 0;
    color: var(--agnita-portal-text);
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.portal-page-heading > div > p:last-child {
    margin: 0.9rem 0 0;
    color: var(--agnita-portal-text-muted);
    font-size: 1rem;
}

.portal-primary-action,
.portal-secondary-action {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0 1.15rem;
    border-radius: 11px;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    transition: 160ms ease;
    transition-property: background, border-color, box-shadow, color, transform;
}

.portal-primary-action {
    border: 1px solid var(--agnita-portal-primary);
    background: var(--agnita-portal-primary);
    box-shadow: 0 12px 32px rgb(112 93 226 / 24%);
    color: #fff;
}

.portal-primary-action:hover {
    border-color: var(--agnita-portal-primary-hover);
    background: var(--agnita-portal-primary-hover);
    box-shadow: 0 16px 38px rgb(112 93 226 / 30%);
    color: #fff;
    transform: translateY(-1px);
}

.portal-secondary-action {
    border: 1px solid var(--agnita-portal-border);
    background: rgb(255 255 255 / 2%);
    color: var(--agnita-portal-text);
}

.portal-secondary-action:hover {
    border-color: rgb(155 135 245 / 42%);
    background: rgb(112 93 226 / 9%);
    color: #fff;
}

.portal-feature-grid {
    display: grid;
    margin-top: 2.25rem;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-feature-card {
    position: relative;
    display: grid;
    min-height: 220px;
    align-content: space-between;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--agnita-portal-border);
    border-radius: var(--agnita-portal-radius);
    background: linear-gradient(145deg, rgb(27 38 55 / 96%), rgb(20 29 44 / 96%));
    box-shadow: 0 16px 42px rgb(2 6 23 / 15%);
    color: inherit;
    text-decoration: none;
    transition: 180ms ease;
    transition-property: border-color, box-shadow, transform;
}

.portal-feature-card::before {
    position: absolute;
    top: -80px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgb(112 93 226 / 7%);
    content: "";
}

.portal-feature-card--accent::before {
    background: rgb(112 93 226 / 17%);
}

.portal-feature-card:hover {
    border-color: rgb(155 135 245 / 40%);
    box-shadow: 0 22px 54px rgb(2 6 23 / 25%);
    color: inherit;
    transform: translateY(-3px);
}

.portal-feature-icon {
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(155 135 245 / 23%);
    border-radius: 12px;
    background: rgb(112 93 226 / 14%);
    color: #c3b7ff;
    place-items: center;
}

.portal-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.portal-feature-copy {
    display: grid;
    gap: 0.35rem;
}

.portal-feature-meta {
    color: var(--agnita-portal-link);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portal-feature-copy strong {
    color: var(--agnita-portal-text);
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.15rem;
}

.portal-feature-copy small {
    max-width: 24rem;
    color: var(--agnita-portal-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.portal-feature-arrow {
    position: absolute;
    top: 1.55rem;
    right: 1.55rem;
    color: #64748b;
    width: 0.9rem;
    height: 0.9rem;
}

.portal-next-step {
    display: grid;
    align-items: center;
    margin-top: 1rem;
    padding: 1.5rem;
    gap: 1.25rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: var(--agnita-portal-radius);
    background: rgb(21 30 45 / 68%);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-next-step-icon {
    display: grid;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(145deg, #806cf0, #5846c4);
    box-shadow: 0 12px 28px rgb(112 93 226 / 23%);
    color: #fff;
    place-items: center;
}

.portal-next-step-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.portal-next-step .portal-eyebrow {
    margin-bottom: 0.3rem;
}

.portal-next-step h2 {
    margin: 0;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.1rem;
}

.portal-next-step p:last-child {
    margin: 0.35rem 0 0;
    color: var(--agnita-portal-text-muted);
    font-size: 0.8rem;
}

.portal-welcome {
    display: grid;
    min-height: min(650px, calc(100vh - 12rem));
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.8fr);
}

.portal-welcome-copy {
    max-width: 650px;
}

.portal-welcome h1 {
    max-width: 720px;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
}

.portal-welcome-lead {
    max-width: 610px;
    margin: 1.5rem 0 0;
    color: var(--agnita-portal-text-muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.7;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.portal-text-link {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--agnita-portal-link);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.portal-text-link:hover {
    text-decoration: underline;
}

.portal-welcome-panel {
    position: relative;
    padding: 1.3rem;
    overflow: hidden;
    border: 1px solid rgb(155 135 245 / 20%);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgb(112 93 226 / 22%), transparent 16rem),
        linear-gradient(145deg, rgb(29 40 59 / 97%), rgb(18 27 42 / 97%));
    box-shadow: 0 35px 90px rgb(2 6 23 / 40%);
}

.portal-welcome-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.3rem 1.2rem;
    border-bottom: 1px solid var(--agnita-portal-border);
    color: #dce4ef;
    font-size: 0.77rem;
    font-weight: 700;
}

.portal-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ee6b8;
    box-shadow: 0 0 0 5px rgb(94 230 184 / 10%);
}

.portal-welcome-panel ul {
    display: grid;
    margin: 0;
    padding: 0.4rem 0 0;
    list-style: none;
}

.portal-welcome-panel li {
    display: grid;
    align-items: center;
    padding: 1.1rem 0.35rem;
    gap: 0.9rem;
    border-bottom: 1px solid rgb(41 53 72 / 72%);
    grid-template-columns: auto 1fr;
}

.portal-welcome-panel li:last-child {
    border-bottom: 0;
}

.portal-welcome-panel li > span {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgb(112 93 226 / 14%);
    color: #bcaeff;
    place-items: center;
}

.portal-welcome-panel li > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

.portal-welcome-panel li div {
    display: grid;
    gap: 0.2rem;
}

.portal-welcome-panel li strong {
    font-size: 0.86rem;
}

.portal-welcome-panel li small {
    color: var(--agnita-portal-text-muted);
    font-size: 0.74rem;
}

.portal-navigation-backdrop {
    display: none;
}

.customer-portal-billing-overview {
    padding: 2rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: var(--agnita-portal-radius);
    background: var(--agnita-portal-surface);
    box-shadow: var(--agnita-portal-shadow);
}

.jobfit-active-tariff {
    border-color: rgb(112 93 226 / 42%);
    background:
        radial-gradient(circle at 0 0, rgb(112 93 226 / 14%), transparent 20rem),
        rgb(255 255 255 / 2.8%);
    box-shadow: 0 18px 44px rgb(2 6 23 / 18%);
}

.jobfit-active-tariff .customer-portal-tariff-header {
    border-bottom-color: rgb(112 93 226 / 24%);
}

.jobfit-active-tariff-body {
    gap: 0.85rem;
}

.jobfit-active-tariff-metrics {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.jobfit-active-tariff-metric {
    display: flex;
    min-width: 0;
    min-height: 168px;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 12px;
    background: rgb(2 6 23 / 18%);
}

.jobfit-active-tariff-metric--balance {
    border-color: rgb(155 135 245 / 28%);
    background:
        linear-gradient(145deg, rgb(112 93 226 / 24%), rgb(112 93 226 / 8%)),
        rgb(2 6 23 / 16%);
}

.jobfit-active-tariff-metric--profiles {
    background:
        radial-gradient(circle at top right, rgba(43, 108, 176, 0.12), transparent 48%),
        var(--portal-surface);
}

.jobfit-active-tariff-metric-label {
    color: var(--agnita-portal-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jobfit-active-tariff-metric-value {
    display: flex;
    align-items: baseline;
    margin-top: 0.65rem;
    gap: 0.4rem;
    color: #fff;
    font-family: var(--agnita-portal-font-heading);
}

.jobfit-active-tariff-metric-value span {
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 750;
    line-height: 1;
}

.jobfit-active-tariff-metric-value small {
    color: #c8bcff;
    font-size: 0.9rem;
    font-weight: 800;
}

.jobfit-active-tariff-metric p {
    margin: auto 0 0;
    padding-top: 0.8rem;
    color: var(--agnita-portal-text-muted);
    font-size: 0.73rem;
    line-height: 1.45;
}

.jobfit-active-tariff-period {
    padding: 0.75rem 0.2rem 0;
    border-top: 1px solid var(--agnita-portal-border);
}

.jobfit-tariffs-tax-note {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--agnita-portal-border);
    color: var(--agnita-portal-text-muted);
    font-size: 0.75rem;
    text-align: right;
}

#blazor-error-ui {
    position: fixed;
    z-index: 100;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: none;
    padding: 1rem;
    border: 1px solid #fb7185;
    border-radius: 10px;
    background: #3f1523;
    color: #fecdd3;
}

@media (max-width: 1080px) {
    .portal-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-feature-card:last-child {
        grid-column: 1 / -1;
        min-height: 180px;
    }

    .portal-welcome {
        gap: 2.5rem;
    }
}

@media (max-width: 900px) {
    .portal-shell {
        display: block;
    }

    .portal-sidebar {
        position: fixed;
        left: 0;
        width: min(310px, calc(100vw - 3rem));
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .portal-shell--navigation-open .portal-sidebar {
        transform: translateX(0);
    }

    .portal-navigation-backdrop {
        position: fixed;
        z-index: 15;
        inset: 0 0 0 min(310px, calc(100vw - 3rem));
        display: block;
        border: 0;
        background: rgb(2 6 23 / 68%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    .portal-shell--navigation-open .portal-navigation-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .portal-menu-button {
        display: inline-grid;
    }

    .portal-topbar {
        justify-content: flex-start;
        gap: 0.9rem;
    }

    .portal-topbar-action {
        margin-left: auto;
    }

    .portal-topbar-tools {
        margin-left: auto;
    }

    .portal-welcome {
        min-height: auto;
        align-items: start;
        grid-template-columns: 1fr;
    }

    .portal-welcome-panel {
        width: min(620px, 100%);
    }
}

@media (max-width: 680px) {
    .portal-topbar {
        min-height: 64px;
        padding: 0 1rem;
    }

    .portal-topbar-copy small,
    .portal-topbar-action span,
    .portal-language-name,
    .portal-language-chevron {
        display: none;
    }

    .portal-topbar-tools {
        gap: 0.45rem;
    }

    .portal-language-trigger {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .portal-topbar-action {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .portal-content {
        width: min(100% - 2rem, 1240px);
        padding: 2.25rem 0 3.5rem;
    }

    .portal-page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
    }

    .portal-page-heading .portal-primary-action {
        width: 100%;
    }

    .portal-feature-grid {
        grid-template-columns: 1fr;
    }

    .portal-feature-card,
    .portal-feature-card:last-child {
        min-height: 190px;
        grid-column: auto;
    }

    .portal-next-step {
        align-items: start;
        grid-template-columns: auto 1fr;
    }

    .portal-next-step .portal-secondary-action {
        grid-column: 1 / -1;
    }

    .portal-welcome h1 {
        font-size: clamp(2.55rem, 14vw, 4.3rem);
    }

    .portal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .jobfit-active-tariff-metrics {
        grid-template-columns: 1fr;
    }

    .jobfit-active-tariff-metric {
        min-height: 148px;
    }

    .jobfit-tariffs-tax-note {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-sidebar,
    .portal-navigation-backdrop,
    .portal-navigation a,
    .portal-feature-card,
    .portal-primary-action,
    .portal-secondary-action {
        transition: none;
    }
}

/* JobFit account security */
.jobfit-security {
    display: grid;
    width: min(100%, 1380px);
    margin: 0 auto;
    gap: 1.75rem;
}

.jobfit-security-heading h1 {
    margin: 0;
    color: #f8f8fc;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 780;
    letter-spacing: -0.045em;
}

.jobfit-security-heading p {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    color: var(--agnita-portal-text-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.jobfit-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.jobfit-security-grid--single {
    grid-template-columns: minmax(0, 700px);
}

.jobfit-security-card {
    min-width: 0;
    padding: clamp(1.35rem, 2.7vw, 2rem);
    border: 1px solid rgb(66 79 104 / 55%);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgb(106 79 218 / 9%), transparent 21rem),
        linear-gradient(145deg, rgb(25 35 53 / 94%), rgb(17 26 42 / 96%));
    box-shadow: 0 24px 55px rgb(2 6 23 / 17%);
}

.jobfit-security-card__heading {
    margin-bottom: 1.55rem;
}

.jobfit-security-card__heading h2 {
    margin: 0;
    color: #f4f3f9;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.jobfit-security-card__heading p {
    margin: 0.38rem 0 0;
    color: var(--agnita-portal-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.jobfit-security-form,
.jobfit-security-field {
    display: grid;
}

.jobfit-security-form {
    gap: 1rem;
}

.jobfit-security-field {
    gap: 0.42rem;
}

.jobfit-security-field label {
    color: #e5e7ef;
    font-size: 0.78rem;
    font-weight: 680;
}

.jobfit-security-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.jobfit-security-field-icon,
.jobfit-security-visibility svg {
    width: 1rem;
    height: 1rem;
}

.jobfit-security-field-icon {
    position: absolute;
    z-index: 1;
    left: 0.9rem;
    color: #78859b;
    pointer-events: none;
}

.jobfit-security-input {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 2.9rem 0.7rem 2.65rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 9px;
    background: rgb(11 18 32 / 54%);
    color: var(--agnita-portal-text);
    caret-color: #c7baff;
    transition: 150ms ease;
    transition-property: background, border-color, box-shadow;
}

.jobfit-security-input:hover {
    border-color: rgb(93 108 139 / 72%);
}

.jobfit-security-input:focus {
    border-color: var(--agnita-portal-focus);
    outline: none;
    background: rgb(11 18 32 / 72%);
    color: var(--agnita-portal-text);
    box-shadow: 0 0 0 3px rgb(155 135 245 / 18%);
}

.jobfit-security-input:-webkit-autofill,
.jobfit-security-input:-webkit-autofill:hover,
.jobfit-security-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--agnita-portal-text);
    box-shadow: 0 0 0 1000px #10192a inset,
                0 0 0 3px rgb(155 135 245 / 18%);
    caret-color: var(--agnita-portal-text);
    transition: background-color 9999s ease-out;
}

.jobfit-security-visibility {
    position: absolute;
    right: 0.65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8290a7;
    cursor: pointer;
    place-items: center;
}

.jobfit-security-visibility:hover {
    background: rgb(255 255 255 / 5%);
    color: #d8dbea;
}

.jobfit-security-visibility:focus-visible,
.jobfit-security-primary-action:focus-visible,
.jobfit-security-secondary-action:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.jobfit-security-strength {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: #8e98ad;
    font-size: 0.74rem;
}

.jobfit-security-strength__segments {
    display: grid;
    width: 100%;
    gap: 0.3rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobfit-security-strength__segment {
    height: 3px;
    border-radius: 999px;
    background: #364257;
}

.jobfit-security-strength__segment--1,
.jobfit-security-strength__segment--2 {
    background: #d99c45;
}

.jobfit-security-strength__segment--3 {
    background: #c9b24c;
}

.jobfit-security-strength__segment--4 {
    background: #68d391;
}

.jobfit-security-strength strong {
    color: #d6b34b;
    font-weight: 700;
}

.jobfit-security-criteria p {
    margin: 0 0 0.45rem;
    color: #939db2;
    font-size: 0.75rem;
}

.jobfit-security-criteria ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.42rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.jobfit-security-criterion {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #7f899f;
    font-size: 0.72rem;
}

.jobfit-security-criterion svg {
    width: 0.9rem;
    height: 0.9rem;
    padding: 0.08rem;
    border: 1px solid #59657a;
    border-radius: 50%;
}

.jobfit-security-criterion--met {
    color: #9ee6b7;
}

.jobfit-security-criterion--met svg {
    border-color: #50b97a;
    color: #63d38c;
}

.jobfit-security-primary-action,
.jobfit-security-secondary-action {
    min-height: 46px;
    border-radius: 9px;
    font-weight: 730;
    cursor: pointer;
    transition: 150ms ease;
    transition-property: background, border-color, color, box-shadow, transform;
}

.jobfit-security-primary-action {
    width: 100%;
    margin-top: 0.15rem;
    border: 1px solid #8065ea;
    background: linear-gradient(105deg, #6546d5, #7957e1);
    color: #fff;
    box-shadow: 0 12px 26px rgb(72 43 174 / 24%);
}

.jobfit-security-primary-action:hover:not(:disabled) {
    box-shadow: 0 15px 32px rgb(72 43 174 / 34%);
    transform: translateY(-1px);
}

.jobfit-security-primary-action:disabled,
.jobfit-security-secondary-action:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.jobfit-security-secondary-action {
    padding: 0.7rem 1rem;
    border: 1px solid rgb(139 111 238 / 82%);
    background: rgb(92 62 191 / 7%);
    color: #a994ff;
}

.jobfit-security-secondary-action:hover:not(:disabled) {
    background: rgb(92 62 191 / 16%);
    color: #c0b1ff;
}

.jobfit-security-notice {
    padding: 0.85rem 1rem;
    border: 1px solid rgb(83 98 127 / 55%);
    border-radius: 10px;
    background: rgb(13 22 38 / 55%);
    color: #aeb7c8;
    font-size: 0.78rem;
    line-height: 1.5;
}

.jobfit-security-notice strong,
.jobfit-security-notice p {
    margin: 0;
}

.jobfit-security-notice p {
    margin-top: 0.25rem;
}

.jobfit-security-notice .jobfit-security-secondary-action {
    margin-top: 0.75rem;
}

.jobfit-security-notice--error {
    border-color: rgb(172 74 95 / 52%);
    background: rgb(92 31 51 / 18%);
    color: #f1b8c3;
}

.jobfit-security-notice--success {
    border-color: rgb(70 159 106 / 44%);
    background: rgb(25 93 53 / 17%);
    color: #a7e8bf;
}

.jobfit-security-sessions-card {
    display: flex;
    flex-direction: column;
}

.jobfit-security-session-loading {
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    color: var(--agnita-portal-text-muted);
    font-size: 0.82rem;
}

.jobfit-security-session-list {
    overflow: hidden;
    border: 1px solid rgb(66 79 104 / 58%);
    border-radius: 11px;
    background: rgb(11 18 32 / 31%);
}

.jobfit-security-session-row {
    display: grid;
    min-height: 78px;
    align-items: center;
    padding: 0.9rem 1rem;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-security-session-row + .jobfit-security-session-row {
    border-top: 1px solid rgb(66 79 104 / 48%);
}

.jobfit-security-session-icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    color: #b5a4fb;
    place-items: center;
}

.jobfit-security-session-icon::after {
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 7px;
    height: 7px;
    border: 2px solid #121d2e;
    border-radius: 50%;
    background: #57cf83;
    content: "";
}

.jobfit-security-session-icon svg {
    width: 1.55rem;
    height: 1.55rem;
}

.jobfit-security-session-copy {
    display: grid;
    justify-items: start;
    gap: 0.2rem;
}

.jobfit-security-session-copy strong {
    color: #e8e9f0;
    font-size: 0.82rem;
    font-weight: 660;
}

.jobfit-security-current {
    color: #65d78d;
    font-size: 0.69rem;
    font-weight: 650;
}

.jobfit-security-session-row time {
    color: #8f9ab0;
    font-size: 0.72rem;
    text-align: right;
}

.jobfit-security-revoke {
    width: 100%;
    margin-top: 1.1rem;
}

.jobfit-security-revoke-hint {
    margin: 0.55rem 0 0;
    color: #818ca1;
    font-size: 0.7rem;
    text-align: center;
}

@media (max-width: 900px) {
    .jobfit-security-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jobfit-security-grid--single {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .jobfit-security-card {
        padding: 1.1rem;
    }

    .jobfit-security-criteria ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .jobfit-security-session-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .jobfit-security-session-row time {
        grid-column: 2;
        text-align: left;
    }
}

.customer-portal-registration-success {
    display: grid;
    gap: 1rem;
}

.customer-portal-registration-success > p {
    margin: 0;
}

.customer-portal-registration-success__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.customer-portal-registration-success__heading p,
.customer-portal-registration-success__details p,
.customer-portal-registration-success__message {
    margin: 0;
}

.customer-portal-registration-success__heading p {
    margin-top: 0.3rem;
    color: var(--agnita-portal-text);
}

.customer-portal-registration-success__mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgb(110 231 183 / 16%);
    color: var(--agnita-portal-success);
    font-weight: 800;
    place-items: center;
}

.customer-portal-registration-success__details {
    display: grid;
    gap: 0.35rem;
    color: var(--agnita-portal-text-muted);
}

.customer-portal-registration-success__message {
    padding: 0.75rem 0.85rem;
    border-radius: 9px;
    background: rgb(110 231 183 / 10%);
    color: var(--agnita-portal-text);
}

.customer-portal-registration-success__message--error {
    background: var(--agnita-portal-danger-surface);
    color: var(--agnita-portal-danger);
}

.customer-portal-registration-success__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.customer-portal-registration-success__login,
.customer-portal-registration-success__resend {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font: 700 0.9rem/1.2 var(--agnita-portal-font-body);
    text-align: center;
    text-decoration: none;
}

.customer-portal-registration-success a.customer-portal-registration-success__login {
    border: 1px solid var(--agnita-portal-primary);
    background: var(--agnita-portal-primary);
    box-shadow: 0 10px 28px rgb(94 82 199 / 24%);
    color: #fff;
}

.customer-portal-registration-success__resend {
    border: 1px solid var(--agnita-portal-border);
    background: rgb(255 255 255 / 3%);
    color: var(--agnita-portal-text);
}

.customer-portal-registration-success__resend:hover:not(:disabled) {
    border-color: var(--agnita-portal-focus);
    background: rgb(134 104 232 / 10%);
}

.customer-portal-registration-success__resend:disabled {
    cursor: wait;
    opacity: 0.62;
}

@media (max-width: 640px) {
    .customer-portal-registration-success__actions {
        grid-template-columns: 1fr;
    }
}

/* JobFit overview — approved desktop composition */
.portal-shell {
    grid-template-columns: 272px minmax(0, 1fr);
}

.portal-sidebar {
    width: 272px;
    padding: 1.65rem 1rem 1rem;
    border-right-color: rgb(73 84 111 / 26%);
    background:
        radial-gradient(circle at -15% 0, rgb(69 61 179 / 13%), transparent 22rem),
        linear-gradient(180deg, rgb(9 17 34 / 99%), rgb(6 15 31 / 99%));
}

.portal-brand {
    min-height: 48px;
    gap: 1rem;
    padding: 0 0.85rem;
}

.portal-brand img {
    width: 32px;
    height: 32px;
}

.portal-brand-product {
    padding-left: 1rem;
    border-left-color: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 1.08rem;
}

.portal-navigation {
    gap: 0.42rem;
    margin-top: 2.25rem;
}

.portal-navigation-label {
    margin: 1.85rem 0 0.55rem;
    padding: 0 1rem;
    color: #6f7892;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
}

.portal-navigation a {
    min-height: 58px;
    gap: 1rem;
    padding: 0 1rem;
    border-radius: 12px;
    color: #c0c5d9;
    font-size: 0.92rem;
}

.portal-navigation a svg {
    width: 1.35rem;
    height: 1.35rem;
}

.portal-navigation a.active {
    border-color: rgb(149 119 255 / 12%);
    background: linear-gradient(105deg, #4736b4, #6543bd);
    box-shadow: 0 14px 35px rgb(40 26 122 / 28%);
}

.portal-sidebar-account {
    margin-top: 0;
    width: 100%;
    min-height: 100px;
    padding: 1.3rem 0.85rem 0.65rem;
    gap: 0.75rem;
    border: 0;
    border-top: 1px solid rgb(67 79 105 / 35%);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    anchor-name: --portal-sidebar-account-trigger;
}

.portal-sidebar-account-menu,
.portal-header-account-menu {
    position: relative;
}

.portal-sidebar-account-menu {
    margin-top: auto;
}

.portal-sidebar-footer {
    display: grid;
    margin-top: auto;
    padding-top: 1.2rem;
    gap: 0.8rem;
}

.portal-sidebar-footer .portal-sidebar-account-menu {
    margin-top: 0;
}

.portal-sidebar-account .portal-account-avatar {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #151e40;
    color: #d8d7ed;
}

.portal-account-copy strong {
    font-size: 0.86rem;
}

.portal-account-copy small {
    margin-top: 0.12rem;
    font-size: 0.73rem;
}

.portal-sidebar-account .portal-icon-button svg {
    width: 1rem;
    height: 1rem;
}

.portal-topbar {
    min-height: 96px;
    justify-content: flex-end;
    padding: 0 3.15rem;
    border-bottom: 0;
    background: transparent;
}

.portal-topbar-tools {
    margin-left: auto;
}

.portal-header-profile {
    display: inline-flex;
    min-width: 78px;
    min-height: 50px;
    align-items: center;
    justify-content: flex-end;
    gap: 1.05rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a4acc3;
    cursor: pointer;
    anchor-name: --portal-header-account-trigger;
}

.portal-header-profile-avatar {
    display: grid;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #5940bc, #3f2c96);
    box-shadow: 0 10px 26px rgb(38 26 111 / 32%);
    color: #f3efff;
    font-size: 1rem;
    font-weight: 750;
    place-items: center;
}

.portal-header-profile > svg {
    width: 1.05rem;
    height: 1.05rem;
}

.portal-header-profile:hover,
.portal-header-profile:focus-visible {
    color: #fff;
}

.portal-header-profile:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 4px;
    border-radius: 8px;
}

.portal-sidebar-account-menu:has(.portal-account-dropdown:popover-open) .portal-icon-button,
.portal-header-account-menu:has(.portal-account-dropdown:popover-open) .portal-header-profile {
    color: #fff;
}

.portal-sidebar-account-menu:has(.portal-account-dropdown:popover-open) .portal-icon-button svg,
.portal-header-account-menu:has(.portal-account-dropdown:popover-open) .portal-header-profile > svg {
    transform: rotate(180deg);
}

.portal-account-dropdown {
    position: fixed;
    inset: auto;
    z-index: 30;
    width: 240px;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid rgb(87 99 127 / 50%);
    border-radius: 10px;
    background: #111a30;
    box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
}

.portal-account-dropdown--sidebar {
    right: anchor(right);
    bottom: anchor(top);
    margin-bottom: 0.5rem;
    position-anchor: --portal-sidebar-account-trigger;
}

.portal-account-dropdown--header {
    top: anchor(bottom);
    right: anchor(right);
    margin-top: 0.35rem;
    position-anchor: --portal-header-account-trigger;
}

.portal-account-dropdown button,
.portal-account-dropdown a {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #c9cfe1;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.portal-account-dropdown button:hover,
.portal-account-dropdown button:focus-visible,
.portal-account-dropdown a:hover,
.portal-account-dropdown a:focus-visible {
    background: rgb(112 82 218 / 18%);
    color: #fff;
    outline: none;
}

.portal-account-dropdown button svg,
.portal-account-dropdown a svg {
    width: 1rem;
    height: 1rem;
}

.portal-account-dropdown-separator {
    display: block;
    height: 1px;
    margin: 0.35rem 0.4rem;
    background: rgb(87 99 127 / 38%);
}

.portal-tariff-menu {
    position: relative;
    min-width: 0;
}

.portal-tariff-trigger {
    display: grid;
    width: min(320px, calc(100vw - 6rem));
    min-height: 58px;
    align-items: center;
    padding: 0.45rem 0.75rem;
    gap: 0.75rem;
    border: 1px solid rgb(87 99 127 / 62%);
    border-radius: 15px;
    background: linear-gradient(145deg, rgb(21 30 48 / 96%), rgb(14 22 38 / 96%));
    box-shadow: 0 12px 32px rgb(2 6 23 / 20%);
    color: var(--agnita-portal-text);
    cursor: pointer;
    font: inherit;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    text-align: left;
    transition: 160ms ease;
    transition-property: background, border-color, box-shadow, transform;
    anchor-name: --portal-topbar-tariff-trigger;
}

.portal-tariff-trigger:hover,
.portal-tariff-trigger:focus-visible,
.portal-tariff-menu:has(.portal-tariff-popover:popover-open) .portal-tariff-trigger {
    border-color: rgb(155 135 245 / 58%);
    background: linear-gradient(145deg, rgb(31 37 67 / 98%), rgb(18 26 47 / 98%));
    box-shadow: 0 14px 38px rgb(35 24 102 / 28%);
}

.portal-tariff-trigger:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.portal-tariff-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid rgb(178 161 255 / 24%);
    border-radius: 11px;
    background: linear-gradient(145deg, #705de2, #4b35ac);
    box-shadow: 0 8px 20px rgb(45 29 127 / 34%);
    color: #fff;
    place-items: center;
}

.portal-tariff-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.portal-tariff-icon--large {
    width: 48px;
    height: 48px;
    border-radius: 13px;
}

.portal-tariff-icon--large svg {
    width: 1.45rem;
    height: 1.45rem;
}

.portal-tariff-trigger-name {
    overflow: hidden;
    color: #f7f6ff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-tariff-trigger-credits {
    display: grid;
    min-width: 76px;
    gap: 0.05rem;
    text-align: right;
}

.portal-tariff-trigger-credits strong {
    color: #f7f6ff;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.portal-tariff-trigger-credits small {
    color: var(--agnita-portal-text-muted);
    font-size: 0.68rem;
}

.portal-tariff-trigger-chevron {
    width: 1rem;
    height: 1rem;
    color: #a9b1c7;
    transition: transform 160ms ease;
}

.portal-tariff-menu:has(.portal-tariff-popover:popover-open) .portal-tariff-trigger-chevron {
    transform: rotate(180deg);
}

.portal-tariff-popover {
    position: fixed;
    inset: auto;
    z-index: 40;
    top: anchor(bottom);
    right: anchor(right);
    width: min(380px, calc(100vw - 2rem));
    margin: 0.55rem 0 0;
    padding: 1.25rem;
    border: 1px solid rgb(87 99 127 / 62%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0, rgb(112 93 226 / 17%), transparent 12rem),
        #111a30;
    box-shadow: 0 24px 60px rgb(0 0 0 / 42%);
    color: var(--agnita-portal-text);
    position-anchor: --portal-topbar-tariff-trigger;
}

.portal-tariff-popover::backdrop {
    background: transparent;
}

.portal-tariff-popover-label {
    display: block;
    color: #929bb4;
    font-size: 0.76rem;
    font-weight: 680;
}

.portal-tariff-popover-heading {
    display: grid;
    align-items: center;
    margin-top: 0.65rem;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-tariff-popover-heading h2 {
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.25rem;
    font-weight: 720;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-tariff-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.65rem;
    border: 1px solid rgb(74 222 128 / 24%);
    border-radius: 999px;
    background: rgb(34 197 94 / 10%);
    color: #8ce5aa;
    font-size: 0.72rem;
    font-weight: 740;
}

.portal-tariff-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46d77a;
    box-shadow: 0 0 0 3px rgb(70 215 122 / 12%);
}

.portal-tariff-credit-summary {
    margin-top: 1.25rem;
}

.portal-tariff-credit-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.portal-tariff-credit-summary span,
.portal-tariff-credit-summary strong {
    font-size: 0.9rem;
}

.portal-tariff-credit-summary strong {
    color: #f8f8ff;
    font-variant-numeric: tabular-nums;
}

.portal-tariff-progress {
    display: block;
    height: 8px;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #222e4d;
}

.portal-tariff-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #705de2, #9b87f5);
    box-shadow: 0 0 16px rgb(112 93 226 / 38%);
}

.portal-tariff-details {
    display: grid;
    margin: 1.25rem 0 0;
    padding: 1rem 0;
    gap: 0.75rem;
    border-top: 1px solid rgb(87 99 127 / 38%);
    border-bottom: 1px solid rgb(87 99 127 / 38%);
}

.portal-tariff-details > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portal-tariff-details dt {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    color: #aeb6ca;
    font-size: 0.82rem;
}

.portal-tariff-details dd {
    margin: 0;
    color: #f3f4fb;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    font-weight: 690;
    white-space: nowrap;
}

.portal-tariff-detail-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgb(155 135 245 / 20%);
    border-radius: 8px;
    background: rgb(112 93 226 / 12%);
    color: #b8a6ff;
    place-items: center;
}

.portal-tariff-detail-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.portal-tariff-next-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    gap: 0.25rem 1rem;
    border: 1px solid rgb(155 135 245 / 20%);
    border-radius: 10px;
    background: rgb(112 93 226 / 8%);
}

.portal-tariff-next-plan > span {
    grid-column: 1 / -1;
    color: #929db6;
    font-size: 0.74rem;
}

.portal-tariff-next-plan > strong {
    min-width: 0;
    overflow: hidden;
    color: #f3f4fb;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-tariff-next-plan > small {
    color: #b7c0d4;
    font-size: 0.76rem;
    white-space: nowrap;
}

.portal-tariff-all-link {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--agnita-portal-link);
    font-size: 0.82rem;
    font-weight: 680;
    text-decoration: none;
}

.portal-tariff-all-link:hover,
.portal-tariff-all-link:focus-visible {
    color: #d0c5ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portal-tariff-details-link {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 0.9rem;
    border: 1px solid rgb(155 135 245 / 28%);
    border-radius: 11px;
    background: rgb(112 93 226 / 10%);
    color: #ebe8ff;
    font-size: 0.84rem;
    font-weight: 720;
    text-decoration: none;
    transition: 150ms ease;
    transition-property: background, border-color;
}

.portal-tariff-details-link:hover,
.portal-tariff-details-link:focus-visible {
    border-color: rgb(155 135 245 / 48%);
    background: rgb(112 93 226 / 18%);
    outline: none;
}

.portal-tariff-details-link svg {
    width: 1rem;
    height: 1rem;
}

.portal-content {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1.65rem clamp(1.75rem, 2.75vw, 2.5rem) 3.7rem;
}

.jobfit-overview {
    width: 100%;
}

.jobfit-overview-heading h1 {
    margin: 0;
    color: #f8f8fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2.65rem, 3.4vw, 3.45rem);
    font-weight: 740;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.jobfit-overview-heading > p {
    margin: 0.75rem 0 0;
    color: #9ca4bd;
    font-size: 1.04rem;
    line-height: 1.5;
}

.jobfit-overview-metrics {
    display: grid;
    margin-top: 1.65rem;
    gap: 1.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jobfit-overview-metric {
    display: grid;
    min-width: 0;
    min-height: 143px;
    align-items: center;
    padding: 1.7rem 1.75rem;
    gap: 1.45rem;
    border: 1px solid rgb(76 89 117 / 34%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(17 26 46 / 76%), rgb(10 20 39 / 70%));
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-overview-metric-icon {
    display: grid;
    width: 68px;
    height: 68px;
    border: 1px solid rgb(105 77 222 / 20%);
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(79 57 183 / 45%), rgb(32 31 91 / 66%));
    color: #c9c3ff;
    place-items: center;
}

.jobfit-overview-metric-icon svg {
    width: 1.8rem;
    height: 1.8rem;
    stroke-width: 1.9;
}

.jobfit-overview-metric > div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.jobfit-overview-metric p {
    margin: 0 0 0.14rem;
    color: #8c95b0;
    font-size: 0.75rem;
    font-weight: 720;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.jobfit-overview-metric strong {
    overflow: hidden;
    color: #f7f6ff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.5rem;
    font-weight: 620;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jobfit-overview-metric small {
    color: #858da8;
    font-size: 0.84rem;
}

.jobfit-overview-status--active {
    color: #8d92aa;
}

.jobfit-overview-actions {
    display: grid;
    margin-top: 1.9rem;
    gap: 1.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jobfit-overview-action-card {
    display: grid;
    min-width: 0;
    min-height: 308px;
    padding: 1.85rem 1.75rem 1.65rem;
    gap: 1rem;
    border: 1px solid rgb(76 89 117 / 34%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(17 26 46 / 74%), rgb(10 20 39 / 66%));
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.jobfit-overview-action-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.jobfit-overview-action-icon,
.jobfit-overview-quick-icon {
    display: grid;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(145deg, #6549d0, #3e2b98);
    box-shadow: 0 12px 28px rgb(48 31 131 / 24%);
    color: #f3f0ff;
    place-items: center;
}

.jobfit-overview-action-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.jobfit-overview-action-chevron {
    width: 1rem;
    height: 1rem;
    margin-top: 0.4rem;
    color: #67718f;
}

.jobfit-overview-action-copy {
    align-self: end;
    padding-bottom: 0.55rem;
}

.jobfit-overview-action-copy h2 {
    margin: 0;
    color: #f5f5fb;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.23rem;
    font-weight: 650;
    letter-spacing: -0.025em;
}

.jobfit-overview-action-copy p {
    max-width: 21rem;
    min-height: 3rem;
    margin: 0.62rem 0 0;
    color: #858da8;
    font-size: 0.87rem;
    line-height: 1.55;
}

.jobfit-overview-action-card > a {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(90 103 133 / 58%);
    border-radius: 9px;
    color: #c9c8df;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: 160ms ease;
    transition-property: border-color, background, color, transform;
}

.jobfit-overview-action-card > a:hover {
    border-color: rgb(139 111 245 / 65%);
    background: rgb(102 70 210 / 10%);
    color: #fff;
    transform: translateY(-1px);
}

.jobfit-overview-action-card > a:focus-visible,
.jobfit-overview-quick > a:focus-visible,
.jobfit-extension-promo-copy > a:focus-visible,
.jobfit-overview-load-error button:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.jobfit-overview-quick {
    display: grid;
    min-height: 130px;
    align-items: center;
    margin-top: 1.65rem;
    padding: 1.25rem 2rem 1.25rem 1.8rem;
    gap: 1.35rem;
    border: 1px solid rgb(85 83 150 / 46%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 70% 50%, rgb(67 43 155 / 17%), transparent 29rem),
        linear-gradient(110deg, rgb(17 25 47 / 86%), rgb(15 22 47 / 72%));
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-overview-quick-icon {
    width: 64px;
    height: 64px;
}

.jobfit-overview-quick-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.jobfit-overview-quick p {
    margin: 0 0 0.22rem;
    color: #9278ef;
    font-size: 0.76rem;
    font-weight: 720;
}

.jobfit-overview-quick h2 {
    margin: 0;
    color: #f5f4fb;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.18rem;
    font-weight: 660;
}

.jobfit-overview-quick small {
    display: block;
    margin-top: 0.2rem;
    color: #929ab4;
    font-size: 0.85rem;
}

.jobfit-overview-quick > a {
    display: inline-flex;
    min-width: 262px;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1.5rem;
    border-radius: 12px;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    box-shadow: 0 14px 34px rgb(51 29 139 / 25%);
    color: #fff;
    font-size: 0.94rem;
    font-weight: 720;
    text-decoration: none;
}

.jobfit-overview-quick > a svg {
    width: 1rem;
    height: 1rem;
}

.jobfit-extension-promo {
    display: grid;
    overflow: hidden;
    min-height: 286px;
    align-items: center;
    margin-top: 1.65rem;
    padding: 38px 56px;
    gap: 24px;
    border: 1px solid rgb(132 99 255 / 68%);
    border-radius: 32px;
    background-color: #090d20;
    background-image:
        linear-gradient(90deg, rgb(7 10 25 / 98%) 0%, rgb(7 10 25 / 90%) 38%, rgb(7 10 25 / 18%) 100%),
        url("/extension-banner/backgrounds/extension-download-bg-desktop-v1.png");
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 48px rgb(0 0 0 / 28%);
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.jobfit-extension-promo-copy {
    min-width: 0;
    max-width: 610px;
}

.jobfit-extension-promo-kicker {
    display: inline-flex;
    padding: 5px 12px;
    border: 1px solid rgb(132 99 255 / 88%);
    border-radius: 999px;
    color: #baa9ff;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.jobfit-extension-promo-copy h2 {
    margin: 15px 0 13px;
    color: #f6f5ff;
    font-family: var(--agnita-portal-font-body);
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.06;
}

.jobfit-extension-promo-copy p {
    max-width: 560px;
    margin: 0;
    color: #b7b7d0;
    font-size: 20px;
    line-height: 1.46;
}

.jobfit-extension-promo-copy > a {
    display: inline-flex;
    min-width: 250px;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    padding: 13px 22px;
    gap: 16px;
    border-radius: 17px;
    background: linear-gradient(112deg, #5a3bd3, #8456e8);
    box-shadow: 0 12px 24px rgb(96 59 217 / 28%);
    color: #fff;
    font-size: 17px;
    font-weight: 760;
    text-decoration: none;
    transition: 150ms ease;
    transition-property: transform, filter;
}

.jobfit-extension-promo-copy > a:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.jobfit-extension-promo-copy > a svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.3;
}

.jobfit-extension-promo-visual {
    display: grid;
    min-width: 0;
    place-items: center;
}

.jobfit-extension-promo-browser {
    width: min(100%, 420px);
    overflow: hidden;
    border: 1px solid rgb(185 171 255 / 54%);
    border-radius: 28px;
    background: linear-gradient(135deg, rgb(34 29 83 / 92%), rgb(16 17 55 / 93%));
    box-shadow: 0 22px 44px rgb(0 0 0 / 36%), inset 0 1px rgb(255 255 255 / 10%);
}

.jobfit-extension-promo-browser-top {
    display: flex;
    height: 62px;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    border-bottom: 1px solid rgb(190 180 255 / 22%);
}

.jobfit-extension-promo-browser-dots {
    display: flex;
    gap: 8px;
}

.jobfit-extension-promo-browser-dots i {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.jobfit-extension-promo-browser-dots i:nth-child(1) {
    background: #e78a90;
}

.jobfit-extension-promo-browser-dots i:nth-child(2) {
    background: #eed37f;
}

.jobfit-extension-promo-browser-dots i:nth-child(3) {
    background: #88c88d;
}

.jobfit-extension-promo-browser-address {
    flex: 1;
    padding: 10px 18px;
    border: 1px solid rgb(179 163 255 / 17%);
    border-radius: 999px;
    color: #a7a1c6;
    font-size: 16px;
    text-align: center;
}

.jobfit-extension-promo-browser-menu {
    color: #b9b4d2;
    letter-spacing: 3px;
}

.jobfit-extension-promo-browser-icons {
    display: flex;
    justify-content: center;
    padding: 28px 22px 32px;
    gap: 16px;
}

.jobfit-extension-promo-browser-icons img {
    width: 48px;
    height: 48px;
    padding: 7px;
    border-radius: 50%;
    background: #f7f7fa;
    box-shadow: 0 8px 17px rgb(0 0 0 / 26%);
}

@media (max-width: 1000px) {
    .jobfit-extension-promo {
        padding: 0 24px 28px;
        gap: 8px;
        background-image:
            linear-gradient(180deg, rgb(7 10 25 / 16%), rgb(7 10 25 / 97%) 57%),
            url("/extension-banner/backgrounds/extension-download-bg-mobile-v1.png");
        grid-template-columns: 1fr;
    }

    .jobfit-extension-promo-visual {
        min-height: 210px;
        margin: 0 -24px 10px;
        padding: 28px 24px 0;
        order: -1;
    }

    .jobfit-extension-promo-browser {
        max-width: 390px;
    }

    .jobfit-extension-promo-copy h2 {
        font-size: 34px;
    }

    .jobfit-extension-promo-copy p {
        font-size: 18px;
    }

    .jobfit-extension-promo-copy > a {
        width: 100%;
        min-width: 0;
    }

    .jobfit-extension-promo-browser-icons {
        padding: 26px 12px 30px;
        gap: 11px;
    }

    .jobfit-extension-promo-browser-icons img {
        width: 43px;
        height: 43px;
        padding: 6px;
    }
}

@media (max-width: 430px) {
    .jobfit-extension-promo-browser-top {
        padding: 0 12px;
        gap: 8px;
    }

    .jobfit-extension-promo-browser-address {
        padding: 8px;
        font-size: 13px;
    }

    .jobfit-extension-promo-browser-icons {
        padding: 22px 9px 26px;
        gap: 7px;
    }

    .jobfit-extension-promo-browser-icons img {
        width: 35px;
        height: 35px;
        padding: 5px;
    }
}

.portal-sidebar-extension {
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    border: 1px solid rgb(132 99 255 / 58%);
    border-radius: 18px;
    background-color: #090d20;
    background-image:
        linear-gradient(180deg, rgb(8 11 28 / 12%), rgb(8 11 28 / 98%) 48%),
        url("/extension-banner/backgrounds/extension-download-bg-mobile-v1.png");
    background-position: center top;
    background-size: cover;
    box-shadow: 0 16px 32px rgb(0 0 0 / 24%);
}

.portal-sidebar-extension__visual {
    display: grid;
    min-height: 112px;
    margin: -14px -14px 0;
    padding: 14px 12px 5px;
    place-items: center;
}

.portal-sidebar-extension__browser {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgb(185 171 255 / 48%);
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(34 29 83 / 92%), rgb(16 17 55 / 94%));
    box-shadow: 0 12px 24px rgb(0 0 0 / 30%), inset 0 1px rgb(255 255 255 / 9%);
}

.portal-sidebar-extension__browser-top {
    display: flex;
    height: 32px;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
    border-bottom: 1px solid rgb(190 180 255 / 18%);
}

.portal-sidebar-extension__browser-dots {
    display: flex;
    gap: 3px;
}

.portal-sidebar-extension__browser-dots i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.portal-sidebar-extension__browser-dots i:nth-child(1) {
    background: #e78a90;
}

.portal-sidebar-extension__browser-dots i:nth-child(2) {
    background: #eed37f;
}

.portal-sidebar-extension__browser-dots i:nth-child(3) {
    background: #88c88d;
}

.portal-sidebar-extension__browser-address {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    padding: 4px 6px;
    border: 1px solid rgb(179 163 255 / 15%);
    border-radius: 999px;
    color: #a7a1c6;
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-sidebar-extension__browser-menu {
    color: #b9b4d2;
    font-size: 8px;
    letter-spacing: 1px;
}

.portal-sidebar-extension__browser-icons {
    display: flex;
    justify-content: center;
    padding: 11px 7px 13px;
    gap: 5px;
}

.portal-sidebar-extension__browser-icon {
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: 50%;
    background: #f7f7fa;
    box-shadow: 0 5px 10px rgb(0 0 0 / 24%);
}

.portal-sidebar-extension__copy {
    min-width: 0;
}

.portal-sidebar-extension__kicker {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid rgb(132 99 255 / 78%);
    border-radius: 999px;
    color: #baa9ff;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.portal-sidebar-extension__copy h2 {
    margin: 8px 0 6px;
    color: #f6f5ff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 18px;
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.portal-sidebar-extension__copy p {
    margin: 0;
    color: #b7b7d0;
    font-size: 12px;
    line-height: 1.42;
}

.portal-sidebar-extension__action {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    gap: 8px;
    border-radius: 11px;
    background: linear-gradient(112deg, #5a3bd3, #8456e8);
    box-shadow: 0 8px 18px rgb(96 59 217 / 24%);
    color: #fff;
    font-size: 12px;
    font-weight: 740;
    text-align: center;
    text-decoration: none;
    transition: 150ms ease;
    transition-property: filter, transform;
}

.portal-sidebar-extension__action:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.portal-sidebar-extension__action:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 2px;
}

.portal-sidebar-extension__action svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.jobfit-overview-no-tariff {
    display: grid;
    min-height: 143px;
    align-items: center;
    margin-top: 1.65rem;
    padding: 1.45rem 1.75rem;
    gap: 1.25rem;
    border: 1px solid rgb(111 91 196 / 42%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 75% 50%, rgb(89 58 190 / 15%), transparent 28rem),
        linear-gradient(145deg, rgb(17 26 46 / 78%), rgb(12 20 39 / 72%));
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-overview-no-tariff-icon {
    display: grid;
    width: 64px;
    height: 64px;
    border: 1px solid rgb(105 77 222 / 22%);
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(79 57 183 / 45%), rgb(32 31 91 / 66%));
    color: #c9c3ff;
    place-items: center;
}

.jobfit-overview-no-tariff-icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

.jobfit-overview-no-tariff h2 {
    margin: 0;
    color: #f5f4fb;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.18rem;
    font-weight: 660;
}

.jobfit-overview-no-tariff p {
    margin: 0.42rem 0 0;
    color: #929ab4;
    font-size: 0.86rem;
    line-height: 1.5;
}

.jobfit-overview-no-tariff > a {
    display: inline-flex;
    min-width: 180px;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    border-radius: 10px;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    box-shadow: 0 12px 30px rgb(51 29 139 / 22%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 720;
    text-decoration: none;
}

.jobfit-overview-no-tariff > a:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.jobfit-overview-load-error {
    display: grid;
    min-height: 143px;
    align-items: center;
    margin-top: 1.65rem;
    padding: 1.4rem 1.75rem;
    gap: 1rem;
    border: 1px solid rgb(251 113 133 / 30%);
    border-radius: 14px;
    background: rgb(63 21 35 / 30%);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-overview-load-error-icon {
    display: grid;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(251 113 133 / 12%);
    color: #fda4af;
    place-items: center;
}

.jobfit-overview-load-error-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.jobfit-overview-load-error strong {
    color: #fff1f2;
}

.jobfit-overview-load-error p {
    margin: 0.3rem 0 0;
    color: #c4a6af;
    font-size: 0.82rem;
}

.jobfit-overview-load-error button {
    min-height: 46px;
    padding: 0 1.15rem;
    border: 1px solid rgb(251 113 133 / 38%);
    border-radius: 9px;
    background: transparent;
    color: #ffe4e6;
    cursor: pointer;
    font-weight: 700;
}

.jobfit-overview-metric--loading {
    overflow: hidden;
}

.jobfit-overview-skeleton-group {
    display: grid;
    gap: 0.55rem;
}

.jobfit-overview-skeleton {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, #17213a 20%, #222d48 50%, #17213a 80%);
    background-size: 220% 100%;
    animation: jobfit-overview-shimmer 1.3s ease-in-out infinite;
}

.jobfit-overview-skeleton--icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
}

.jobfit-overview-skeleton--label {
    width: 72%;
    height: 10px;
}

.jobfit-overview-skeleton--value {
    width: 88%;
    height: 24px;
}

.jobfit-overview-skeleton--hint {
    width: 52%;
    height: 10px;
}

@keyframes jobfit-overview-shimmer {
    to {
        background-position: -220% 0;
    }
}

@media (max-width: 1220px) {
    .portal-content {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .jobfit-overview-metrics,
    .jobfit-overview-actions {
        gap: 1rem;
    }

    .jobfit-overview-metric {
        padding: 1.3rem;
        gap: 1rem;
    }

    .jobfit-overview-metric-icon {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 1000px) {
    .jobfit-overview-metrics,
    .jobfit-overview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobfit-overview-metric:last-child,
    .jobfit-overview-action-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .portal-sidebar {
        width: min(310px, calc(100vw - 3rem));
    }

    .portal-topbar {
        min-height: 78px;
        padding: 0 1.25rem;
        justify-content: flex-start;
    }

    .portal-content {
        padding-top: 1.5rem;
    }
}

@media (max-width: 680px) {
    .portal-content {
        width: auto;
        padding: 1.1rem 1rem 2.5rem;
    }

    .portal-tariff-trigger {
        width: min(280px, calc(100vw - 5.25rem));
        min-height: 52px;
        padding: 0.35rem 0.55rem;
        gap: 0.55rem;
    }

    .portal-tariff-icon {
        width: 36px;
        height: 36px;
    }

    .portal-tariff-trigger-name {
        font-size: 0.86rem;
    }

    .portal-tariff-trigger-credits strong {
        font-size: 0.8rem;
    }

    .portal-tariff-trigger-credits small {
        display: none;
    }

    .portal-tariff-popover {
        width: calc(100vw - 2rem);
        padding: 1rem;
    }

    .portal-header-profile {
        min-width: 68px;
    }

    .portal-header-profile-avatar {
        width: 42px;
        height: 42px;
    }

    .jobfit-overview-heading h1 {
        font-size: clamp(2.25rem, 12vw, 3rem);
    }

    .jobfit-overview-heading > p {
        font-size: 0.94rem;
    }

    .jobfit-overview-metrics,
    .jobfit-overview-actions {
        grid-template-columns: 1fr;
    }

    .jobfit-overview-metric:last-child,
    .jobfit-overview-action-card:last-child {
        grid-column: auto;
    }

    .jobfit-overview-action-card {
        min-height: 285px;
    }

    .jobfit-overview-quick,
    .jobfit-overview-no-tariff,
    .jobfit-overview-load-error {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .jobfit-overview-quick > a,
    .jobfit-overview-no-tariff > a,
    .jobfit-overview-load-error button {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

}

@media (prefers-reduced-motion: reduce) {
    .jobfit-overview-skeleton {
        animation: none;
    }

    .jobfit-overview-action-card > a {
        transition: none;
    }
}

/* JobFit support */
.jobfit-support {
    width: 100%;
    max-width: 1120px;
}

.jobfit-support-heading h1 {
    margin: 0;
    color: #f8f8fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2.65rem, 3.4vw, 3.45rem);
    font-weight: 740;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.jobfit-support-heading p {
    max-width: 46rem;
    margin: 0.75rem 0 0;
    color: #9ca4bd;
    font-size: 1.04rem;
    line-height: 1.5;
}

.jobfit-support-contacts {
    display: grid;
    margin-top: 2rem;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobfit-support-card {
    display: grid;
    min-width: 0;
    min-height: 344px;
    padding: 1.85rem;
    gap: 1.25rem;
    border: 1px solid rgb(76 89 117 / 42%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgb(91 62 190 / 14%), transparent 19rem),
        linear-gradient(145deg, rgb(17 26 46 / 82%), rgb(10 20 39 / 74%));
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.jobfit-support-card-icon,
.jobfit-support-response-icon {
    display: grid;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(145deg, #6549d0, #3e2b98);
    box-shadow: 0 12px 28px rgb(48 31 131 / 24%);
    color: #f3f0ff;
    place-items: center;
}

.jobfit-support-card-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

.jobfit-support-card-copy {
    align-self: end;
}

.jobfit-support-card-label {
    margin: 0 0 0.45rem !important;
    color: #9c84f2 !important;
    font-size: 0.76rem !important;
    font-weight: 740;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jobfit-support-card-copy h2 {
    margin: 0;
    color: #f5f5fb;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.45rem;
    font-weight: 670;
    letter-spacing: -0.025em;
}

.jobfit-support-card-copy > p:not(.jobfit-support-card-label) {
    max-width: 27rem;
    margin: 0.65rem 0 0;
    color: #858da8;
    font-size: 0.9rem;
    line-height: 1.55;
}

.jobfit-support-contact {
    display: inline-block;
    margin-top: 1rem;
    color: #b9a8ff;
    font-size: 0.96rem;
    font-weight: 680;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.jobfit-support-contact:hover {
    color: #ddd5ff;
    text-decoration: underline;
    text-underline-offset: 0.22rem;
}

.jobfit-support-action {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0 1.25rem;
    border: 1px solid rgb(126 96 232 / 72%);
    border-radius: 10px;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    box-shadow: 0 12px 30px rgb(51 29 139 / 22%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 720;
    text-decoration: none;
    transition: 160ms ease;
    transition-property: filter, transform;
}

.jobfit-support-action svg {
    width: 1rem;
    height: 1rem;
}

.jobfit-support-action:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.jobfit-support-contact:focus-visible,
.jobfit-support-action:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.jobfit-support-response {
    display: grid;
    min-height: 112px;
    align-items: center;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    gap: 1.1rem;
    border: 1px solid rgb(85 83 150 / 46%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 70% 50%, rgb(67 43 155 / 15%), transparent 28rem),
        linear-gradient(110deg, rgb(17 25 47 / 86%), rgb(15 22 47 / 72%));
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-support-response-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

.jobfit-support-response-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.jobfit-support-response strong {
    color: #f5f4fb;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.05rem;
    font-weight: 670;
}

.jobfit-support-response p {
    margin: 0.25rem 0 0;
    color: #929ab4;
    font-size: 0.87rem;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .jobfit-support-contacts {
        grid-template-columns: 1fr;
    }

    .jobfit-support-heading h1 {
        font-size: clamp(2.25rem, 12vw, 3rem);
    }

    .jobfit-support-heading p {
        font-size: 0.94rem;
    }
}

@media (max-width: 520px) {
    .jobfit-support-card {
        min-height: 320px;
        padding: 1.4rem;
    }

    .jobfit-support-response {
        align-items: start;
        padding: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jobfit-support-action {
        transition: none;
    }
}

/* JobFit billing workspace */
.customer-portal-billing-workspace {
    width: 100%;
}

.customer-portal-billing-heading {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.45rem;
}

.customer-portal-billing-heading__copy {
    flex: 1 1 28rem;
    min-width: 0;
}

.customer-portal-billing-heading h1,
.jobfit-purchase-heading h1 {
    margin: 0;
    color: #f8f8fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2.25rem, 3vw, 3.1rem);
    font-weight: 740;
    letter-spacing: -0.045em;
    line-height: 1.06;
}

.customer-portal-billing-heading__copy > p:last-child,
.jobfit-purchase-heading > p:last-child {
    max-width: 52rem;
    margin: 0.65rem 0 0;
    color: #929ab4;
    font-size: 0.96rem;
    line-height: 1.55;
}

.customer-portal-eyebrow {
    margin: 0 0 0.6rem;
    color: #a78bfa;
    font-size: 0.73rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.customer-portal-billing-tabs {
    display: flex;
    min-height: 0;
    align-items: stretch;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(76 89 117 / 38%);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-portal-billing-tab {
    position: relative;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding: 0 0 0.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #858ea9;
    font-size: 0.88rem;
    font-weight: 690;
    text-decoration: none;
    transition: color 150ms ease;
}

.customer-portal-billing-tab::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: #8063e7;
    content: "";
    opacity: 0;
    transform: scaleX(0.6);
    transition: 150ms ease;
    transition-property: opacity, transform;
}

.customer-portal-billing-tab:hover,
.customer-portal-billing-tab--active {
    background: transparent;
    color: #f4f2ff;
}

.customer-portal-billing-tab--active::after {
    opacity: 1;
    transform: scaleX(1);
}

.customer-portal-billing-tab:focus-visible,
.jobfit-period-filter__option:focus-visible,
.jobfit-tariff-rail__navigation:focus-visible,
.jobfit-tariff-card__action:focus-visible,
.jobfit-purchase-back:focus-visible,
.jobfit-promo-control__action:focus-visible,
.jobfit-purchase-submit:focus-visible,
.jobfit-promo-control input:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.customer-portal-billing-panel,
.customer-portal-billing-overview {
    min-width: 0;
}

.jobfit-credit-usage {
    display: grid;
    align-items: start;
    margin: 0 0 1.35rem;
    padding: 1rem 1.1rem;
    gap: 0.9rem;
    border: 1px solid rgb(126 105 220 / 34%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(39 31 83 / 54%), rgb(13 23 42 / 88%));
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-credit-usage__icon {
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgb(119 86 224 / 18%);
    color: #b6a5f8;
    place-items: center;
}

.jobfit-credit-usage__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jobfit-credit-usage strong {
    color: #f4f1ff;
    font-size: 0.9rem;
}

.jobfit-credit-usage p {
    margin: 0.3rem 0 0;
    color: #afb5ca;
    font-size: 0.84rem;
    line-height: 1.5;
}

.customer-portal-payment-history {
    min-width: 0;
    padding: 1.6rem;
    border: 1px solid rgb(76 89 117 / 40%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgb(92 61 193 / 10%), transparent 24rem),
        linear-gradient(145deg, rgb(17 26 46 / 88%), rgb(10 20 39 / 82%));
    box-shadow: 0 18px 44px rgb(2 6 23 / 16%);
}

.customer-portal-payment-history h2 {
    margin: 0 0 1.3rem;
    color: #f7f6fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.customer-portal-payment-history .table-responsive {
    overflow: hidden;
    border: 1px solid rgb(76 89 117 / 42%);
    border-radius: 12px;
    background: rgb(8 17 33 / 70%);
}

.customer-portal-payment-history .table {
    --bs-table-bg: transparent;
    --bs-table-color: #d9ddea;
    --bs-table-border-color: rgb(76 89 117 / 34%);
    --bs-table-hover-bg: rgb(112 93 226 / 9%);
    --bs-table-hover-color: #f5f4fb;
    width: 100%;
    min-width: 760px;
    margin: 0;
    color: #d9ddea;
    background: transparent;
    border-color: rgb(76 89 117 / 34%);
}

.customer-portal-payment-history .table > :not(caption) > * > * {
    padding: 1rem 1.1rem;
    border-bottom-color: rgb(76 89 117 / 34%);
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.customer-portal-payment-history .table thead th {
    color: #929bb4;
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.customer-portal-payment-history .table tbody tr {
    transition: background 150ms ease;
}

.customer-portal-payment-history .table tbody tr:hover {
    background: rgb(112 93 226 / 9%);
}

.customer-portal-payment-history .table tbody tr:last-child > * {
    border-bottom: 0;
}

.customer-portal-payment-history .table a {
    color: #ad9aff;
    text-decoration-color: rgb(173 154 255 / 50%);
    text-underline-offset: 0.18em;
}

.customer-portal-payment-history .table a:hover {
    color: #d4caff;
}

.customer-portal-billing-overview {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-portal-billing-state,
.customer-portal-billing-loading {
    display: flex;
    min-height: 160px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.5rem;
    border: 1px solid rgb(76 89 117 / 38%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(17 26 46 / 72%), rgb(10 20 39 / 64%));
    color: #9da5bd;
    text-align: center;
}

.customer-portal-billing-state {
    flex-direction: column;
}

.customer-portal-billing-state strong {
    color: #f5f4fb;
}

.jobfit-tariff-activation-notice {
    display: grid;
    min-height: 136px;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgb(137 114 238 / 44%);
    border-radius: 16px;
    background: linear-gradient(135deg, rgb(55 37 112 / 38%), rgb(13 24 45 / 94%));
    grid-template-columns: auto minmax(0, 1fr);
}

.customer-portal-billing-panel > .jobfit-tariff-activation-notice {
    margin-bottom: 1.25rem;
}

.jobfit-tariff-activation-notice .customer-portal-spinner {
    width: 2.25rem;
    height: 2.25rem;
}

.jobfit-tariff-activation-notice strong {
    color: #f7f6fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.05rem;
}

.jobfit-tariff-activation-notice p {
    max-width: 46rem;
    margin: 0.35rem 0 0;
    color: #b7bdd0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.customer-portal-status-section,
.customer-portal-registration .alert,
.customer-portal-password-recovery .alert,
.customer-portal-password-change .alert,
.customer-portal-invite .alert,
.customer-portal-billing-error .alert {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgb(126 139 166 / 34%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(19 29 49 / 96%), rgb(12 21 39 / 94%));
    box-shadow: 0 16px 36px rgb(2 6 23 / 14%);
    color: #c9d0df;
}

.customer-portal-status-section strong {
    color: #f7f6fd;
}

.customer-portal-status-section p {
    margin: 0;
}

.customer-portal-status-section--warning,
.customer-portal-registration .alert-warning,
.customer-portal-password-recovery .alert-warning,
.customer-portal-password-change .alert-warning,
.customer-portal-invite .alert-warning {
    border-color: rgb(217 169 80 / 34%);
    background: linear-gradient(145deg, rgb(47 38 27 / 88%), rgb(18 24 39 / 96%));
    color: #e7d5b3;
}

.customer-portal-status-section--error,
.customer-portal-registration .alert-danger,
.customer-portal-password-recovery .alert-danger,
.customer-portal-password-change .alert-danger,
.customer-portal-billing-error .alert-danger {
    border-color: rgb(218 101 125 / 38%);
    background: linear-gradient(145deg, rgb(48 27 40 / 88%), rgb(18 22 38 / 96%));
    color: #efc4cf;
}

.customer-portal-registration .alert-success,
.customer-portal-password-recovery .alert-success,
.customer-portal-password-change .alert-success,
.customer-portal-invite .alert-success {
    border-color: rgb(83 188 142 / 36%);
    background: linear-gradient(145deg, rgb(22 47 43 / 88%), rgb(17 25 40 / 96%));
    color: #bce5d1;
}

.jobfit-plan-summary {
    display: grid;
    min-width: 0;
    min-height: 230px;
    align-items: stretch;
    padding: 2rem 2.2rem;
    border: 1px solid rgb(76 89 117 / 38%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 84% 22%, rgb(93 61 198 / 12%), transparent 27rem),
        linear-gradient(145deg, rgb(17 26 46 / 82%), rgb(10 20 39 / 72%));
    box-shadow: 0 18px 45px rgb(2 6 23 / 16%);
    grid-template-columns: minmax(235px, 1.15fr) minmax(0, 3fr);
}

.jobfit-plan-summary__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 2rem;
    border-right: 1px solid rgb(76 89 117 / 30%);
}

.jobfit-plan-summary__identity h3 {
    overflow-wrap: anywhere;
    margin: 0 0 0.8rem;
    color: #f8f7fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.25rem);
    font-weight: 680;
    letter-spacing: -0.035em;
}

.customer-portal-status-badge {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 760;
}

.customer-portal-status-badge--active {
    border: 1px solid rgb(34 197 94 / 28%);
    background: rgb(22 163 74 / 15%);
    color: #70e19b;
}

.jobfit-plan-summary__metrics {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.jobfit-plan-summary__metric {
    display: grid;
    min-width: 0;
    min-height: 125px;
    align-items: center;
    padding: 0 1.65rem;
    gap: 1rem;
    border-right: 1px solid rgb(76 89 117 / 30%);
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-plan-summary__metric:last-child {
    border-right: 0;
}

.jobfit-plan-summary__icon {
    display: grid;
    width: 58px;
    height: 58px;
    border: 1px solid rgb(105 77 222 / 20%);
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(79 57 183 / 43%), rgb(32 31 91 / 62%));
    color: #c8bdff;
    font-size: 1.35rem;
    place-items: center;
}

.jobfit-plan-summary__metric > div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.jobfit-plan-summary__label,
.jobfit-plan-summary__metric span:not(.jobfit-plan-summary__icon) {
    color: #9ba3bc;
    font-size: 0.78rem;
    font-weight: 670;
}

.jobfit-plan-summary__metric strong {
    overflow-wrap: anywhere;
    color: #f8f7fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(1.65rem, 2.2vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.jobfit-plan-summary__metric small {
    color: #858ea9;
    font-size: 0.78rem;
}

.jobfit-tariff-catalog {
    min-width: 0;
    container-type: inline-size;
}

.jobfit-purchase-access {
    margin: 0 0 1.4rem;
}

.jobfit-purchase-access:empty {
    display: none;
    margin: 0;
}

.jobfit-purchase-access-panel {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgb(119 134 164 / 32%);
    border-radius: 14px;
    background: linear-gradient(145deg, rgb(17 27 47 / 94%), rgb(11 20 38 / 92%));
    box-shadow: 0 16px 40px rgb(2 6 23 / 15%);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-purchase-access-panel--info {
    border-color: rgb(126 105 220 / 34%);
    background: linear-gradient(145deg, rgb(39 31 83 / 54%), rgb(13 23 42 / 88%));
}

.jobfit-purchase-access-panel--warning {
    border-color: rgb(217 169 80 / 34%);
    background: linear-gradient(145deg, rgb(46 37 27 / 82%), rgb(13 22 40 / 94%));
}

.jobfit-purchase-access-panel--error {
    border-color: rgb(218 101 125 / 38%);
    background: linear-gradient(145deg, rgb(47 27 40 / 84%), rgb(14 21 39 / 94%));
}

.jobfit-purchase-access-panel__icon {
    display: grid;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(155 135 245 / 24%);
    border-radius: 12px;
    background: rgb(112 93 226 / 14%);
    color: #b9aaff;
    place-items: center;
}

.jobfit-purchase-access-panel__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jobfit-purchase-access-panel__content {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.jobfit-purchase-access-panel__content strong {
    color: #f7f6fd;
    font-size: 0.95rem;
}

.jobfit-purchase-access-panel__content p,
.jobfit-purchase-access-panel__content small {
    margin: 0;
    color: #a8b0c5;
    font-size: 0.84rem;
}

.jobfit-purchase-access-panel__form {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.jobfit-purchase-access-panel__form label {
    color: #c6cddd;
    font-size: 0.78rem;
    font-weight: 680;
}

.jobfit-purchase-access-panel__controls {
    display: flex;
    max-width: 560px;
    gap: 0.65rem;
}

.jobfit-purchase-access-panel__controls input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgb(105 120 150 / 48%);
    border-radius: 10px;
    outline: 0;
    background: rgb(7 15 30 / 72%);
    color: #f7f6fd;
}

.jobfit-purchase-access-panel__controls button,
.jobfit-purchase-access-panel__retry {
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid rgb(139 119 234 / 58%);
    border-radius: 10px;
    background: rgb(112 93 226 / 18%);
    color: #eeeaff;
    font-weight: 720;
}

.jobfit-purchase-access-panel__controls button:disabled,
.jobfit-purchase-access-panel__retry:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.jobfit-purchase-access-panel__controls input:focus-visible,
.jobfit-purchase-access-panel__controls button:focus-visible,
.jobfit-purchase-access-panel__retry:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 2px;
}

.jobfit-tariff-catalog__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.jobfit-tariff-catalog__heading h2 {
    margin: 0;
    color: #f7f6fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.45rem;
    letter-spacing: -0.025em;
}

.jobfit-tariff-catalog__heading > div > p:last-child {
    margin: 0.45rem 0 0;
    color: #8e97b1;
    font-size: 0.86rem;
}

.jobfit-period-filter {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 1.1rem 0 1.5rem;
    color: #c5c7d5;
    font-size: 0.88rem;
    font-weight: 670;
}

.jobfit-period-filter__options {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    padding: 3px;
    border: 1px solid rgb(76 89 117 / 45%);
    border-radius: 11px;
    background: rgb(10 18 35 / 52%);
}

.jobfit-period-filter__option {
    min-width: 116px;
    min-height: 46px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a5acc0;
    cursor: pointer;
    font-weight: 690;
}

.jobfit-period-filter__option--active {
    background: linear-gradient(145deg, rgb(82 61 167 / 44%), rgb(39 35 92 / 58%));
    box-shadow: inset 0 0 0 1px rgb(130 103 228 / 28%);
    color: #e1dcff;
}

.jobfit-tariff-grid {
    display: grid;
    align-items: stretch;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jobfit-tariff-grid:has(> :only-child) {
    max-width: 34rem;
    grid-template-columns: 1fr;
}

.jobfit-tariff-grid:has(> :nth-child(2):last-child) {
    max-width: 66rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (max-width: 780px) {
    .jobfit-tariff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 560px) {
    .jobfit-tariff-grid,
    .jobfit-tariff-grid:has(> :nth-child(2):last-child) {
        max-width: 34rem;
        grid-template-columns: 1fr;
    }
}

.jobfit-tariff-rail {
    min-width: 0;
}

.jobfit-tariff-rail__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.jobfit-tariff-rail__navigation {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgb(104 115 151 / 58%);
    border-radius: 50%;
    background: rgb(18 27 47 / 88%);
    color: #eeecff;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    place-items: center;
}

.jobfit-tariff-rail__navigation:hover:not(:disabled) {
    border-color: rgb(174 149 255 / 78%);
    background: rgb(92 61 193 / 34%);
}

.jobfit-tariff-rail__navigation:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.jobfit-tariff-rail__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: rgb(118 98 188 / 52%) transparent;
    scrollbar-width: thin;
}

.jobfit-tariff-rail__track {
    display: flex;
    gap: 1.4rem;
}

.jobfit-tariff-rail__item {
    flex: 0 0 calc((100% - 2.8rem) / 3);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.jobfit-tariff-rail__item > .jobfit-tariff-card {
    height: 100%;
}

.jobfit-tariff-card {
    display: grid;
    min-width: 0;
    min-height: 390px;
    padding: 1.85rem;
    border: 1px solid rgb(76 89 117 / 46%);
    border-radius: 12px;
    background:
        radial-gradient(circle at 90% 4%, rgb(92 61 193 / 10%), transparent 18rem),
        linear-gradient(145deg, rgb(18 27 47 / 92%), rgb(10 20 38 / 86%));
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    transition: 170ms ease;
    transition-property: border-color, transform, box-shadow;
}

.jobfit-tariff-card:hover {
    border-color: rgb(128 99 231 / 52%);
    box-shadow: 0 16px 38px rgb(2 6 23 / 18%);
    transform: translateY(-1px);
}

.jobfit-tariff-rail__item > .jobfit-tariff-card:hover {
    transform: none;
}

.jobfit-tariff-card--unavailable {
    opacity: 0.68;
}

.jobfit-tariff-card--unavailable:hover {
    border-color: rgb(76 89 117 / 40%);
    box-shadow: none;
    transform: none;
}

.jobfit-tariff-card__header h3,
.jobfit-purchase-plan h2,
.jobfit-order-summary h2 {
    overflow-wrap: anywhere;
    margin: 0;
    color: #f8f7fd;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.35rem;
    font-weight: 670;
    letter-spacing: -0.025em;
}

.jobfit-purchase-plan > p:not(.customer-portal-eyebrow) {
    min-height: 2.8rem;
    margin: 0.65rem 0 0;
    color: #959db5;
    font-size: 0.86rem;
    line-height: 1.55;
}

.jobfit-tariff-card__price {
    display: flex;
    align-items: baseline;
    margin: 1.75rem 0 1.6rem;
    gap: 0.5rem;
}

.jobfit-tariff-card__price strong {
    color: #fff;
    font-family: var(--agnita-portal-font-heading);
    font-size: clamp(2.3rem, 3.3vw, 3rem);
    font-weight: 640;
    letter-spacing: -0.05em;
    line-height: 1;
}

.jobfit-tariff-card__price span {
    color: #b5b7c8;
    font-size: 0.95rem;
    font-weight: 650;
}

.jobfit-tariff-card__services,
.jobfit-purchase-plan__services {
    display: grid;
    align-content: start;
    margin: 0;
    padding: 0;
    gap: 1rem;
    list-style: none;
}

.jobfit-tariff-card__services li,
.jobfit-purchase-plan__services li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    color: #aeb4c6;
    font-size: 0.87rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.jobfit-tariff-card__services {
    padding-top: 1.35rem;
    border-top: 1px solid rgb(76 89 117 / 32%);
}

.jobfit-tariff-card__services strong,
.jobfit-purchase-plan__services strong {
    overflow-wrap: anywhere;
    color: #eef0f7;
    text-align: right;
}

.jobfit-tariff-card__check,
.jobfit-purchase-plan__services li > span:first-child {
    display: grid;
    width: 21px;
    height: 21px;
    border: 1px solid rgb(164 147 255 / 65%);
    border-radius: 50%;
    color: #c2b7ff;
    font-size: 0.72rem;
    place-items: center;
}

.jobfit-tariff-card__action,
.jobfit-purchase-submit {
    width: 100%;
    min-height: 54px;
    padding: 0 1.25rem;
    border: 1px solid rgb(101 113 144 / 68%);
    border-radius: 10px;
    background: transparent;
    color: #f2f1f8;
    cursor: pointer;
    font-weight: 740;
    transition: 160ms ease;
    transition-property: border-color, background, transform;
}

.jobfit-tariff-card__action:hover:not(:disabled),
.jobfit-purchase-submit:hover:not(:disabled) {
    border-color: #785be1;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    transform: translateY(-1px);
}

.jobfit-tariff-card__action:disabled,
.jobfit-purchase-submit:disabled,
.jobfit-promo-control__action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.jobfit-tariffs-notes {
    display: grid;
    margin-top: 1.75rem;
    padding: 0;
    gap: 0.5rem;
    text-align: center;
}

.jobfit-tariffs-service-note,
.jobfit-tariffs-tax-note {
    margin: 0;
}

.jobfit-tariffs-service-note {
    color: #929bb4;
    font-size: 0.84rem;
    line-height: 1.5;
}

.jobfit-tariffs-tax-note {
    padding: 0;
    border: 0;
    color: #757f99;
    font-size: 0.78rem;
    text-align: center;
}

.jobfit-purchase-page {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.jobfit-purchase-back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: #aaa2d8;
    font-size: 0.86rem;
    font-weight: 670;
    text-decoration: none;
}

.jobfit-purchase-back:hover {
    color: #fff;
}

.jobfit-purchase-heading {
    margin-bottom: 1.65rem;
}

.jobfit-purchase-layout {
    display: grid;
    align-items: start;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.84fr);
}

.jobfit-purchase-plan,
.jobfit-order-summary {
    min-width: 0;
    padding: 1.8rem;
    border: 1px solid rgb(76 89 117 / 40%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgb(92 61 193 / 10%), transparent 22rem),
        linear-gradient(145deg, rgb(17 26 46 / 84%), rgb(10 20 39 / 74%));
    box-shadow: 0 18px 44px rgb(2 6 23 / 16%);
}

.jobfit-purchase-plan {
    min-height: 355px;
}

.jobfit-purchase-plan__services {
    margin-top: 1.8rem;
    padding-top: 1.45rem;
    border-top: 1px solid rgb(76 89 117 / 32%);
}

.jobfit-order-summary {
    display: grid;
    gap: 1.2rem;
}

.jobfit-order-summary__account {
    margin: -0.55rem 0 0;
    color: #8d96b0;
    font-size: 0.8rem;
}

.jobfit-promo-control {
    display: grid;
    gap: 0.55rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgb(76 89 117 / 32%);
}

.jobfit-promo-control label {
    color: #d5d5df;
    font-size: 0.82rem;
    font-weight: 690;
}

.jobfit-promo-control__row {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.jobfit-promo-control input {
    width: 100%;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid rgb(80 93 122 / 58%);
    border-radius: 9px;
    background: rgb(7 14 29 / 62%);
    color: #f5f4fb;
}

.jobfit-promo-control input:focus,
.jobfit-promo-control input:focus-visible {
    border-color: rgb(139 119 234 / 78%);
    background: rgb(7 14 29 / 92%);
    box-shadow: none;
    color: #f5f4fb;
}

.jobfit-promo-control input:disabled {
    color: #b9b4d4;
    opacity: 0.74;
}

.jobfit-promo-control__action {
    min-width: 112px;
    min-height: 48px;
    padding: 0 1rem;
    border: 1px solid rgb(117 91 213 / 72%);
    border-radius: 9px;
    background: rgb(91 63 188 / 16%);
    color: #e7e1ff;
    cursor: pointer;
    font-weight: 720;
}

.jobfit-promo-control__error,
.jobfit-promo-control__success,
.jobfit-promo-control__hint {
    margin: 0.15rem 0 0;
    font-size: 0.77rem;
    line-height: 1.45;
}

.jobfit-promo-control__error {
    color: #fda4af;
}

.jobfit-promo-control__success {
    color: #72e2a2;
}

.jobfit-promo-control__hint {
    color: #979fba;
}

.jobfit-benefit-card {
    display: grid;
    align-items: start;
    padding: 1rem;
    gap: 0.85rem;
    border: 1px solid rgb(120 91 225 / 42%);
    border-radius: 11px;
    background: rgb(89 58 190 / 11%);
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-benefit-card__icon {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(145deg, #6549d0, #3e2b98);
    color: #fff;
    place-items: center;
}

.jobfit-benefit-card strong {
    color: #ebe7ff;
    font-size: 0.82rem;
}

.jobfit-benefit-card ul {
    display: grid;
    margin: 0.35rem 0 0;
    padding-left: 1.05rem;
    gap: 0.25rem;
    color: #aeb3c7;
    font-size: 0.78rem;
}

.jobfit-order-totals {
    display: grid;
    margin: 0;
    padding: 1.1rem 0 0;
    gap: 0.7rem;
    border-top: 1px solid rgb(76 89 117 / 32%);
}

.jobfit-order-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.jobfit-order-totals dt,
.jobfit-order-totals dd {
    margin: 0;
}

.jobfit-order-totals dt {
    color: #959db5;
    font-size: 0.82rem;
}

.jobfit-order-totals dd {
    color: #e8e9f0;
    font-weight: 690;
}

.jobfit-order-totals__discount dd {
    color: #72e2a2;
}

.jobfit-order-totals__final {
    margin-top: 0.2rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgb(76 89 117 / 28%);
}

.jobfit-order-totals__final dt {
    color: #dddde8;
    font-weight: 700;
}

.jobfit-order-totals__final dd {
    color: #fff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.45rem;
}

.jobfit-purchase-submit {
    border-color: #785be1;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    box-shadow: 0 12px 28px rgb(51 29 139 / 22%);
}

@media (max-width: 1180px) {
    .jobfit-plan-summary {
        grid-template-columns: 1fr;
    }

    .jobfit-plan-summary__identity {
        padding: 0 0 1.4rem;
        border-right: 0;
        border-bottom: 1px solid rgb(76 89 117 / 30%);
    }

    .jobfit-plan-summary__metrics {
        padding-top: 1rem;
    }

    .jobfit-tariff-rail__item {
        flex-basis: calc((100% - 1.4rem) / 2);
    }
}

@media (max-width: 860px) {
    .jobfit-plan-summary__metrics {
        grid-template-columns: 1fr;
    }

    .jobfit-plan-summary__metric {
        min-height: 100px;
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid rgb(76 89 117 / 30%);
    }

    .jobfit-plan-summary__metric:last-child {
        border-bottom: 0;
    }

    .jobfit-purchase-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .customer-portal-billing-tabs {
        overflow-x: auto;
        gap: 1.2rem;
    }

    .customer-portal-billing-tab {
        flex: 0 0 auto;
    }

    .jobfit-plan-summary,
    .jobfit-purchase-plan,
    .jobfit-order-summary,
    .jobfit-tariff-card {
        padding: 1.25rem;
    }

    .jobfit-tariff-catalog__heading,
    .jobfit-period-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .jobfit-period-filter__options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobfit-period-filter__option {
        width: 100%;
        min-width: 0;
    }

    .jobfit-tariff-rail__item {
        flex-basis: calc(100% - 2.5rem);
    }

    .jobfit-purchase-access-panel {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .jobfit-purchase-access-panel__retry {
        width: 100%;
        grid-column: 1 / -1;
    }

    .jobfit-purchase-access-panel__controls {
        align-items: stretch;
        flex-direction: column;
    }

    .jobfit-tariff-card {
        min-height: 0;
    }

    .jobfit-promo-control__row {
        grid-template-columns: 1fr;
    }

    .jobfit-promo-control__action {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-portal-billing-tab,
    .customer-portal-billing-tab::after,
    .jobfit-tariff-card,
    .jobfit-tariff-card__action,
    .jobfit-purchase-submit {
        transition: none;
    }
}
.portal-registration-legal {
    --legal-checkbox-size: 1.125rem;
    --legal-choice-gap: 0.625rem;
    display: grid;
    gap: 0.875rem;
    margin-block: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.portal-registration-page,
.portal-registration-invite {
    width: 100%;
}

.portal-registration-invite {
    grid-column: 1 / -1;
}

.customer-portal-registration .portal-registration-brand {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.65rem;
    margin: 0 auto 1.5rem;
    color: #fff;
    font-family: var(--agnita-portal-font-heading);
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.customer-portal-registration .portal-registration-brand img {
    width: 2.5rem;
    height: 2.5rem;
    filter: brightness(0) invert(1);
}

.customer-portal-registration .portal-registration-brand:hover,
.customer-portal-registration .portal-registration-brand:focus-visible {
    color: #fff;
    text-decoration: none;
}

.customer-portal-registration .portal-registration-brand:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 5px;
    border-radius: 4px;
}

.portal-registration-page .customer-portal-heading h1 {
    font-size: clamp(1.75rem, 3vw, 2rem);
}

.portal-registration-password-guidance,
.portal-registration-password-error {
    grid-column: 1 / -1;
}

.portal-registration-password-guidance {
    margin-top: -0.25rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgb(184 166 255 / 18%);
    border-radius: 12px;
    background: rgb(184 166 255 / 6%);
}

.portal-registration-password-guidance > p {
    margin: 0 0 0.65rem;
    color: #e7e2ff;
    font-size: 0.875rem;
    font-weight: 650;
}

.portal-registration-password-guidance ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-registration-password-guidance__criterion {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: #aeb8c9;
    font-size: 0.8rem;
    line-height: 1.4;
}

.portal-registration-password-guidance__criterion > span {
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    place-items: center;
    border: 1px solid rgb(174 184 201 / 55%);
    border-radius: 50%;
    color: transparent;
    font-size: 0.7rem;
    line-height: 1;
}

.portal-registration-password-guidance__criterion--met {
    color: #d6f5df;
}

.portal-registration-password-guidance__criterion--met > span {
    border-color: rgb(103 216 147 / 72%);
    background: rgb(103 216 147 / 18%);
    color: #9ee6ba;
}

.portal-registration-password-guidance__criterion--unmet > span {
    border-color: rgb(248 151 164 / 65%);
}

.portal-registration-password-error {
    margin: 0;
    color: #fda4af;
    font-size: 0.875rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .portal-registration-password-guidance ul {
        grid-template-columns: 1fr;
    }
}

.portal-registration-invite #registration-invite-help + .customer-portal-field-hint {
    margin-top: 0.2rem;
    padding: 0.55rem 0.75rem;
    border-inline-start: 2px solid rgb(217 169 80 / 85%);
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
    background: rgb(217 169 80 / 10%);
    color: #e7d5b3;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

.portal-registration-invite:has(> .validation-message[role="alert"]) {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 1.15rem 1.25rem 1.15rem 4rem;
    border: 1px solid rgb(218 101 125 / 38%);
    border-radius: 14px;
    background: linear-gradient(115deg, rgb(88 42 61 / 36%), rgb(20 28 45 / 94%));
    box-shadow: 0 12px 30px rgb(2 6 23 / 12%);
}

.portal-registration-invite:has(> .validation-message[role="alert"])::before {
    position: absolute;
    top: 1.15rem;
    left: 1.2rem;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid rgb(251 113 133 / 40%);
    border-radius: 50%;
    background: rgb(251 113 133 / 12%);
    color: #fda4af;
    content: "!";
    font-size: 0.95rem;
    font-weight: 700;
}

.portal-registration-invite > .validation-message[role="alert"] {
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
    color: #f8d7de;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

.portal-registration-invite > .validation-message[role="alert"] + button {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.55rem 1rem;
    border: 1px solid rgb(184 166 255 / 45%);
    border-radius: 9px;
    background: rgb(112 93 226 / 16%);
    color: #e8e1ff;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.portal-registration-invite > .validation-message[role="alert"] + button:hover:not(:disabled) {
    border-color: var(--agnita-portal-link);
    background: rgb(112 93 226 / 30%);
}

.portal-registration-invite > .validation-message[role="alert"] + button:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 3px;
}

.portal-registration-invite > .validation-message[role="alert"] + button:disabled {
    opacity: 0.55;
    cursor: wait;
}

@media (max-width: 600px) {
    .portal-registration-invite > .validation-message[role="alert"] + button {
        width: 100%;
        margin-left: 0;
    }
}

@media (min-width: 901px) {
    .public-layout:has(> .portal-registration-page) {
        display: grid;
        min-height: 100vh;
        align-items: center;
        box-sizing: border-box;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.portal-registration-legal__notice {
    margin: 0;
    padding-inline-start: calc(var(--legal-checkbox-size) + var(--legal-choice-gap));
}

.portal-registration-legal__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--legal-choice-gap);
}

.portal-registration-legal__choice input {
    flex: 0 0 auto;
    width: var(--legal-checkbox-size);
    height: var(--legal-checkbox-size);
    margin: 0.125rem 0 0;
}

/* A single subscription summary, with dividers between the three metrics. */
.jobfit-overview-metrics {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgb(76 89 117 / 34%);
    border-radius: 18px;
    background: linear-gradient(115deg, rgb(17 26 46 / 76%), rgb(30 29 67 / 55%));
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jobfit-overview-metric {
    min-height: 148px;
    margin: 1.4rem 0;
    padding: 0 1.5rem;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    background: none;
}

.jobfit-overview-metric + .jobfit-overview-metric {
    border-left: 1px solid rgb(76 89 117 / 34%);
}

.jobfit-overview-metric-icon {
    width: 48px;
    height: 48px;
}

.jobfit-overview-metric strong {
    font-size: clamp(1.25rem, 1.6vw, 1.75rem);
}

.jobfit-overview-metric:has(time) strong {
    overflow: visible;
    font-family: var(--agnita-portal-font-body, sans-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    text-overflow: clip;
    white-space: nowrap;
}

.jobfit-tariff-card__header h3 {
    font-size: 2rem;
    font-weight: 750;
}

.jobfit-tariff-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.jobfit-tariff-card__badge {
    flex: 0 0 auto;
    padding: 0.28rem 0.6rem;
    border: 1px solid rgb(174 149 255 / 56%);
    border-radius: 999px;
    background: rgb(92 61 193 / 20%);
    color: #dfd6ff;
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.jobfit-tariff-card__price span {
    color: #fff;
    font-size: clamp(2.3rem, 3.3vw, 3rem);
    font-weight: 640;
    line-height: 1;
}

.jobfit-tariff-card__description,
.jobfit-tariff-card__duration {
    margin: 0;
    color: #aeb4c6;
    font-size: 0.9rem;
    line-height: 1.6;
}

.jobfit-tariff-card__description {
    min-height: 4lh;
}

@container (max-width: 930px) {
    .jobfit-tariff-card__description {
        min-height: 0;
    }
}

.jobfit-tariff-card__credits {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 0;
    color: #f7f6ff;
    font-size: 1rem;
}

.jobfit-tariff-card__check {
    width: 20px;
    height: 20px;
    border: 0;
    color: #ad95ff;
    font-size: 1rem;
}

.jobfit-tariff-card__services li:has(.jobfit-tariff-card__feature) {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
}

.jobfit-tariff-card__action {
    border-color: transparent;
    background: linear-gradient(105deg, #5c3dcc, #724ddc);
    color: #fff;
}

@media (max-width: 1199px) {
    .jobfit-overview-metrics {
        grid-template-columns: 1fr;
    }

    .jobfit-overview-metric {
        min-height: 112px;
        margin: 0 1.25rem;
        padding: 1.25rem 0;
        grid-column: auto;
    }

    .jobfit-overview-metric:last-child {
        grid-column: auto;
    }

    .jobfit-overview-metric + .jobfit-overview-metric {
        border-top: 1px solid rgb(76 89 117 / 34%);
        border-left: 0;
    }

    .jobfit-overview-metric:has(time) strong {
        font-size: 1.4rem;
    }
}

.jobfit-tariff-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

@container (max-width: 980px) {
    .jobfit-tariff-card {
        padding: 1.35rem;
        gap: 0.6rem;
    }

    .jobfit-tariff-card__header h3 {
        font-size: 1.65rem;
    }

    .jobfit-tariff-card__price strong,
    .jobfit-tariff-card__price span {
        font-size: 2.25rem;
    }
}

.jobfit-tariff-card__services {
    flex: 1;
    margin-bottom: 1.25rem;
}

.jobfit-plan-summary__metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
}

.jobfit-plan-summary__metric .jobfit-plan-summary__date {
    font-family: var(--agnita-portal-font-body);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Completed purchases remain separate even when their service balances share a Billing pool. */
.jobfit-purchase-list {
    display: grid;
    gap: .8rem;
}

.jobfit-purchase-card {
    display: grid;
    min-width: 0;
    align-items: center;
    padding: 1.15rem 1.25rem;
    gap: 1.25rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgb(92 61 193 / 8%), transparent 20rem),
        #141d2c;
    grid-template-columns: minmax(16rem, 1fr) 9rem 15rem;
}

.jobfit-purchase-card__main {
    min-width: 0;
}

.jobfit-purchase-card__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}

.jobfit-purchase-card h3 {
    margin: .25rem 0 0;
    color: #f7f6fd;
    font: 650 1.25rem Onest, Inter, sans-serif;
    overflow-wrap: anywhere;
}

.jobfit-purchase-card__period {
    margin: .65rem 0 0;
    color: #c3c9d7;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

.jobfit-purchase-card__period-label {
    margin-right: .45rem;
    color: var(--agnita-portal-muted, #99a7bd);
}

.jobfit-purchase-card__credits {
    display: grid;
    min-width: 9rem;
    gap: .05rem;
}

.jobfit-purchase-card__credits span,
.jobfit-purchase-card__credits small {
    color: var(--agnita-portal-muted, #99a7bd);
    font-size: .76rem;
}

.jobfit-purchase-card__credits strong {
    color: #f7f6fd;
    font: 680 1.55rem Onest, Inter, sans-serif;
    font-variant-numeric: tabular-nums;
}

.jobfit-purchase-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.jobfit-purchase-card__details,
.jobfit-purchase-card__menu-trigger,
.jobfit-cancellation-dialog__keep,
.jobfit-cancellation-dialog__submit,
.jobfit-purchase-details-dialog__footer button {
    min-height: 42px;
    padding: .7rem .9rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
}

.jobfit-purchase-card__details,
.jobfit-purchase-card__menu-trigger,
.jobfit-cancellation-dialog__keep,
.jobfit-purchase-details-dialog__footer button {
    border: 1px solid rgb(117 127 153 / 58%);
    background: rgb(255 255 255 / 2%);
    color: #e7e9f0;
}

.jobfit-purchase-card__action-menu {
    display: grid;
    justify-items: end;
}

.jobfit-purchase-card__menu-trigger {
    display: grid;
    width: 42px;
    padding: 0;
    place-items: center;
}

.jobfit-purchase-card__menu-trigger svg {
    width: 20px;
    height: 20px;
    fill: currentcolor;
}

.jobfit-purchase-card__action-popover {
    min-width: 13rem;
    padding: .35rem;
    border: 1px solid rgb(91 103 132 / 62%);
    border-radius: 10px;
    background: #111b2b;
    box-shadow: 0 16px 38px rgb(2 6 23 / 38%);
    color: #e7e9f0;
    inset: auto;
    margin: .45rem 0 0;
    position-area: bottom span-left;
    position-try-fallbacks: flip-block;
}

.jobfit-purchase-card__action-popover::backdrop {
    background: transparent;
}

.jobfit-purchase-card__cancel {
    width: 100%;
    min-height: 40px;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #ffabbc;
    cursor: pointer;
    font-weight: 630;
    text-align: left;
}

.jobfit-cancellation-dialog__submit {
    border: 0;
    background: linear-gradient(105deg, #a83f5b, #c54f6d);
    color: #fff;
}

.jobfit-purchase-card__details:hover,
.jobfit-purchase-card__menu-trigger:hover,
.jobfit-cancellation-dialog__keep:hover,
.jobfit-purchase-details-dialog__footer button:hover {
    border-color: #8d79e8;
    background: rgb(113 78 216 / 10%);
}

.jobfit-purchase-card__cancel:hover {
    background: rgb(218 101 125 / 16%);
}

.jobfit-cancellation-dialog__submit:disabled,
.jobfit-cancellation-dialog__keep:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.jobfit-dialog-backdrop {
    position: fixed;
    z-index: 999;
    inset: 0;
    background: rgb(2 7 18 / 72%);
    backdrop-filter: blur(3px);
}

.jobfit-cancellation-dialog {
    position: fixed;
    z-index: 1000;
    display: flex;
    max-height: calc(100dvh - 2rem);
    flex-direction: column;
    inset: max(1rem, 4vh) max(1rem, calc((100vw - 760px) / 2)) auto;
    overflow: hidden;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 18px;
    background: #111a29;
    box-shadow: 0 24px 80px rgb(0 0 0 / 55%);
}

.jobfit-cancellation-dialog > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.4rem 1.5rem 1.1rem;
    gap: 1rem;
    border-bottom: 1px solid rgb(76 89 117 / 38%);
}

.jobfit-cancellation-dialog > header h2 {
    margin: .3rem 0 0;
    color: #f8f7fd;
    font: 680 1.65rem Onest, Inter, sans-serif;
}

.jobfit-cancellation-dialog__close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #d9deea;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    place-items: center;
}

.jobfit-cancellation-dialog__close:hover {
    background: rgb(255 255 255 / 6%);
}

.jobfit-cancellation-dialog__body {
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.jobfit-cancellation-dialog__lead {
    margin: 0 0 1rem;
    color: #b9c0d0;
    font-size: .9rem;
    line-height: 1.5;
}

.jobfit-cancellation-dialog__purchases {
    display: grid;
    gap: .7rem;
}

.jobfit-cancellation-selected,
.jobfit-cancellation-preview,
.jobfit-cancellation-history article {
    padding: 1rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 12px;
    background: rgb(255 255 255 / 2%);
}

.jobfit-cancellation-selected__identity {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.jobfit-cancellation-selected__identity h3 {
    margin: 0;
    color: #f7f6fd;
    font: 650 1.05rem Onest, Inter, sans-serif;
}

.jobfit-cancellation-selected__identity p {
    margin: .3rem 0 0;
    color: #a8b0c3;
    font-size: .8rem;
}

.jobfit-cancellation-selected__identity > strong {
    color: #d9d0ff;
    font-size: 1rem;
    white-space: nowrap;
}

.jobfit-cancellation-selected__summary {
    display: grid;
    margin: .9rem 0 0;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobfit-cancellation-selected__summary dt,
.jobfit-purchase-details-dialog dt {
    color: var(--agnita-portal-muted, #99a7bd);
    font-size: .76rem;
}

.jobfit-cancellation-selected__summary dd,
.jobfit-purchase-details-dialog dd {
    margin: .25rem 0 0;
    color: #f2f2f8;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.jobfit-cancellation-breakdown {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(76 89 117 / 32%);
}

.jobfit-cancellation-breakdown summary {
    color: #b7a8fb;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 650;
}

.jobfit-cancellation-breakdown dl {
    display: grid;
    margin: .75rem 0 0;
    gap: .5rem;
}

.jobfit-cancellation-breakdown dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.jobfit-cancellation-breakdown dd {
    margin: 0;
    color: #e8e5f4;
    font-weight: 650;
    white-space: nowrap;
}

.jobfit-cancellation-preview {
    margin-top: 1rem;
    border-color: rgb(118 91 220 / 48%);
    background: rgb(94 61 192 / 10%);
}

.jobfit-cancellation-preview > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.jobfit-cancellation-preview span {
    color: #c5c9d7;
    font-weight: 650;
}

.jobfit-cancellation-preview strong {
    color: #fff;
    font: 700 1.45rem Onest, Inter, sans-serif;
}

.jobfit-cancellation-preview p {
    margin: .5rem 0 0;
    color: #9fa7bb;
    font-size: .78rem;
}

.jobfit-cancellation-dialog__warnings {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgb(217 169 80 / 35%);
    border-radius: 12px;
    background: rgb(217 169 80 / 7%);
}

.jobfit-cancellation-dialog__warnings > strong {
    color: #f1d19a;
    font-size: .84rem;
}

.jobfit-cancellation-dialog__warnings ul {
    display: grid;
    margin: .55rem 0 0;
    padding-left: 1.1rem;
    gap: .35rem;
    color: #d8c6aa;
    font-size: .78rem;
    line-height: 1.45;
}

.jobfit-cancellation-dialog__confirmation {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem;
    gap: .75rem;
    color: #d6dae5;
    font-size: .84rem;
    line-height: 1.45;
}

.jobfit-cancellation-dialog__confirmation input {
    margin-top: .2rem;
}

.jobfit-cancellation-dialog__footer,
.jobfit-purchase-details-dialog__footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    gap: .65rem;
    border-top: 1px solid rgb(76 89 117 / 38%);
    background: #111a29;
}

.jobfit-purchase-details-dialog {
    right: max(1rem, calc((100vw - 700px) / 2));
    left: max(1rem, calc((100vw - 700px) / 2));
}

.jobfit-purchase-details-dialog__body {
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.jobfit-purchase-details-dialog__summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(8rem, .6fr) minmax(14rem, 1.4fr);
}

.jobfit-purchase-details-dialog__summary > div,
.jobfit-purchase-details-dialog__money,
.jobfit-purchase-details-dialog__volumes {
    padding: 1rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: 12px;
    background: rgb(255 255 255 / 2%);
}

.jobfit-purchase-details-dialog__summary span {
    display: block;
    color: var(--agnita-portal-muted, #99a7bd);
    font-size: .76rem;
}

.jobfit-purchase-details-dialog__summary strong {
    display: block;
    margin-top: .3rem;
    color: #f2f2f8;
    font-size: .9rem;
}

.jobfit-purchase-details-dialog__money,
.jobfit-purchase-details-dialog__volumes {
    margin-top: .8rem;
}

.jobfit-purchase-details-dialog__money h3,
.jobfit-purchase-details-dialog__volumes > h3 {
    margin: 0 0 .85rem;
    color: #f6f5fb;
    font: 650 1rem Onest, Inter, sans-serif;
}

.jobfit-purchase-details-dialog__money dl,
.jobfit-purchase-details-dialog__volume dl {
    display: grid;
    margin: 0;
    gap: .7rem;
}

.jobfit-purchase-details-dialog__money dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jobfit-purchase-details-dialog__paid dd {
    color: #d4caff;
}

.jobfit-purchase-details-dialog__volume-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.jobfit-purchase-details-dialog__volume {
    min-width: 0;
    padding: .85rem;
    border: 1px solid rgb(76 89 117 / 34%);
    border-radius: 10px;
    background: rgb(7 14 29 / 28%);
}

.jobfit-purchase-details-dialog__volume h4 {
    margin: 0 0 .7rem;
    color: #dcd8ef;
    font-size: .82rem;
}

.jobfit-purchase-balance__hidden {
    padding-top: .6rem;
    border-top: 1px solid var(--agnita-portal-border);
}

.jobfit-cancellation-history article > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.jobfit-cancellation-history { display: grid; gap: .75rem; margin-top: 1.5rem; }
.jobfit-cancellation-history__overdue { color: #ffaaa5; font-weight: 650; }
.jobfit-cancellation-history__lines { padding: .75rem; border-left: 2px solid #724ddc; }
.jobfit-cancellation-history__attempt { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; padding: .75rem; border: 1px solid var(--agnita-portal-border); border-radius: 10px; }
.jobfit-cancellation-history__attempt dt { color: var(--agnita-portal-muted, #99a7bd); font-size: .8rem; }
.jobfit-cancellation-history__attempt dd { margin: .25rem 0 0; overflow-wrap: anywhere; }

@media (max-width: 1300px) {
    .jobfit-purchase-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .jobfit-purchase-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .jobfit-purchase-card {
        padding: 1rem;
        gap: .9rem;
        grid-template-columns: 1fr;
    }

    .jobfit-purchase-card__credits,
    .jobfit-purchase-card__actions {
        grid-column: auto;
    }

    .jobfit-purchase-card__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobfit-purchase-card__actions > button {
        width: 100%;
        white-space: normal;
    }

    .jobfit-cancellation-dialog {
        max-height: calc(100dvh - 1rem);
        inset: .5rem .5rem auto;
        border-radius: 14px;
    }

    .jobfit-cancellation-dialog > header,
    .jobfit-cancellation-dialog__body,
    .jobfit-purchase-details-dialog__body,
    .jobfit-cancellation-dialog__footer,
    .jobfit-purchase-details-dialog__footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .jobfit-purchase-details-dialog__summary,
    .jobfit-purchase-details-dialog__money dl,
    .jobfit-purchase-details-dialog__volume-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .jobfit-cancellation-dialog__footer {
        grid-template-columns: 1fr;
    }

    .jobfit-cancellation-dialog__footer {
        display: grid;
    }

    .jobfit-cancellation-selected__identity {
        display: grid;
    }

    .jobfit-cancellation-selected__summary {
        grid-template-columns: 1fr;
    }
}
.customer-portal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.portal-analytics-consent[hidden],
.portal-analytics-settings[hidden] {
    display: none;
}

.portal-analytics-consent {
    position: fixed;
    z-index: 1100;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    width: min(760px, calc(100% - 2rem));
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: auto;
    padding: 1.25rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: var(--agnita-portal-radius);
    background: var(--agnita-portal-surface-raised);
    box-shadow: var(--agnita-portal-shadow);
    color: var(--agnita-portal-text);
}

.portal-analytics-consent h2 {
    margin: 0 0 .35rem;
    font-size: 1rem;
}

.portal-analytics-consent p {
    margin: 0;
    color: var(--agnita-portal-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.portal-analytics-consent a {
    color: var(--agnita-portal-link);
}

.portal-analytics-consent__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .5rem;
}

.portal-analytics-consent__actions button,
.portal-analytics-settings {
    min-height: 2.5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--agnita-portal-border);
    border-radius: .75rem;
    background: var(--agnita-portal-surface);
    color: var(--agnita-portal-text);
    cursor: pointer;
}

.portal-analytics-consent__actions button:first-child {
    border-color: var(--agnita-portal-primary);
    background: var(--agnita-portal-primary);
}

.portal-analytics-consent button:focus-visible,
.portal-analytics-settings:focus-visible {
    outline: 2px solid var(--agnita-portal-focus);
    outline-offset: 2px;
}

.portal-analytics-settings {
    position: fixed;
    z-index: 1099;
    right: 1rem;
    bottom: 1rem;
    min-height: auto;
    font-size: .75rem;
}

@media (max-width: 620px) {
    .portal-analytics-consent {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-analytics-consent__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}