/* FFBGS fire theme: graphite, orange, gold, and warm white. */
:root {
    --ink: #090806;
    --navy: #302117;
    --pink: #ff710a;
    --mist: #fff7ee;
    --leaf: #f2bd45;
    --lime: #f2bd45;
    --text: #fff7ee;
    --muted: #c8bdb2;
    --panel: rgba(22, 19, 16, .96);
    --panel-soft: rgba(43, 32, 24, .92);
    --field: rgba(255, 247, 238, .075);
    --border: rgba(242, 189, 69, .28);
    --shadow: 0 22px 58px rgba(0, 0, 0, .48);
    --danger: #e85f69;
    --warning: #f2bd45;
    --success: #f2bd45;
    --caster-cyan: #ff710a;
    --caster-pink: #f2bd45;
    --caster-amber: #fff1df;
    --caster-surface: #17130f;
    --caster-surface-2: #2b2119;
    --caster-line: rgba(242, 189, 69, .22);
}

html {
    color-scheme: dark;
    background: #090806;
}

body,
.admin-shell-body,
.caster-schedule-body,
.registration-public-body,
.rulebook-body {
    color: var(--text);
    background-color: #090806;
    background-image:
        linear-gradient(115deg, rgba(255, 113, 10, .14) 0, transparent 30%, transparent 72%, rgba(242, 189, 69, .08) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px),
        linear-gradient(145deg, #080706 0%, #110d0a 45%, #1c1109 72%, #090806 100%);
    background-attachment: fixed;
    background-size: auto;
    animation: none;
}

body::before,
body::after,
.registration-public-body::before,
.registration-public-body::after,
.rulebook-body::before,
.rulebook-body::after {
    display: none;
    content: none;
}

a,
.back-link a,
.nav-user,
.notification-kicker,
code {
    color: #ff8b2e;
}

code {
    background: rgba(255, 113, 10, .11);
}

.navbar {
    border-bottom-color: rgba(242, 189, 69, .24);
    background: linear-gradient(100deg, rgba(8, 7, 6, .98), rgba(38, 23, 13, .97), rgba(12, 10, 8, .99));
    background-size: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .48);
    animation: none;
}

.navbar::after,
.admin-sidebar::after {
    background: linear-gradient(90deg, #5a2c0d, #ff710a 38%, #f2bd45 66%, #7a3b0d);
    background-size: auto;
    animation: none;
}

.brand-sub {
    color: rgba(255, 247, 238, .64);
}

.navlinks .nav-feature-link,
.notification-bell {
    border-color: rgba(242, 189, 69, .34);
    background: rgba(242, 189, 69, .08);
}

.navlinks .nav-feature-link:hover,
.notification-bell:hover {
    color: #0b0805;
    border-color: #f2bd45;
    background: #f2bd45;
}

.auth-side {
    background:
        linear-gradient(128deg, rgba(255, 113, 10, .16), transparent 38%),
        linear-gradient(145deg, #0a0806, #1d120b 55%, #3a1b08);
    background-size: auto;
    animation: none;
}

.auth-side::before {
    display: none;
}

.auth-panel,
.auth-box {
    background: rgba(14, 12, 10, .96);
}

.auth-box {
    border-color: rgba(242, 189, 69, .30);
    border-radius: 8px;
}

.palette-line {
    border-radius: 3px;
    background: linear-gradient(90deg, #ff710a, #f2bd45, #fff7ee, #ff710a);
    background-size: auto;
    animation: none;
}

.card,
.group-result-preview-card,
.result-feature-card,
.result-manage-card,
.room-manager-card,
.avatar-admin-card,
.avatar-select-card,
.team-profile-card,
.match-day-card,
.notification-popover,
.notification-modal-card,
.notification-history-card,
.universal-notice-card,
.team-status-result-card,
.server-insight-hero,
.insights-feature-card,
.traffic-metric-card,
.traffic-overview-card,
.match-data-tool-card,
.match-data-preview-card,
.registration-form-hero,
.registration-step,
.registration-preview-card,
.registration-success-card,
.registration-stopped-card {
    border-color: var(--border);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(32, 28, 24, .97), rgba(13, 12, 10, .98) 72%);
    box-shadow: var(--shadow);
    backdrop-filter: none;
    animation: none;
}

.card::before,
.universal-notice-card::before,
.team-status-result-card::before {
    background: linear-gradient(115deg, rgba(255, 113, 10, .78), rgba(242, 189, 69, .66), rgba(255, 247, 238, .18));
    background-size: auto;
    animation: none;
}

.card:hover,
.registration-form-hero:hover,
.registration-step:hover {
    transform: none;
    box-shadow: var(--shadow);
}

.room-box,
.result-box,
.result-fetch-form,
.room-manager-box,
.room-manager-group-form,
.avatar-select-form,
.avatar-live-preview,
.avatar-choice-panel,
.profile-admin-note-card,
.your-result-panel,
.normal-match-panel,
.normal-match-block,
.registration-live-preview-canvas,
.registration-question-card,
.registration-editable-field,
.registration-custom-question {
    border-color: rgba(242, 189, 69, .24);
    background: rgba(18, 16, 14, .86);
    animation: none;
}

.team-profile-chip,
.team-player-card,
.qualified-team-card,
.qualified-team-stats div,
.your-result-stats div,
.result-verification-summary div,
.admin-profile-detail-list div,
.registration-stats-row div,
.registration-preview-card div:not(.section-heading-row) {
    border-color: rgba(242, 189, 69, .18);
    background: rgba(255, 247, 238, .045);
}

.match-countdown-panel {
    border-color: rgba(255, 113, 10, .58);
    background:
        linear-gradient(115deg, rgba(255, 113, 10, .13), transparent 42%),
        rgba(13, 12, 10, .92);
}

.match-status-pill,
.countdown-unit strong,
.published-tag,
.count-pill,
.notification-count {
    color: #100b06;
    background: #f2bd45;
}

input,
textarea,
select,
.registration-public-body .registration-step input:not([type="file"]),
.registration-public-body .registration-step textarea,
.registration-public-body .registration-step select {
    color: #fff7ee;
    border-color: rgba(242, 189, 69, .22);
    border-radius: 6px;
    background-color: #241c16;
}

select option,
select optgroup,
.registration-public-body .registration-step select option {
    color: #fff7ee !important;
    background-color: #1b1612 !important;
}

select option:checked {
    color: #0b0805 !important;
    background-color: #f2bd45 !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 247, 238, .45);
}

input:focus,
textarea:focus,
select:focus,
.registration-public-body .registration-step input:focus,
.registration-public-body .registration-step textarea:focus,
.registration-public-body .registration-step select:focus {
    border-color: #ff8b2e;
    background-color: #2b211a;
    box-shadow: 0 0 0 3px rgba(255, 113, 10, .17);
}

input[readonly] {
    background: rgba(8, 7, 6, .72);
}

.btn,
.btn-pink,
.registration-public-body .registration-nav-row .btn-success {
    color: #100a05;
    border-radius: 6px;
    background: linear-gradient(110deg, #ff710a, #ff9a32);
    background-size: auto;
    box-shadow: 0 9px 22px rgba(255, 113, 10, .15);
    animation: none;
}

.btn::after {
    display: none;
}

.btn-success,
.copy-button,
.registration-live-submit,
.registration-upload-choose,
.registration-public-body .registration-upload-choose {
    color: #100b06;
    background: linear-gradient(110deg, #dca129, #f2bd45);
}

.btn-light,
.registration-public-body .registration-nav-row .btn-light {
    color: #1b130d;
    border-color: rgba(255, 247, 238, .48);
    background: #fff1df;
}

.btn-danger {
    color: #fff7ee;
    background: linear-gradient(110deg, #a62f38, #e85f69);
}

.table-wrap {
    border-color: rgba(242, 189, 69, .22);
    border-radius: 8px;
    background: rgba(8, 7, 6, .55);
}

th,
.registration-live-step-head {
    color: #fff7ee;
    background: #34251a;
}

th,
td {
    border-bottom-color: rgba(242, 189, 69, .13);
}

tbody tr:hover td {
    background: rgba(255, 113, 10, .065);
}

.rank-pill,
.guide-icon,
.registration-live-question-head > span {
    color: #110b06;
    background: linear-gradient(135deg, #f2bd45, #ff8b2e);
}

.badge-qualified,
.result-status-pill.status-valid,
.result-status-pill.status-qualified {
    color: #0d0a05;
    background: #f2bd45;
}

.badge-disqualified,
.result-status-pill.status-disqualified,
.result-status-pill.status-duplicate-uid-conflict {
    color: #fff7ee;
    background: #d94b36;
}

.badge-not-qualified,
.badge-manual-review,
.badge-pending,
.result-status-pill.status-not-qualified,
.result-status-pill.status-manual-review {
    color: #120c06;
    background: #ff8b2e;
}

.alert-success,
.info-strip {
    color: #ffe8b0;
    border-color: rgba(242, 189, 69, .48);
    background: rgba(120, 78, 13, .30);
}

.room-note,
.registration-sheet-warning,
.prompt-panel {
    color: #ffd4ac;
    border-color: rgba(255, 113, 10, .34);
    background: rgba(255, 113, 10, .09);
}

.admin-sidebar {
    border-right-color: rgba(242, 189, 69, .22);
    background:
        linear-gradient(180deg, rgba(255, 113, 10, .055), transparent 28%),
        #0e0c0a;
    box-shadow: 14px 0 34px rgba(0, 0, 0, .44);
}

.admin-sidebar-brand,
.admin-navlinks a,
.admin-nav-group,
.admin-profile-mini {
    border-color: rgba(242, 189, 69, .16);
    background: rgba(255, 247, 238, .045);
}

.admin-profile-mini {
    background: linear-gradient(135deg, rgba(242, 189, 69, .09), rgba(255, 113, 10, .07));
}

.admin-navlinks a:hover,
.admin-navlinks a.is-active,
.admin-nav-group summary:hover,
.admin-nav-group summary.is-active {
    color: #100a05;
    border-color: #f2bd45;
    background: linear-gradient(110deg, #f2bd45, #ff8b2e);
}

.admin-nav-group-items {
    border-top-color: rgba(242, 189, 69, .14);
    background: #0b0908;
}

.admin-profile-avatar,
.admin-profile-large-avatar {
    border-color: rgba(242, 189, 69, .58);
    background: linear-gradient(135deg, #f2bd45, #ff710a);
}

.notification-popover,
.notification-modal-card,
.universal-notice-card,
.team-status-result-card,
.image-lightbox-dialog {
    border-color: rgba(242, 189, 69, .34);
    background: #17130f;
}

.registration-public-body {
    --registration-surface: #1d1814;
    --registration-surface-strong: #100d0a;
    --registration-surface-soft: #2c2119;
    --registration-line: rgba(255, 247, 238, .15);
    --registration-line-strong: rgba(242, 189, 69, .52);
    --registration-copy: #fff7ee;
    --registration-muted: #c8bdb2;
    --registration-accent: #f2bd45;
    --registration-pink: #ff710a;
}

.registration-public-body .navbar,
.registration-public-body .registration-progress-widget,
.registration-public-body .registration-inline-editor-panel {
    border-color: rgba(242, 189, 69, .22);
    background: rgba(14, 12, 10, .97);
}

.registration-public-body .registration-form-hero,
.registration-public-body .registration-step,
.registration-public-body .registration-success-card,
.registration-public-body .registration-stopped-card {
    background:
        linear-gradient(115deg, rgba(255, 113, 10, .07), transparent 38%),
        linear-gradient(145deg, #211b16, #100d0a);
}

.registration-public-body .registration-step-indicator span {
    color: var(--registration-muted);
    border-color: rgba(242, 189, 69, .16);
    background: #17130f;
}

.registration-public-body .registration-step-indicator span.is-active {
    color: #100a05;
    border-color: #f2bd45;
    background: linear-gradient(110deg, #f2bd45, #ff8b2e);
    box-shadow: none;
}

.registration-public-body .registration-step-indicator span.is-active::before {
    color: #fff7ee;
    border-color: #20130a;
    background: #20130a;
}

.registration-public-body .registration-progress-track span {
    background: linear-gradient(90deg, #ff710a, #f2bd45);
}

.registration-public-body .member-field-card,
.registration-public-body .registration-upload-card,
.registration-public-body .registration-upload-preview,
.registration-public-body .registration-preview-card.professional-review-card {
    border-color: rgba(242, 189, 69, .18);
    background: rgba(11, 9, 8, .48);
}

.caster-schedule-body,
.caster-admin-shell {
    --caster-cyan: #ff710a;
    --caster-pink: #f2bd45;
    --caster-amber: #fff1df;
    --caster-surface: #17130f;
    --caster-surface-2: #2b2119;
    --caster-line: rgba(242, 189, 69, .22);
}

.caster-public-toolbar,
.caster-schedule-card,
.caster-detail-dialog,
.caster-dialog-head,
.caster-source-panel,
.caster-admin-schedule,
.caster-directory-row,
.caster-stat-strip div {
    border-color: var(--caster-line);
    background: var(--caster-surface);
}

.caster-view-tabs,
.caster-source-switch,
.caster-switch-track,
.caster-calendar-day,
.caster-staff-card-photo {
    background: #0e0c0a;
}

.caster-view-tabs button.is-active,
.caster-source-switch input:checked + span,
.caster-schedule-date-block {
    color: #100a05;
    background: linear-gradient(110deg, #f2bd45, #ff8b2e);
}

.caster-role-chip.role-caster {
    color: #fff7ee;
    background: #d6530a;
}

.caster-role-chip.role-broadcaster {
    color: #110b06;
    background: #f2bd45;
}

.caster-role-chip.role-management {
    color: #1a130d;
    background: #fff1df;
}

.post-banner-canvas-badge {
    color: #100a05;
    border-color: rgba(242, 189, 69, .55);
    background: #f2bd45;
}

/* Runtime theme controls. Values are supplied by Website, Tournament or Form settings. */
html {
    background: var(--theme-background) !important;
}

body,
.admin-shell-body,
.caster-schedule-body,
.registration-public-body,
.rulebook-body {
    color: var(--theme-text) !important;
    background-color: var(--theme-background) !important;
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 12%, transparent), transparent 34%, color-mix(in srgb, var(--theme-secondary) 7%, transparent)) !important;
    background-attachment: scroll !important;
}

.registration-public-body {
    --registration-surface: var(--theme-surface);
    --registration-surface-strong: var(--theme-background);
    --registration-surface-soft: var(--theme-surface-alt);
    --registration-line: color-mix(in srgb, var(--theme-text) 15%, transparent);
    --registration-line-strong: color-mix(in srgb, var(--theme-secondary) 52%, transparent);
    --registration-copy: var(--theme-text);
    --registration-muted: var(--theme-muted);
    --registration-accent: var(--theme-secondary);
    --registration-pink: var(--theme-primary);
}

.caster-schedule-body,
.caster-admin-shell {
    --caster-cyan: var(--theme-primary);
    --caster-pink: var(--theme-secondary);
    --caster-amber: var(--theme-text);
    --caster-surface: var(--theme-surface);
    --caster-surface-2: var(--theme-surface-alt);
    --caster-line: color-mix(in srgb, var(--theme-secondary) 24%, transparent);
}

a,
.back-link a,
.nav-user,
.notification-kicker,
code {
    color: var(--theme-link);
}

.navbar,
.admin-sidebar,
.registration-public-body .navbar,
.caster-public-nav {
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-background) 94%, var(--theme-surface)) !important;
}

.navbar::after,
.admin-sidebar::after,
.registration-public-body .navbar::after {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important;
}

.card,
.group-result-preview-card,
.result-feature-card,
.result-manage-card,
.room-manager-card,
.avatar-admin-card,
.avatar-select-card,
.team-profile-card,
.match-day-card,
.notification-popover,
.notification-modal-card,
.notification-history-card,
.universal-notice-card,
.team-status-result-card,
.server-insight-hero,
.insights-feature-card,
.traffic-metric-card,
.traffic-overview-card,
.match-data-tool-card,
.match-data-preview-card,
.registration-form-hero,
.registration-step,
.registration-preview-card,
.registration-success-card,
.registration-stopped-card,
.caster-public-toolbar,
.caster-schedule-card,
.caster-detail-dialog,
.caster-dialog-head,
.caster-source-panel,
.caster-admin-schedule,
.caster-directory-row,
.caster-stat-strip div {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: linear-gradient(145deg, var(--theme-surface-alt), var(--theme-surface) 72%) !important;
}

.card::before,
.universal-notice-card::before,
.team-status-result-card::before {
    background: linear-gradient(115deg, var(--theme-primary), var(--theme-secondary), color-mix(in srgb, var(--theme-text) 18%, transparent)) !important;
}

input,
textarea,
select,
.theme-preview-field,
.registration-public-body input,
.registration-public-body textarea,
.registration-public-body select,
.registration-public-body .member-field-card,
.registration-public-body .registration-upload-card,
.registration-public-body .registration-upload-preview,
.registration-public-body .registration-preview-card.professional-review-card {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-surface-alt) 82%, var(--theme-background)) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-focus) !important;
    background: var(--theme-surface-alt) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-focus) 22%, transparent) !important;
}

.btn,
.copy-button,
button[type="submit"] {
    color: var(--theme-button-text) !important;
    background: var(--theme-button) !important;
}

.btn::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-shine) 72%, transparent), transparent) !important;
}

.btn:hover,
.copy-button:hover:not(:disabled),
button[type="submit"]:hover,
.admin-navlinks > a:hover,
.admin-nav-group summary:hover,
.admin-nav-group-items a:hover,
.notification-bell:hover,
.navlinks a:hover {
    color: var(--theme-hover-text) !important;
    border-color: var(--theme-shine) !important;
    background: var(--theme-hover) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-shine) 54%, transparent), 0 9px 24px color-mix(in srgb, var(--theme-hover) 24%, transparent) !important;
    text-decoration: none;
}

input:hover,
textarea:hover,
select:hover,
.card:hover {
    border-color: var(--theme-shine) !important;
}

a:not(.btn):hover {
    color: var(--theme-shine) !important;
    text-shadow: 0 0 12px color-mix(in srgb, var(--theme-shine) 65%, transparent);
}

.btn-success,
.count-pill,
.rank-pill,
.badge-qualified,
.caster-view-tabs button.is-active,
.caster-source-switch input:checked + span,
.caster-schedule-date-block {
    color: var(--theme-on-secondary) !important;
    background: var(--theme-secondary) !important;
}

.btn-light {
    color: var(--theme-background) !important;
    background: var(--theme-text) !important;
}

.btn-danger,
.badge-disqualified,
.badge-not-qualified {
    color: #FFFFFF !important;
    background: var(--theme-danger) !important;
}

.page-title,
.card-title,
.team-name,
label,
th,
.registration-public-body .registration-form-hero .page-title,
.registration-public-body .registration-step .card-title {
    color: var(--theme-text) !important;
}

.page-lead,
.card-note,
.input-help,
.small,
.team-meta,
.registration-public-body .registration-form-hero .page-lead {
    color: var(--theme-muted) !important;
}

.eyebrow,
.registration-question-number,
.registration-public-body .registration-review-edit {
    color: var(--theme-secondary) !important;
}

.admin-navlinks > a,
.admin-nav-group summary,
.admin-nav-group-items a,
.admin-profile-mini {
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-surface-alt) 82%, var(--theme-background)) !important;
}

.admin-navlinks > a.is-active,
.admin-nav-group summary.is-active {
    color: var(--theme-on-primary) !important;
    background: linear-gradient(100deg, var(--theme-secondary), var(--theme-primary)) !important;
}

.admin-nav-group-items {
    border-color: color-mix(in srgb, var(--theme-secondary) 14%, transparent) !important;
    background: color-mix(in srgb, var(--theme-background) 94%, var(--theme-surface)) !important;
}

body .admin-navlinks > a:hover,
body .admin-nav-group summary:hover,
body .admin-nav-group-items a:hover {
    color: var(--theme-hover-text) !important;
    border-color: var(--theme-shine) !important;
    background: var(--theme-hover) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-shine) 54%, transparent), 0 9px 24px color-mix(in srgb, var(--theme-hover) 24%, transparent) !important;
}

.registration-public-body .registration-step-indicator span {
    color: var(--theme-muted) !important;
    border-color: color-mix(in srgb, var(--theme-secondary) 18%, transparent) !important;
    background: var(--theme-surface) !important;
}

.registration-public-body .registration-step-indicator span.is-active {
    color: var(--theme-on-secondary) !important;
    border-color: var(--theme-secondary) !important;
    background: linear-gradient(110deg, var(--theme-secondary), var(--theme-primary)) !important;
}

.registration-public-body .registration-step-indicator span.is-active::before {
    color: var(--theme-on-primary) !important;
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
}

.registration-public-body .registration-progress-track span {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Team login: tournament artwork stays visible while the form remains readable. */
.user-login-page {
    min-height: 100vh;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--theme-background) 34%, transparent), color-mix(in srgb, var(--theme-background) 8%, transparent) 48%, color-mix(in srgb, var(--theme-background) 48%, transparent)),
        var(--login-background-image),
        linear-gradient(135deg, var(--theme-background), var(--theme-surface-alt)) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.user-login-page .login-page {
    width: min(1600px, 100%);
    margin-inline: auto;
    place-items: center end;
    padding-inline: clamp(20px, 7vw, 110px);
}

.user-login-page .login-only-box {
    background: color-mix(in srgb, var(--theme-surface) 78%, transparent) !important;
    box-shadow: 0 18px 46px color-mix(in srgb, var(--theme-background) 68%, transparent);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

/* Theme editor */
.theme-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 22px;
    align-items: start;
}

.theme-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.theme-color-field {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--theme-surface-alt) 58%, transparent);
}

.theme-color-field > span:first-child {
    display: block;
    margin-bottom: 8px;
}

.theme-color-control {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
}

.theme-color-control input[type="color"] {
    width: 48px;
    min-height: 44px;
    padding: 3px;
    cursor: pointer;
}

.theme-live-preview {
    --preview-background: var(--theme-background);
    --preview-surface: var(--theme-surface);
    --preview-surface-alt: var(--theme-surface-alt);
    --preview-primary: var(--theme-primary);
    --preview-secondary: var(--theme-secondary);
    --preview-text: var(--theme-text);
    --preview-muted: var(--theme-muted);
    --preview-border: var(--theme-border);
    --preview-button: var(--theme-button);
    --preview-button-text: var(--theme-button-text);
    --preview-hover: var(--theme-hover);
    --preview-hover-text: var(--theme-hover-text);
    --preview-shine: var(--theme-shine);
    position: sticky;
    top: 24px;
    padding: 22px;
    color: var(--preview-text);
    border: 1px solid var(--preview-border);
    border-radius: 8px;
    background: var(--preview-background);
}

.theme-live-preview > span { color: var(--preview-primary); font-size: 11px; font-weight: 900; }
.theme-live-preview h3 { margin: 10px 0 7px; color: var(--preview-text); }
.theme-live-preview p { color: var(--preview-muted); }
.theme-preview-field { margin: 18px 0; padding: 12px; color: var(--preview-text) !important; border-color: var(--preview-secondary) !important; background: var(--preview-surface-alt) !important; }
.theme-preview-actions { display: flex; gap: 8px; }
.theme-preview-actions b,
.theme-preview-actions i { flex: 1; padding: 11px; border-radius: 6px; text-align: center; font-style: normal; }
.theme-preview-actions b { color: var(--preview-button-text); background: var(--preview-button); }
.theme-preview-actions i { color: var(--preview-background); background: var(--preview-secondary); }
.theme-preview-actions b:hover,
.theme-preview-actions i:hover { color: var(--preview-hover-text); background: var(--preview-hover); box-shadow: 0 0 14px var(--preview-shine); }
.theme-editor.is-inherited .theme-color-grid { opacity: .48; }
.theme-inherit-toggle { margin: 0; }
.theme-preset-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.theme-preset-select { display: grid; width: min(310px, 100%); gap: 6px; }
.theme-preset-select span { color: var(--theme-muted); font-size: 12px; font-weight: 850; }
.theme-preset-select select { width: 100%; }
.theme-save-row { margin-top: 20px; }
.theme-login-background-preview { width: 100%; max-height: 260px; margin-top: 12px; border: 1px solid var(--border); border-radius: 7px; object-fit: cover; aspect-ratio: 16 / 9; }

.email-theme-preview { padding: 12px; }
.email-theme-preview-banner { display: block; width: 100%; aspect-ratio: 4 / 1; margin-bottom: 12px; border: 0; border-radius: 5px; object-fit: cover; background: var(--preview-surface-alt); }
.email-theme-preview-shell { overflow: hidden; border: 1px solid var(--preview-border); border-radius: 7px; background: var(--preview-surface); }
.email-theme-preview-head { padding: 12px 15px; color: var(--preview-primary); background: var(--preview-surface-alt); font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.email-theme-preview-body { padding: 18px 15px; }
.email-theme-preview-body h3 { margin-top: 0; }
.email-theme-preview-button { display: inline-block; margin-top: 10px; padding: 9px 13px; color: var(--preview-button-text); border-radius: 5px; background: var(--preview-button); font-weight: 900; }

/* Less paint work on phones and long registration/rulebook pages. */
.registration-public-body .registration-step[hidden] { display: none !important; }
.registration-public-body .registration-step,
.rulebook-content > * { contain: layout paint; }

@media (max-width: 850px) {
    .theme-settings-layout,
    .theme-color-grid { grid-template-columns: 1fr; }
    .theme-live-preview { position: static; }
    .user-login-page .login-page { place-items: center; padding: 18px; }
    .user-login-page .login-only-box {
        background: color-mix(in srgb, var(--theme-surface) 92%, transparent) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .registration-public-body,
    .rulebook-body { background-image: linear-gradient(145deg, var(--theme-background), var(--theme-surface)) !important; }
    .registration-public-body .registration-form-hero,
    .registration-public-body .registration-step,
    .rulebook-main .card { box-shadow: 0 8px 22px rgba(0, 0, 0, .22) !important; }
    .registration-public-body .registration-form-hero::before,
    .registration-public-body .registration-step::before,
    .rulebook-main .card::before { display: none !important; }
}

.post-banner-variant-qualified {
    border-top-color: #f2bd45;
}

.post-banner-variant-disqualified {
    border-top-color: #ff710a;
}

.post-banner-background-thumb,
.post-banner-canvas-wrap,
.team-result-banner-stage {
    border-color: rgba(242, 189, 69, .30);
    background: #090806;
}

.post-banner-element-row,
.post-banner-json-panel {
    border-color: rgba(242, 189, 69, .19);
    background: rgba(255, 247, 238, .035);
}

.post-banner-import-status,
.post-banner-preview-status {
    color: #f2bd45;
}

.site-footer {
    border-top-color: rgba(242, 189, 69, .18);
    background: rgba(9, 8, 6, .82);
}

@media (max-width: 980px) {
    .admin-sidebar {
        border-bottom-color: rgba(242, 189, 69, .22);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .btn:hover,
    .copy-button:hover:not(:disabled) {
        transform: translateY(-1px);
    }
}