/* WINNER brand layer. Keep scoring, attendance and photo geometry unchanged. */
:root {
  --primary: #111827;
  --background: #F8F7F4;
  --accent: #C9A227;
  --text: #292929;
  --secondary: #B8BCC2;
  --border: #E5E2DC;
  --navy: var(--primary);
  --navy-light: var(--primary);
  --gold: var(--accent);
  --gold-light: var(--accent);
  --paper: var(--background);
  --ink: var(--text);
  /* Silver is decorative; supporting text remains dark enough to read. */
  --muted: #555B65;
  --line: var(--border);
  --shadow: 0 8px 28px #11182708;
  color-scheme: light;
}
body, .stage-body, .stage-only, .stage-card:fullscreen {
  background: var(--background); color: var(--text);
}
::selection { background: var(--accent); color: var(--primary); }
.skip-link { background: var(--primary); color: var(--background); }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 4px;
}
.sidebar { background: var(--primary); border-color: var(--border); box-shadow: none; }
.brand { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 8px; color: var(--background); }
.brand-logo { display: block; width: 104px; height: 104px; object-fit: contain; border-radius: 10px; }
.brand-word { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: .6px; text-shadow: none; }
.brand-rule { background: var(--accent); margin-top: 10px; width: 44px; height: 2px; }
.nav-caption, .sidebar-footer p, .demo-tag { color: var(--secondary); }
.nav-caption { margin-top: 32px; }
.tabs button, .tabs a { color: var(--background); }
.tabs button > span[data-i18n] { text-shadow: none; }
.tabs button:hover, .tabs a:hover { background: #F8F7F410; color: var(--background); }
.tabs button.active { background: #C9A22718; color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tabs button.active .icon { filter: none; }
.active .nav-indicator, .demo-tag i { background: var(--accent); box-shadow: none; }
.sidebar-medallion { color: var(--accent); border-color: #C9A22766; background: transparent; }
.sidebar-divider { background: #B8BCC233; }
.topbar, .portal-header { background: var(--background); border-color: var(--border); box-shadow: none; }
.topbar { height: auto; min-height: 78px; padding-block: 16px; flex-wrap: wrap; }
.breadcrumb { color: var(--text); min-width: 0; }
.breadcrumb-brand { color: var(--primary); letter-spacing: .5px; font-weight: 600; line-height: 1.6; max-width: 290px; }
.breadcrumb-slash { color: var(--secondary); }
.clock-wrap, .session-user { color: var(--muted); }
.language-control { border-color: var(--border); }
.language-control > .icon { color: var(--primary); }
.language-control select, select option { background: var(--background); color: var(--text); }
.eyebrow, .metric-top, .metric-caption, .card-heading p, .field > span,
.connection-status, .contact-help, .empty-state, .portal-heading p, .portal-hint,
.portal-shell .empty-state, .stage-heading > div > p:last-child, .stage-event-heading p,
.stage-footer, .stage-pagination, .winner-total small, .tie-label, .covered-winner,
.criteria-help, .criterion-score small, .photo-status, .photo-consent, .stage-director-note,
.personal-result p, .result-caption, .score-person .muted, .main-footer,
.auth-card > p, .management-grid > .card > p { color: var(--muted); }
.page-heading h1, .portal-heading h1, .card-heading h2, .section-heading h2,
.stage-heading h2, .stage-event-heading h2, .stage-event-title,
.result-person, .score-person b, .winner-card h3 { color: var(--primary); text-shadow: none; }
.page-status, .stage-mode-badge { background: var(--background); color: var(--text); border-color: var(--accent); }
.status-dot { background: var(--accent); box-shadow: none; }
.section-rule, .stage-footer-line, .note-rule { background: var(--border); }
.section-heading .icon { color: var(--accent); }
.welcome-banner { background: var(--primary); border: 1px solid var(--primary); box-shadow: var(--shadow); }
.welcome-banner::after { background: var(--accent); opacity: 1; }
.banner-kicker { color: var(--accent); }
.gold-line { background: var(--accent); }
.welcome-copy h2 { color: var(--background); text-shadow: none; }
.welcome-copy > p { color: var(--secondary); }
.welcome-banner { gap: 20px; }
.welcome-copy { flex: 1 1 55%; width: auto; min-width: 0; max-width: none; }
.hero-partner-logos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 16px; flex: 0 1 42%; min-width: 0; padding: 24px 28px 24px 0; }
.hero-partner-logos img { display: block; width: 100%; height: 120px; object-fit: contain; }
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-width: 0; }
.brand-header > .brand-lockup { flex: 1 1 400px; margin: 0; }
.organization-logos { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.organization-logos img { display: block; width: 112px; height: 76px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.organization-logos img[alt="ORA"] { width: 76px; }
/* Optical alignment for the middle wordmark. Move the entire image without
   cropping; the proportional offset stays consistent on mobile and stage. */
.organization-logos img[alt="WIZARD LASHES"],
.hero-partner-logos img[alt="WIZARD LASHES"] { transform: translateY(-8%); }
.topbar > .brand-header { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.portal-header > .portal-tools { margin-left: auto; }
.stage-heading { flex-wrap: wrap; }
.stage-heading > .brand-header { flex-basis: 100%; }
.attendance-header > .brand-header { flex-basis: 100%; }
.btn.primary { background: var(--primary); color: var(--background); border: 1px solid var(--primary); box-shadow: none; text-shadow: none; }
.btn.gold { background: var(--accent); color: var(--primary); border: 1px solid var(--accent); box-shadow: none; text-shadow: none; }
.btn.primary:hover { background: var(--primary); box-shadow: 0 0 0 3px #C9A22744; }
.btn.gold:hover { background: var(--accent); box-shadow: 0 0 0 3px #C9A22744; }
.btn.ghost, .stage-button { background: transparent; color: var(--primary); border: 1px solid var(--secondary); }
.btn.ghost:hover, .stage-button:hover { background: #B8BCC21A; border-color: var(--primary); }
.welcome-banner .btn.ghost { color: var(--background); border-color: var(--secondary); }
.metric-card, .card, .stage-card { background: #fff; color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.metric, .score, .personal-result .score, .judge-score-total { color: var(--primary); text-shadow: none; }
.metric-icon, .metric-icon.blue, .metric-icon.violet, .metric-icon.green, .heading-icon {
  background: var(--background); color: var(--primary); border: 1px solid var(--border);
}
input, select, textarea { background: #fff; border-color: var(--border); color: var(--text); box-shadow: none; accent-color: var(--primary); }
input::placeholder { color: var(--muted); }
input:hover, select:hover { border-color: var(--secondary); }
input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px #fff inset; caret-color: var(--text);
}
select[multiple] option:checked { background: var(--primary) linear-gradient(var(--primary),var(--primary)); color: var(--background); }
.checkbox-field input, .photo-consent input { accent-color: var(--primary); }
th { background: var(--background); color: var(--primary); border-color: var(--border); }
td, .attendee-row, .attendance-history td { color: var(--text); border-color: var(--border); }
tbody tr:hover { background: var(--background); }
code { background: var(--background); color: var(--primary); border: 1px solid var(--border); }
.person-avatar, .empty-symbol { background: var(--background); color: var(--primary); border: 1px solid var(--border); }
.feedback, .demo-notice, .personal-result, .criterion-score, .score-field, .photo-field {
  background: var(--background); color: var(--text); border-color: var(--border); box-shadow: none;
}
.demo-notice .icon { color: var(--accent); }
.demo-notice summary:hover, .photo-consent a, .portal-shell .result-rank,
.criterion-score input, .score-field input, .main-footer > span:first-child { color: var(--primary); }
.score-field input:focus { background: #fff; border-color: var(--primary); }
.score-field input::placeholder { color: var(--muted); }
.judge-note { background: var(--primary); color: var(--background); border-color: var(--accent); box-shadow: none; }
.judge-note p { color: var(--secondary); }
.judge-note .eyebrow, .judge-note > .icon { color: var(--accent); }
.score-row, .score-row:first-child, .stage-only .score-row { background: #fff; border-color: var(--border); box-shadow: none; }
.score-row:first-child { border-color: var(--accent); }
.rank-number, .score-row:first-child .rank-number { color: var(--primary); }
.stage-card .empty-state { color: var(--muted); }
.stage-card .empty-symbol { color: var(--primary); background: var(--background); border-color: var(--border); }
.stage-brand, .stage-only-brand, .portal-brand {
  display: flex; align-items: center; gap: 14px; color: var(--primary);
  font: 600 18px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing: .7px; max-width: 100%; min-width: 0;
}
.brand-lockup .brand-logo { width: 72px; height: 72px; flex-shrink: 0; }
.brand-name { max-width: 470px; overflow-wrap: anywhere; }
.stage-only-header { border-color: var(--border); flex-wrap: nowrap; }
.stage-only .brand-lockup .brand-logo { width: 96px; height: 96px; }
.stage-only .stage-only-brand { font-size: clamp(18px,1.25vw,24px); }
.stage-only .organization-logos img { width: 144px; height: 96px; }
.stage-only .organization-logos img[alt="ORA"] { width: 96px; }
.podium-column { background: #fff; border-color: var(--border); }
.podium-1 { --medal: var(--accent); border-color: var(--accent); box-shadow: 0 8px 30px #C9A22714; }
.podium-2 { --medal: var(--secondary); }
.podium-3 { --medal: #A66F45; }
.medal { color: var(--primary); }
.medal span { background: var(--medal); color: var(--primary); border-color: var(--medal); box-shadow: 0 3px 12px #11182712; }
.medal span::before { background: var(--primary); }
.winner-total { color: var(--primary); }
.podium-base { color: var(--primary); border-color: var(--medal); background: var(--medal); }
.winner-portrait { filter: none; }
.portrait-placeholder { fill: var(--secondary); }
.winner-work, .work-placeholder, .photo-frame, .gate-portrait { background: var(--background); border-color: var(--border); }
.work-placeholder { color: var(--muted); }
.photo-preview { background: var(--background); border: 1px solid var(--border); }
.criterion-editor-row { border-color: var(--border); }
.attendance-summary { color: var(--primary); }
.attendance-page dialog { background: #fff; color: var(--text); border-color: var(--border); }
.attendance-page dialog::backdrop { background: #11182799; }
.gate-video { background: var(--primary); }
/* Semantic feedback retains distinct, readable success/error/warning colors. */
.badge, .stage-connection, .stage-mode-badge.is-live { color: #176044; background: #EEF6F1; border-color: #AFCFBE; }
.badge.pending, .attendance-warning { color: #785A12; }
.badge.pending { background: #FBF5E4; border-color: #DDC88A; }
.connection-status[data-error="true"], .feedback[data-error="true"], .stage-connection[data-error="true"] {
  color: #912B3D; background: #FFF1F3; border-color: #DBAFB9;
}
@media(max-width:1000px) {
  .welcome-banner { flex-direction: column; align-items: stretch; gap: 0; }
  .welcome-copy { width: 100%; padding-inline: 24px; }
  .hero-partner-logos { flex: 0 1 auto; padding: 0 24px 24px; }
  .hero-partner-logos img { height: 100px; }
  .organization-logos { gap: 8px; }
  .organization-logos img { width: 86px; height: 64px; }
  .organization-logos img[alt="ORA"] { width: 64px; }
  .stage-only .organization-logos img { width: 112px; height: 76px; }
  .stage-only .organization-logos img[alt="ORA"] { width: 76px; }
}
@media(max-width:700px) {
  .sidebar { padding: 16px; border-bottom: 1px solid var(--border); box-shadow: none; }
  .brand { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .brand .brand-logo { width: 64px; height: 64px; }
  .brand-word { font-size: 12px; max-width: 260px; }
  .brand-rule { margin-top: 5px; }
  .tabs button.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .breadcrumb-brand { max-width: 240px; font-size: 10px; }
  .welcome-copy { width: 100%; padding: 24px; }
  .welcome-copy h2 { font-size: 26px; }
  .hero-partner-logos { gap: 12px; }
  .hero-partner-logos img { height: 80px; }
  .brand-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .brand-header > .brand-lockup { flex: 0 1 auto; }
  .organization-logos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; width: 100%; }
  .organization-logos img, .organization-logos img[alt="ORA"] { width: 100%; height: 64px; }
  .brand-lockup .brand-logo { width: 60px; height: 60px; }
  .stage-only .brand-lockup .brand-logo { width: 60px; height: 60px; }
  .stage-only .stage-only-brand { font-size: 14px; }
  .stage-only .organization-logos img, .stage-only .organization-logos img[alt="ORA"] { width: 100%; height: 64px; }
  .portal-brand, .stage-brand, .stage-only-brand { font-size: 14px; letter-spacing: .4px; gap: 10px; }
  .stage-only-header { flex-wrap: wrap; gap: 10px; }
  .main-footer { flex-wrap: wrap; }
}
@media(forced-colors:active) {
  .card, .metric-card, .podium-column, input, select, .btn { border: 1px solid CanvasText; }
  .tabs button.active { outline: 2px solid Highlight; }
}
/* Admin brand editor uses the complete image, never crops uploaded logos. */
.brand-settings-card { margin-block: 24px; }
.brand-logo-editors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; min-width: 0; }
.brand-logo-editor { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: #fff; min-width: 0; }
.brand-logo-editor input { min-width: 0; max-width: 100%; font-size: .85rem; }
.brand-logo-editor .brand-logo-preview { display: block; margin: 16px auto 0; width: 100%; max-width: 220px; height: 150px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: repeating-conic-gradient(#E5E2DC 0% 25%,#F8F7F4 0% 50%) 50% / 20px 20px; }
@media(min-width:1400px){.brand-logo-editors { grid-template-columns: repeat(4,minmax(0,1fr)); }}
@media(max-width:600px){.brand-logo-editors { grid-template-columns: minmax(0,1fr); }.brand-logo-editor { padding: 14px; }}
.judge-roster-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 18px; padding: 22px 25px 0; }
.judge-roster-summary { padding: 14px 25px; margin: 0; color: var(--muted); }
.judge-roster-table { min-width: 930px; table-layout: fixed; }
.judge-directory .judge-roster-table th:nth-child(1) { width: 7%; }
.judge-directory .judge-roster-table th:nth-child(2) { width: 17%; }
.judge-directory .judge-roster-table th:nth-child(3) { width: 12%; }
.judge-directory .judge-roster-table th:nth-child(4) { width: 19%; }
.judge-directory .judge-roster-table th:nth-child(5) { width: 15%; }
.judge-directory .judge-roster-table th:nth-child(6) { width: 10%; }
.judge-directory .judge-roster-table th:nth-child(7) { width: 20%; }
.judge-roster-table td { vertical-align: top; overflow-wrap: anywhere; }
.judge-roster-table th { white-space: normal; }
.judge-roster-photo { display: block; width: 56px; height: 70px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
.judge-photo-missing { display: grid; place-items: center; text-align: center; padding: 5px; font-size: 10px; color: var(--muted); }
.judge-row-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; min-width: 170px; }
.judge-row-actions .btn { font-size: 11px; min-height: 38px; padding: 8px 11px; white-space: normal; max-width: 100%; }
.judge-row-actions small { width: 100%; color: var(--muted); }
.judge-recent-label { display: block; color: #785A12; margin-top: 6px; }
.judge-roster-table tr[data-recent="true"] { background: #FBF5E4; }
.judge-roster-table tr[data-recent="true"] td:first-child { border-left: 3px solid var(--accent); }
@media(max-width:700px) {
  .judge-roster-toolbar { grid-template-columns: 1fr; padding: 20px 18px 0; gap: 14px; }
  .judge-roster-summary { padding-inline: 18px; }
  .judge-roster-wrap { padding: 0 18px 18px; }
  .judge-roster-table, .judge-roster-table tbody { display: block; width: 100%; min-width: 0; }
  .judge-roster-table thead { display: none; }
  .judge-roster-table tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
  .judge-roster-table td { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 6px; min-width: 0; padding: 11px 12px; border: 0; font-size: 12px; }
  .judge-roster-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); }
  .judge-roster-table td[colspan] { display: block; }
  .judge-roster-table td[colspan]::before { content: none; }
  .judge-roster-table td>div[dir="ltr"] { grid-column: 2; }
  .judge-roster-table td>div:not(:first-of-type) { grid-column: 2; }
  .judge-row-actions { min-width: 0; }
  .judge-recent-label { grid-column: 2; }
}
.registration-ticket-dialog { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 18px; width: min(95vw,560px); max-height: 90vh; overflow: auto; padding: 24px; }
.registration-ticket-dialog::backdrop { background: #11182799; }
.registration-ticket-dialog .qr-ticket { display: block; width: min(100%,420px); height: auto; margin: 16px auto; }
.registration-ticket-dialog .qr-close { float: right; }
.brand-logo-preview { width: 180px; height: 180px; max-width: 100%; object-fit: contain; background: #F8F7F4; border: 1px solid #E5E2DC; border-radius: 12px; }