:root {
    --he-primary: #0f47ad;
    --he-primary-dark: #0c3988;
    --he-accent: rgb(76 180 72 / .2);
    --he-text: #1a1a1a;
    --he-muted: #5c6670;
    --he-card-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

* {
    box-sizing: border-box;
}

body.he-gateway-page {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--he-text);
    background-color: var(--he-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

.he-gateway-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.he-gateway-panel {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: var(--he-card-shadow);
    padding: 2rem 1.75rem;
}

.he-gateway-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.he-gateway-brand img,
.he-gateway-logo {
    display: block;
    margin: 0 auto 0.75rem;
    max-height: 120px;
    max-width: min(100%, 280px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.he-gateway-brand h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--he-primary);
}

.he-gateway-brand p {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: var(--he-muted);
}

.he-gateway-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
}

.he-gateway-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #dbe4f3;
    border-top-color: var(--he-primary);
    border-radius: 50%;
    animation: he-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes he-spin {
    to { transform: rotate(360deg); }
}

.he-gateway-lead {
    margin: 0.85rem 0 0;
    color: var(--he-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.he-gateway-steps {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    color: var(--he-text);
    line-height: 1.55;
}

.he-gateway-steps li {
    margin-bottom: 0.45rem;
}

.he-gateway-alert {
    background: #fff8e6;
    border: 1px solid #ffe08a;
    border-radius: 0.375rem;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #664d03;
}

.he-gateway-alert-error {
    background: #fdecea;
    border-color: #f5c2c0;
    color: #842029;
}

.he-gateway-actions {
    margin-top: 1.25rem;
}

.he-gateway-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    background: var(--he-primary);
    color: #fff;
}

.he-gateway-btn:hover {
    background: var(--he-primary-dark);
    color: #fff;
}

.he-gateway-footnote {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--he-muted);
    text-align: center;
}