:root {
    color-scheme: light;
    --theme-page-bg: #f4f6f8;
    --theme-surface-bg: #ffffff;
    --theme-surface-alt: #e9eef3;
    --theme-text: #17212b;
    --theme-muted: #5c6975;
    --theme-accent: #176b87;
    --theme-accent-text: #ffffff;
    --theme-border: #cbd3da;
    --theme-record-highlight: #ffd84d;
    --theme-sidebar-bg: #0b2545;
    --theme-sidebar-text: #f8fafc;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--theme-page-bg);
    color: var(--theme-text);
}

body:has(.timer-page.is-focus-mode) {
    overflow: hidden;
}

a, .btn-link {
    color: var(--theme-accent);
}

.btn-primary {
    color: var(--theme-accent-text);
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 0.75rem;
}

.page[data-theme] {
    --bs-body-color: var(--theme-text);
    --bs-body-bg: var(--theme-page-bg);
    --bs-secondary-color: var(--theme-muted);
    --bs-secondary-bg: var(--theme-surface-alt);
    --bs-tertiary-bg: var(--theme-surface-alt);
    --bs-border-color: var(--theme-border);
    --bs-link-color: var(--theme-accent);
    --bs-link-hover-color: color-mix(in srgb, var(--theme-accent) 76%, var(--theme-text));
    --bs-emphasis-color: var(--theme-text);
    color: var(--theme-text);
}

.page[data-theme] main,
.page[data-theme] .content {
    background: var(--theme-page-bg);
    color: var(--theme-text);
}

.page[data-theme] :is(h1, h2, h3, h4, h5, h6, p, label, th, td) {
    border-color: var(--theme-border);
}

.page[data-theme] :is(input:not([type="color"]), select, textarea, .form-control, .form-select) {
    border-color: var(--theme-border) !important;
    background-color: var(--theme-surface-bg) !important;
    color: var(--theme-text) !important;
}

.page[data-theme] textarea.scramble-text[readonly] {
    border-color: transparent !important;
    background-color: transparent !important;
}

.page[data-theme] :is(input, select, textarea)::placeholder {
    color: var(--theme-muted);
}

.page[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .timer-command, .timer-icon-command, .timer-focus-command, .timer-segmented button, .shared-preview-heading button) {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface-bg) !important;
    color: var(--theme-text) !important;
}

.page[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .timer-command, .timer-icon-command, .timer-focus-command, .timer-segmented button, .shared-preview-heading button):hover {
    background: var(--theme-surface-alt) !important;
}

.page[data-theme] :is(.btn-primary, .primary-command, .timer-segmented button.is-active) {
    border-color: var(--theme-accent) !important;
    background: var(--theme-accent) !important;
    color: var(--theme-accent-text) !important;
}

.page[data-theme] :is(.timer-page, .shared-timer-page, .account-page, .wca-simulator) {
    color: var(--theme-text);
}

.page[data-theme] :is(.timer-field > span, .scramble-copy > span, .timer-stat-label, .timer-table th, .history-index-column,
    .timer-pagination-summary, .timer-share-description, .shared-header-meta, .shared-section-heading > span,
    .shared-statistics-row > span, .shared-result-band small, .account-kicker, .account-detail, .account-note) {
    color: var(--theme-muted);
}

.page[data-theme] :is(.timer-toolbar, .scramble-strip, .timer-workspace, .timer-statistics, .timer-history,
    .timer-table th, .timer-table td, .shared-header, .shared-section, .shared-result-band,
    .shared-table-wrap th, .shared-table-wrap td, .account-section) {
    border-color: var(--theme-border);
}

.page[data-theme] :is(.timer-segmented, .timer-dialog, .timer-share-panel, .login-panel, .admin-panel) {
    border-color: var(--theme-border);
    background: var(--theme-surface-bg);
    color: var(--theme-text);
}

.page[data-theme] .timer-stage:not(.is-holding):not(.is-ready):not(.is-running):not(.is-inspecting) .timer-face {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
}

.page[data-theme] :is(.timer-modal, .timer-share-link input, .timer-import-file input, .google-login) {
    border-color: var(--theme-border);
    background: var(--theme-surface-bg);
    color: var(--theme-text);
}

.page[data-theme] :is(.timer-solve-index, .timer-instruction, .quick-penalties, .timer-stats-title strong,
    .timer-stats span, .timer-stat-row > span, .timer-preview-heading, .history-heading p, .history-empty,
    .timer-records-title small, .timer-records-heading span, .timer-record-row > span, .timer-record-row small,
    .history-pagination, .timer-modal header button, .timer-check, .timer-option-group, .timer-range-labels,
    .timer-share-list > span,
    .timer-import-description, .timer-import-file > span, .timer-import-selection,
    .manual-time-hint,
    .shared-state, .shared-header > div:first-child > span, .shared-result-band > span, .shared-note > span,
    .shared-session-summary span, .shared-statistics-heading span, .shared-statistics-row > span,
    .shared-preview-heading, .shared-table-wrap th) {
    color: var(--theme-muted);
}

.page[data-theme] .timer-row-size-field {
    color: var(--theme-text);
}

.page[data-theme] .timer-row-size-field output {
    color: var(--theme-accent);
}

.page[data-theme] :is(.timer-stats, .timer-stats-title, .timer-stats-heading, .timer-stat-row,
    .timer-records, .timer-records-title, .timer-records-heading, .timer-record-row,
    .timer-share-section, .timer-share-list > div, .timer-confirm, .shared-session-summary,
    .shared-session-summary > div, .shared-statistics, .shared-statistics-row, .shared-statistics-heading,
    .shared-note, .results-table-wrap, .results-table th, .results-table td, .event-tabs,
    .competition-summary, .simulator-header) {
    border-color: var(--theme-border);
}

.page[data-theme] .timer-record-row abbr {
    color: var(--theme-text);
}

.page[data-theme] :is(.cube-header h1, .twobytwo-header h1, .fourbyfour-header h1, .nxn-header h1,
    .pyraminx-header h1, .skewb-header h1, .clock-header h1, .megaminx-header h1,
    .trainer-section__header h2, .share-header h1, .share-preview__header h2) {
    color: var(--theme-text);
}

.page[data-theme] :is(.cube-kicker, .twobytwo-kicker, .fourbyfour-kicker, .nxn-kicker, .pyraminx-kicker,
    .skewb-kicker, .clock-kicker, .megaminx-kicker, .trainer-section__header p,
    .twobytwo-meta, .fourbyfour-meta, .nxn-meta, .pyraminx-meta, .skewb-meta, .clock-meta,
    .megaminx-meta, .share-header p, .share-preview__header p, .share-header > span,
    .share-preview__header span, .share-field, .share-field small, .header-copy, .field-hint,
    .event-toolbar p:last-child, .results-meta) {
    color: var(--theme-muted);
}

.page[data-theme] :is(.puzzle-section-menu a, .share-secondary, .share-inline-action, .event-tab,
    .pll-btn, .pll-chip, .pll-answer-btn, .pll-input) {
    border-color: var(--theme-border);
    background: var(--theme-surface-bg);
    color: var(--theme-text);
}

.page[data-theme] :is(.puzzle-section-menu a.active, .share-primary, .primary-button, .event-tab.is-active) {
    border-color: var(--theme-accent);
    background: var(--theme-accent);
    color: var(--theme-accent-text);
}

.page[data-theme] :is(.pll-card, .pll-case-selection, .pll-preview-card, .pll-subcard, .results-table-wrap) {
    border-color: var(--theme-border);
    background: var(--theme-surface-bg);
    color: var(--theme-text);
}

.page[data-theme] :is(.results-table th, .event-tab:hover, .share-field input:disabled) {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
}

.page[data-theme] .results-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--theme-surface-alt) 55%, var(--theme-surface-bg));
}

.page[data-theme] .results-table tbody tr:hover {
    background: var(--theme-surface-alt);
}

.page[data-theme] :is(.competitor strong, .attempt-cell) {
    color: var(--theme-text);
}

.page[data-theme] :is(.competitor small, .rank-cell, .empty-attempt) {
    color: var(--theme-muted);
}

.page[data-theme] :is(.competitor a, .single-cell) {
    color: var(--theme-accent);
}

.page[data-theme] :is(.result-column, .result-cell) {
    background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface-bg));
    color: var(--theme-text);
}

.page[data-theme] :is(.timer-pagination button, .timer-pagination select, .timer-stat-time, .history-metric-time, .timer-text-command) {
    color: var(--theme-accent);
}

.page[data-theme] :is(.timer-stat-time, .history-time, .history-metric-time).is-personal-record {
    color: var(--theme-record-highlight);
    font-weight: 800;
}

.page[data-theme] :is(table, tbody, thead, tr, th, td) {
    border-color: var(--theme-border) !important;
    color: inherit;
}

.page[data-theme="system"] {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    .page[data-theme="system"] {
        --theme-page-bg: #111416;
        --theme-surface-bg: #1b2024;
        --theme-surface-alt: #252c31;
        --theme-text: #f3f5f7;
        --theme-muted: #aab4bc;
        --theme-accent: #55b6d9;
        --theme-accent-text: #071a24;
        --theme-border: #3a444c;
        --theme-record-highlight: #e7c843;
        --theme-sidebar-bg: #171b1f;
        --theme-sidebar-text: #f4f7f8;
    }
}

.login-panel,
.admin-panel {
    max-width: 28rem;
    margin-top: 1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}