:root {
    --page-background: #f5f5f5;
    --card-background: #ffffff;
    --card-border: #e8e9ea;
    --text: #333333;
    --text-muted: #5f666e;
    --notice-background: #f9fafb;

    /* Brand tokens, overridden per brand below. */
    --accent: #0d285c;
    --accent-end: #0ebee6;
    --button-background: #0d285c;
    --button-background-hover: #071c45;
    --button-text: #ffffff;
    --focus-ring: #84cfeb;

    color-scheme: light dark;
}

[data-brand="ibodyshop"] {
    --accent: #32afde;
    --accent-end: #84cfeb;
    --button-background: #237a9b;
    --button-background-hover: #19576f;
    --focus-ring: #84cfeb;
}

[data-brand="repairconnection"] {
    --accent: #8f080e;
    --accent-end: #c80b12;
    --button-background: #8f080e;
    --button-background-hover: #6b060a;
    --focus-ring: #e19da0;
}

[data-brand="assessing"] {
    --accent: #1692af;
    --accent-end: #189dbc;
    --button-background: #0d285c;
    --button-background-hover: #071c45;
    --focus-ring: #1692af;
}

[data-brand="clear21"] {
    --accent: #4c2773;
    --accent-end: #0ebee6;
    --button-background: #0d285c;
    --button-background-hover: #071c45;
    --focus-ring: #0e9dc8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #161616;
        --card-background: #1e1e1e;
        --card-border: #2d2d2d;
        --text: #f5f5f5;
        --text-muted: #bbbdc1;
        --notice-background: #252525;
        --button-text: #0f1720;
    }

    [data-brand="ibodyshop"] {
        --button-background: #32afde;
        --button-background-hover: #84cfeb;
    }

    [data-brand="repairconnection"] {
        --accent: #c23b41;
        --accent-end: #e80e16;
        --button-background: #e19da0;
        --button-background-hover: #f0cecf;
    }

    [data-brand="assessing"] {
        --button-background: #1692af;
        --button-background-hover: #5bbfe4;
    }

    [data-brand="clear21"] {
        --accent: #7a44c3;
        --button-background: #0ebee6;
        --button-background-hover: #84cfeb;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--page-background);
    color: var(--text);
    font-family: "Open Sans", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.card {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 48px 40px 40px;
    overflow: hidden;
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
    text-align: center;
}

.card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--accent), var(--accent-end));
    content: "";
}

.logo {
    display: block;
    height: 56px;
    margin: 0 auto 32px;
}

.logo img {
    width: auto;
    max-width: 100%;
    height: 100%;
}

.icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    color: var(--accent);
}

h1 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.notice {
    margin: 24px 0 0;
    padding: 16px;
    background: var(--notice-background);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    text-align: left;
}

.notice[hidden] {
    display: none;
}

.notice p {
    margin: 0;
    color: inherit;
}

.actions {
    margin-top: 32px;
}

.button {
    display: inline-block;
    padding: 12px 28px;
    background: var(--button-background);
    border-radius: 6px;
    color: var(--button-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.button:hover {
    background: var(--button-background-hover);
}

.button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .card {
        padding: 40px 20px 28px;
    }

    .logo {
        height: 44px;
    }

    h1 {
        font-size: 24px;
    }
}

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