:root {
    --gss-color-background: #f6f8fb;
    --gss-color-surface: #ffffff;
    --gss-color-surface-elevated: #eef3f7;
    --gss-color-action-primary: #0f766e;
    --gss-color-action-primary-hover: #115e59;
    --gss-color-action-on-primary: #ffffff;
    --gss-color-text-primary: #182230;
    --gss-color-text-secondary: #5d6b7c;
    --gss-color-border: #d7dee8;
    --gss-color-success: #16794c;
    --gss-color-warning: #a16207;
    --gss-color-error: #b42318;
    --gss-font-family: Inter, Segoe UI, system-ui, -apple-system, sans-serif;
    --gss-font-heading-lg: 700 2rem/1.15 var(--gss-font-family);
    --gss-font-heading-md: 700 1.35rem/1.25 var(--gss-font-family);
    --gss-font-body: 400 1rem/1.55 var(--gss-font-family);
    --gss-font-body-sm: 400 .9rem/1.45 var(--gss-font-family);
    --gss-font-label: 650 .9rem/1.2 var(--gss-font-family);
    --gss-space-xs: .5rem;
    --gss-space-sm: .75rem;
    --gss-space-md: 1rem;
    --gss-space-lg: 1.5rem;
    --gss-space-xl: 2.25rem;
    --gss-radius-control: .5rem;
    --gss-radius-card: .75rem;
    --gss-radius-dialog: 1rem;
    --gss-shadow-standard: 0 18px 45px rgb(16 24 40 / 10%);
    --gss-focus-ring: 3px solid color-mix(in srgb, var(--gss-color-action-primary) 70%, white);
    --gss-breakpoint-mobile: 480px;
    --gss-breakpoint-tablet: 760px;
    --gss-breakpoint-desktop: 1120px;
    --gss-content-width: 72rem;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--gss-color-background);
    color: var(--gss-color-text-primary);
    font: var(--gss-font-body);
}

body {
    margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: var(--gss-focus-ring);
    outline-offset: 2px;
}

.gss-sr-only {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

.gss-field {
    color: var(--gss-color-text-primary);
    display: grid;
    font: var(--gss-font-label);
    gap: var(--gss-space-xs);
}

.gss-input {
    background: var(--gss-color-surface);
    border: 1px solid var(--gss-color-border);
    border-radius: var(--gss-radius-control);
    color: var(--gss-color-text-primary);
    min-height: 2.75rem;
    padding: 0 var(--gss-space-sm);
}

.gss-input:focus,
.gss-checkbox input:focus-visible {
    outline: var(--gss-focus-ring);
    outline-offset: 2px;
}

.gss-checkbox {
    align-items: center;
    color: var(--gss-color-text-secondary);
    display: inline-flex;
    font: var(--gss-font-body-sm);
    gap: var(--gss-space-xs);
}

.gss-validation {
    color: var(--gss-color-error);
    font: var(--gss-font-body-sm);
    margin: 0;
}

.gss-card,
.gss-state {
    background: var(--gss-color-surface);
    border: 1px solid var(--gss-color-border);
    border-radius: var(--gss-radius-card);
    padding: var(--gss-space-lg);
}

.gss-card__header {
    margin-bottom: var(--gss-space-md);
}

.gss-card__header h2,
.gss-card__header p {
    margin: 0;
}

.gss-card__header p,
.gss-state p,
.gss-page-header span {
    color: var(--gss-color-text-secondary);
}

.gss-status {
    border-radius: 999px;
    display: inline-flex;
    font: var(--gss-font-label);
    padding: .25rem .65rem;
}

.gss-status--success {
    background: color-mix(in srgb, var(--gss-color-success) 14%, white);
    color: var(--gss-color-success);
}

.gss-status--warning {
    background: color-mix(in srgb, var(--gss-color-warning) 14%, white);
    color: var(--gss-color-warning);
}

.gss-status--neutral {
    background: var(--gss-color-surface-elevated);
    color: var(--gss-color-text-secondary);
}

.gss-state--error {
    border-color: color-mix(in srgb, var(--gss-color-error) 35%, var(--gss-color-border));
}

.gss-page-header {
    display: grid;
    gap: var(--gss-space-xs);
}

.gss-page-header h1,
.gss-page-header p {
    margin: 0;
}

.gss-page-header h1 {
    font: var(--gss-font-heading-lg);
}

.gss-page-header p {
    color: var(--gss-color-text-secondary);
    font: var(--gss-font-label);
    text-transform: uppercase;
}

.gss-nav-item {
    border-radius: var(--gss-radius-control);
    color: var(--gss-color-text-secondary);
    display: inline-flex;
    padding: var(--gss-space-xs) var(--gss-space-sm);
    text-decoration: none;
}

.gss-nav-item:hover,
.gss-nav-item[aria-current="page"] {
    background: var(--gss-color-surface-elevated);
    color: var(--gss-color-text-primary);
}

.gss-public-shell,
.gss-auth-shell,
.gss-app-shell,
.gss-ops-shell {
    min-height: 100vh;
}

.gss-public-header,
.gss-public-footer,
.gss-app-topbar {
    align-items: center;
    background: var(--gss-color-surface);
    border-bottom: 1px solid var(--gss-color-border);
    display: flex;
    gap: var(--gss-space-md);
    justify-content: space-between;
    padding: var(--gss-space-md) clamp(var(--gss-space-md), 4vw, var(--gss-space-xl));
}

.gss-public-header nav,
.gss-public-footer,
.gss-app-sidebar nav {
    display: flex;
    gap: var(--gss-space-sm);
}

.gss-public-main {
    margin: 0 auto;
    max-width: var(--gss-content-width);
    padding: var(--gss-space-xl) var(--gss-space-md);
}

.gss-brand,
.gss-client-area-link {
    color: var(--gss-color-text-primary);
    font: var(--gss-font-label);
    text-decoration: none;
}

.gss-client-area-link {
    background: var(--gss-color-action-primary);
    border-radius: var(--gss-radius-control);
    color: var(--gss-color-action-on-primary);
    padding: var(--gss-space-xs) var(--gss-space-sm);
}

.gss-auth-shell {
    display: grid;
    padding: var(--gss-space-lg);
    place-items: center;
}

.gss-auth-panel {
    background: var(--gss-color-surface);
    border: 1px solid var(--gss-color-border);
    border-radius: var(--gss-radius-dialog);
    box-shadow: var(--gss-shadow-standard);
    display: grid;
    gap: var(--gss-space-lg);
    max-width: 28rem;
    padding: var(--gss-space-xl);
    width: min(100%, 28rem);
}

.gss-app-shell,
.gss-ops-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
}

.gss-app-sidebar {
    background: var(--gss-color-surface);
    border-right: 1px solid var(--gss-color-border);
    display: grid;
    gap: var(--gss-space-lg);
    grid-template-rows: auto 1fr;
    padding: var(--gss-space-lg);
}

.gss-app-sidebar nav {
    align-content: start;
    flex-direction: column;
}

.gss-app-main {
    min-width: 0;
}

.gss-app-content {
    padding: var(--gss-space-lg);
}

.gss-client-portal-shell {
    background: var(--gss-color-background);
    color: var(--gss-color-text-primary);
    min-height: 100vh;
}

.gss-client-header {
    align-items: center;
    background: var(--gss-color-surface);
    border-bottom: 1px solid var(--gss-color-border);
    display: grid;
    gap: var(--gss-space-md);
    grid-template-columns: auto 1fr auto;
    padding: var(--gss-space-md) clamp(var(--gss-space-md), 4vw, var(--gss-space-xl));
}

.gss-client-brand {
    align-items: center;
    color: var(--gss-color-text-primary);
    display: inline-flex;
    font: var(--gss-font-label);
    gap: var(--gss-space-xs);
    text-decoration: none;
}

.gss-client-brand img {
    height: 2.25rem;
    width: auto;
}

.gss-client-brand span span,
.gss-client-footer h2 span {
    color: var(--gss-color-action-primary);
}

.gss-client-context-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gss-space-xs);
    justify-content: center;
}

.gss-client-context-strip span,
.gss-client-header-actions a,
.gss-client-header-actions button {
    background: var(--gss-color-surface-elevated);
    border: 1px solid var(--gss-color-border);
    border-radius: 999px;
    color: var(--gss-color-text-secondary);
    font: var(--gss-font-body-sm);
    padding: .4rem .75rem;
    text-decoration: none;
}

.gss-client-header-actions {
    align-items: center;
    display: flex;
    gap: var(--gss-space-xs);
}

.gss-client-header-actions button {
    cursor: pointer;
}

.gss-client-nav {
    align-items: center;
    background: color-mix(in srgb, var(--gss-color-surface) 92%, var(--gss-color-action-primary));
    border-bottom: 1px solid var(--gss-color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gss-space-xs);
    justify-content: center;
    padding: var(--gss-space-sm) var(--gss-space-md);
}

.gss-client-main {
    margin: 0 auto;
    max-width: var(--gss-content-width);
    padding: clamp(var(--gss-space-lg), 4vw, var(--gss-space-xl)) var(--gss-space-md);
}

.gss-client-footer {
    background: var(--gss-color-text-primary);
    color: var(--gss-color-surface);
    display: grid;
    gap: var(--gss-space-lg);
    grid-template-columns: 1.4fr repeat(3, 1fr);
    padding: var(--gss-space-xl) clamp(var(--gss-space-md), 4vw, var(--gss-space-xl));
}

.gss-client-footer h2,
.gss-client-footer p {
    margin: 0;
}

.gss-client-footer section,
.gss-client-footer nav,
.gss-client-footer address {
    display: grid;
    font-style: normal;
    gap: var(--gss-space-xs);
}

.gss-client-footer a,
.gss-client-footer span,
.gss-client-footer p {
    color: color-mix(in srgb, var(--gss-color-surface) 82%, var(--gss-color-text-secondary));
    font: var(--gss-font-body-sm);
    text-decoration: none;
}

.gss-client-footer a:hover,
.gss-client-footer a:focus-visible {
    color: var(--gss-color-surface);
}

.gss-client-footer small {
    border-top: 1px solid color-mix(in srgb, var(--gss-color-surface) 18%, transparent);
    color: color-mix(in srgb, var(--gss-color-surface) 70%, var(--gss-color-text-secondary));
    grid-column: 1 / -1;
    padding-top: var(--gss-space-md);
}

.gss-ops-platform-shell {
    background: var(--gss-color-background);
    color: var(--gss-color-text-primary);
    min-height: 100vh;
}

.gss-ops-header {
    align-items: center;
    background: var(--gss-color-text-primary);
    color: var(--gss-color-surface);
    display: grid;
    gap: var(--gss-space-md);
    grid-template-columns: auto 1fr auto;
    padding: var(--gss-space-md) clamp(var(--gss-space-md), 4vw, var(--gss-space-xl));
}

.gss-ops-brand {
    align-items: center;
    color: var(--gss-color-surface);
    display: inline-flex;
    font: var(--gss-font-label);
    gap: var(--gss-space-xs);
    text-decoration: none;
}

.gss-ops-brand img {
    height: 2.25rem;
    width: auto;
}

.gss-ops-brand span span,
.gss-ops-footer h2 span {
    color: var(--gss-color-action-primary);
}

.gss-ops-brand strong {
    border-left: 1px solid color-mix(in srgb, var(--gss-color-surface) 28%, transparent);
    color: color-mix(in srgb, var(--gss-color-surface) 82%, var(--gss-color-action-primary));
    padding-left: var(--gss-space-xs);
}

.gss-ops-status-strip,
.gss-ops-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gss-space-xs);
}

.gss-ops-status-strip {
    justify-content: center;
}

.gss-ops-status-strip span,
.gss-ops-actions a,
.gss-ops-actions button {
    background: color-mix(in srgb, var(--gss-color-surface) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gss-color-surface) 20%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--gss-color-surface) 88%, var(--gss-color-text-secondary));
    font: var(--gss-font-body-sm);
    padding: .4rem .75rem;
    text-decoration: none;
}

.gss-ops-actions button {
    cursor: pointer;
}

.gss-ops-nav {
    align-items: center;
    background: var(--gss-color-surface);
    border-bottom: 1px solid var(--gss-color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gss-space-xs);
    justify-content: center;
    padding: var(--gss-space-sm) var(--gss-space-md);
}

.gss-ops-main {
    margin: 0 auto;
    max-width: var(--gss-content-width);
    padding: clamp(var(--gss-space-lg), 4vw, var(--gss-space-xl)) var(--gss-space-md);
}

.gss-ops-footer {
    background: var(--gss-color-text-primary);
    color: var(--gss-color-surface);
    display: grid;
    gap: var(--gss-space-lg);
    grid-template-columns: 1.4fr 1fr 1fr;
    padding: var(--gss-space-xl) clamp(var(--gss-space-md), 4vw, var(--gss-space-xl));
}

.gss-ops-footer section,
.gss-ops-footer nav,
.gss-ops-footer address {
    display: grid;
    font-style: normal;
    gap: var(--gss-space-xs);
}

.gss-ops-footer h2,
.gss-ops-footer p {
    margin: 0;
}

.gss-ops-footer a,
.gss-ops-footer span,
.gss-ops-footer p {
    color: color-mix(in srgb, var(--gss-color-surface) 82%, var(--gss-color-text-secondary));
    font: var(--gss-font-body-sm);
    text-decoration: none;
}

.gss-ops-footer a:hover,
.gss-ops-footer a:focus-visible {
    color: var(--gss-color-surface);
}

.gss-ops-footer small {
    border-top: 1px solid color-mix(in srgb, var(--gss-color-surface) 18%, transparent);
    color: color-mix(in srgb, var(--gss-color-surface) 70%, var(--gss-color-text-secondary));
    grid-column: 1 / -1;
    padding-top: var(--gss-space-md);
}

@media (max-width: 760px) {
    .gss-public-header,
    .gss-public-footer,
    .gss-app-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .gss-app-shell,
    .gss-ops-shell {
        grid-template-columns: 1fr;
    }

    .gss-client-header,
    .gss-client-footer,
    .gss-ops-header,
    .gss-ops-footer {
        grid-template-columns: 1fr;
    }

    .gss-client-context-strip,
    .gss-ops-status-strip {
        justify-content: flex-start;
    }

    .gss-app-sidebar {
        border-bottom: 1px solid var(--gss-color-border);
        border-right: 0;
    }
}
