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

html,
body,
button,
input,
select,
textarea {
    font-family: system-ui;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    line-height: 1.8;
    background:
        radial-gradient(circle at top left, rgba(0, 155, 222, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(0, 91, 172, 0.08), transparent 22%),
        var(--page-bg);
    color: var(--text-strong);
}

p {
    margin-bottom: 1.5em;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
.brandmark-copy strong,
.results-code,
.panel-header-stack h2,
.share-card-code h4 {
    font-family: system-ui;
    line-height: 1.6;
}

h1, h2 {
    font-weight: 900;
}

h3 {
    font-weight: 700;
}

sl-button::part(base) {
    border-radius: var(--radius-md);
    font-weight: 800;
    transition: all 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

sl-button::part(base):focus-visible {
    outline: 2px solid var(--sky-blue) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

sl-input::part(base):focus-within,
sl-select::part(combobox):focus-within,
sl-select::part(base):focus-within {
    outline: 2px solid var(--sky-blue) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-color: var(--sky-blue) !important;
}

sl-button[variant="primary"]::part(base) {
    background: var(--buaa-blue);
    border-color: var(--buaa-blue);
    color: #fff;
    box-shadow: var(--shadow-level-1);
}

sl-button[variant="primary"]::part(base):hover {
    background: var(--starry-blue);
    border-color: var(--starry-blue);
    box-shadow: var(--shadow-level-1);
}

sl-tag::part(base) {
    border-radius: var(--radius-sm);
    font-weight: 800;
}

sl-button::part(base),
sl-tag::part(base) {
    transition:
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

sl-button:hover::part(base),
sl-tag:hover::part(base) {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 91, 172, 0.12);
}

sl-button:active::part(base) {
    transform: translateY(0) scale(0.98);
}

html[data-color-mode="dark"] {
    --page-bg: #09121d;
    --surface: #101926;
    --surface-alt: #132133;
    --line: rgba(148, 163, 184, 0.22);
    --text-strong: #ffffff;
    --text-body: #cbd5e1;
    --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.8);
    --shadow-md: 0 14px 30px rgba(2, 6, 23, 0.6);
    --header-bg: rgba(16, 25, 38, 0.75);
    --overlay-bg: rgba(16, 25, 38, 0.85);
}

html[data-color-mode="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(0, 155, 222, 0.12), transparent 24%),
        radial-gradient(circle at top right, rgba(0, 91, 172, 0.12), transparent 22%),
        var(--page-bg);
    color: var(--text-strong);
}

html[data-color-mode="dark"] .site-header {
    background: var(--header-bg);
    border-bottom-color: var(--line);
}

html[data-color-mode="dark"] .header-login-link {
    background: rgba(0, 155, 222, 0.18);
}

html[data-color-mode="dark"] .visual-card,
html[data-color-mode="dark"] .stat-card,
html[data-color-mode="dark"] .dimension-card,
html[data-color-mode="dark"] .profile-card,
html[data-color-mode="dark"] .family-card,
html[data-color-mode="dark"] .cta-panel,
html[data-color-mode="dark"] .auth-choice-panel,
html[data-color-mode="dark"] .sso-panel,
html[data-color-mode="dark"] .test-meta-card,
html[data-color-mode="dark"] .sidebar-card,
html[data-color-mode="dark"] .scale-question-card,
html[data-color-mode="dark"] .result-panel-shell,
html[data-color-mode="dark"] .scale-submit-panel,
html[data-color-mode="dark"] .question-progress-shell,
html[data-color-mode="dark"] .question-page,
html[data-color-mode="dark"] .question-item {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-md);
}

html[data-color-mode="dark"] .main-nav a:hover,
html[data-color-mode="dark"] .main-nav a.is-active,
html[data-color-mode="dark"] .eyebrow-pill.is-teal {
    background: rgba(0, 155, 222, 0.18);
}

html[data-color-mode="dark"] .deploy-banner {
    background: #7f1d1d;
    border-bottom-color: #dc2626;
    color: #fee2e2;
}

html[data-color-mode="dark"] .brandmark-icon {
    background: linear-gradient(135deg, var(--sky-blue), var(--buaa-blue));
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.32);
}

html[data-color-mode="dark"] .visual-card-header,
html[data-color-mode="dark"] .dimension-code,
html[data-color-mode="dark"] .profile-topline,
html[data-color-mode="dark"] .dimension-poles,
html[data-color-mode="dark"] .footer-meta {
    color: var(--text-body);
}

html[data-color-mode="dark"] .profile-quote {
    color: var(--text-strong);
}

html[data-color-mode="dark"] .match-entry-form,
html[data-color-mode="dark"] .test-access-card {
    border-color: var(--line);
    background: var(--overlay-bg);
    box-shadow: var(--shadow-md);
}

html[data-color-mode="dark"] .field-block input,
html[data-color-mode="dark"] .field-block select {
    background: var(--sl-input-background-color, var(--surface));
    border-color: var(--sl-input-border-color, var(--line));
    color: var(--text-strong);
}

html[data-color-mode="dark"] .field-block input::placeholder {
    color: rgba(159, 176, 197, 0.68);
}

html[data-color-mode="dark"] .sso-option {
    background: var(--surface);
    border-color: var(--line);
}
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; }
.site-main { flex: 1; }

/* Avoid accidental text selection on interactive elements like labels, buttons, and custom no-select elements */
label,
button,
sl-button,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}