:root {
  --page-shell-width: 1220px;
  color-scheme: light;
  font-family: Arial, "Malgun Gothic", sans-serif;
  background: #f4f6f8;
  color: #1e252d;
}

body {
  margin: 0;
}

.home-hero {
  padding: 56px 0 20px;
  text-align: center;
}

.home-hero h1 { font-size: clamp(34px, 7vw, 58px); margin: 4px 0; }
.home-kicker { color: #1f6feb; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.home-menu { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px auto 48px; max-width: 900px; }
.home-menu-card { align-items: center; background: #fff; border: 2px solid #d7e0eb; border-radius: 12px; color: #17202a; display: flex; justify-content: center; min-height: 72px; padding: 12px; text-align: center; text-decoration: none; }
.home-menu-card:hover { border-color: #1f6feb; box-shadow: 0 8px 24px rgba(31, 111, 235, .12); }
.home-menu-card strong { color: #173a62; font-size: 18px; }
.home-menu-card span { color: #637083; }
.home-menu-card.public { border-color: #3aa66f; }
.home-menu-card.settings { border-color: #8a94a3; }

@media (max-width: 640px) {
  .home-hero { padding-top: 28px; }
  .home-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-menu-card { min-height: 64px; padding: 10px; }
}

.topbar {
  background: #17202a;
  color: white;
}

.page-shell {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--page-shell-width);
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

.topbar-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  padding-top: 14px;
}

.topbar span,
.page-head p,
h2 span,
small {
  color: #637083;
  font-size: 12px;
  font-weight: 400;
}

.topbar a {
  color: white;
  margin-left: 16px;
  text-decoration: none;
}

.minimal-session-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.minimal-session-actions form {
  margin: 0;
}

.minimal-logout-button,
.judge-logout-button {
  background: transparent;
  border: 0;
  color: #637083;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 4px 0 2px 8px;
  text-decoration: underline;
}

main {
  padding-bottom: 20px;
  padding-top: 20px;
}

.page-head h1 {
  margin: 0;
}

.panel {
  background: white;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  margin-top: 16px;
  min-width: 0;
  padding: 16px;
}

.operator-tab-panel {
  min-width: 0;
}

.operator-workflow-section {
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  margin-top: 16px;
}

.operator-workflow-section > summary {
  align-items: center;
  color: #173a62;
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 16px;
}

.operator-workflow-section > summary::-webkit-details-marker { display: none; }
.operator-workflow-section > summary::before { content: "▶▶"; font-size: 20px; letter-spacing: -4px; line-height: 1; }
.operator-workflow-section[open] > summary::before { content: "▼▼"; }
.operator-workflow-section > summary strong { font-size: 22px; }
.operator-workflow-section > summary span { color: #637083; font-size: 14px; }
.operator-workflow-content { padding: 0 16px 16px; }
.operator-workflow-content > .panel:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .operator-workflow-section > summary { align-items: flex-start; gap: 7px; padding: 14px; }
  .operator-workflow-section > summary { flex-wrap: wrap; }
  .operator-workflow-section > summary span { flex-basis: calc(100% - 24px); margin-left: 24px; }
  .operator-workflow-content { padding: 0 10px 10px; }
}

.rollart-panel {
  border-top: 4px solid #285f9f;
}

/* Public results: screen-first competition report inspired by official RollArt reports. */
.public-results-page {
  --results-green: #008f4c;
  --results-green-dark: #006c3a;
  --results-green-soft: #e9f5ef;
  --krsf-blue: #0758b7;
  --krsf-red: #e5232c;
  --krsf-navy: #101f38;
  --results-ink: #173126;
  --results-line: #cbd8d1;
  box-sizing: border-box;
  margin: -20px -20px 24px;
  min-height: calc(100vh - 72px);
  padding: 0 20px 48px;
}

.results-hero {
  align-items: flex-end;
  background:
    linear-gradient(115deg, rgba(5, 36, 83, .98), rgba(0, 116, 78, .96) 62%, rgba(0, 143, 76, .92)),
    #0b314d;
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin: 0 -20px;
  min-height: 190px;
  overflow: hidden;
  padding: 30px 20px;
  position: relative;
}

.results-hero::after {
  border: 34px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
  height: 230px;
  position: absolute;
  right: 5%;
  top: -100px;
  width: 230px;
}

.results-hero::before {
  background: linear-gradient(90deg, var(--krsf-blue) 0 40%, var(--krsf-red) 40% 55%, var(--results-green) 55%);
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.results-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.results-brand-mark {
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  display: flex;
  height: 78px;
  justify-content: center;
  width: 78px;
}
.results-brand-mark img {
  box-sizing: border-box;
  height: 100%;
  object-fit: contain;
  padding: 11px;
  width: 100%;
}

.results-brand strong,
.results-brand span { display: block; }
.results-brand strong { font-size: 14px; letter-spacing: .08em; }
.results-brand span { color: rgba(255, 255, 255, .76); font-size: 10px; letter-spacing: .2em; margin-top: 4px; }
.results-hero-copy { position: relative; text-align: right; z-index: 1; }
.results-kicker { color: #b9f1d3; font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0 0 8px; }
.results-hero-copy h1 { font-size: clamp(32px, 5vw, 50px); letter-spacing: -.04em; margin: 0; }
.results-hero-copy > p:last-child { color: rgba(255, 255, 255, .78); margin: 9px 0 0; }

.results-toolbar {
  background: #fff;
  border: 1px solid #dbe4df;
  box-shadow: 0 8px 22px rgba(21, 61, 42, .08);
  display: grid;
  gap: 14px;
  grid-template-columns: 1.4fr 1fr 1fr;
  margin: -18px auto 24px;
  max-width: 1060px;
  padding: 18px;
  position: relative;
  z-index: 2;
}

.results-toolbar label > span {
  color: var(--results-green-dark);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 7px;
}

.results-toolbar small { margin-left: 4px; }
.results-toolbar select {
  background: #f9fbfa;
  border: 1px solid #bfcec6;
  border-radius: 2px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 12px;
  width: 100%;
}

.results-toolbar #public-competition:disabled {
  color: #111;
  opacity: 1;
  -webkit-text-fill-color: #111;
}

.results-document {
  background: #fff;
  border: 1px solid #d8dfdb;
  box-shadow: 0 10px 30px rgba(17, 53, 35, .07);
  margin: 0 auto;
  max-width: 1060px;
  min-height: 440px;
  padding: 28px 30px 18px;
}

.results-document-rule { background: linear-gradient(90deg, var(--krsf-blue) 0 16%, var(--krsf-red) 16% 21%, var(--results-green) 21%); height: 7px; margin: -28px -30px 26px; }
.results-document-head { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 17px; }
.results-document-identity { align-items: center; display: flex; gap: 13px; }
.results-document-identity > img { height: 44px; object-fit: contain; width: 44px; }
.results-event-name { color: var(--results-ink); font-size: 20px; font-weight: 800; margin: 0 0 5px; text-transform: uppercase; }
.results-event-meta { color: #66756d; font-size: 13px; margin: 0; }
.results-document-title { border-left: 3px solid var(--results-green); padding-left: 12px; text-align: right; }
.results-document-title span,
.results-document-title strong { display: block; }
.results-document-title span { color: var(--results-green-dark); font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.results-document-title strong { color: #617068; font-size: 12px; margin-top: 3px; }

.results-table-wrap { overflow-x: auto; }
.official-results-table { border-collapse: collapse; font-size: 13px; min-width: 820px; width: 100%; }
.official-results-table th {
  background: var(--results-green);
  border-bottom: 1px solid var(--results-green-dark);
  color: #fff;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 10px 8px;
  text-align: center;
}
.official-results-table th small { color: rgba(255, 255, 255, .75); display: block; margin-top: 2px; }
.official-results-table td { border-bottom: 1px solid var(--results-line); padding: 12px 8px; text-align: center; }
.official-results-table tbody tr:hover { background: var(--results-green-soft); }
.official-results-table .name-column,
.official-results-table .name-cell { text-align: center; }
.place-column { width: 54px; }
.total-column { width: 82px; }
.segment-place-column { width: 50px; }
.place-cell strong { color: var(--results-green-dark); font-size: 16px; }
.total-cell { color: var(--results-green-dark); font-size: 15px; font-weight: 900; }
.result-skater-link { background: none; border: 0; color: #163e2a; cursor: pointer; font: inherit; font-weight: 800; padding: 0; text-decoration: underline; text-decoration-color: #96c7aa; text-underline-offset: 3px; }

.results-empty-state { margin: 74px auto 86px; max-width: 520px; text-align: center; }
.results-empty-icon { border: 3px solid #8ebba2; border-radius: 50%; display: block; height: 46px; margin: 0 auto 17px; position: relative; width: 46px; }
.results-empty-icon::before,
.results-empty-icon::after { background: #8ebba2; content: ""; left: 11px; position: absolute; width: 24px; }
.results-empty-icon::before { height: 3px; top: 15px; }
.results-empty-icon::after { height: 3px; top: 25px; }
.results-empty-state strong { color: var(--results-ink); display: block; font-size: 19px; }
.results-empty-state p { color: #6d7b74; font-size: 14px; line-height: 1.65; margin: 10px auto 0; }
.starting-order-section { border-top: 1px solid var(--results-line); margin-top: 28px; padding-top: 20px; }
.starting-order-section > header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 10px; }
.starting-order-section > header span,
.starting-order-section > header strong { display: block; }
.starting-order-section > header span { color: var(--results-green-dark); font-size: 14px; font-weight: 900; letter-spacing: .08em; }
.starting-order-section > header strong { color: #52645a; font-size: 12px; margin-top: 3px; }
.starting-order-section > header small { color: #7a8981; }
.starting-order-table { border-collapse: collapse; font-size: 13px; min-width: 620px; width: 100%; }
.starting-order-table th { background: #eef2f0; color: #33483d; font-size: 12px; padding: 9px 10px; text-align: center; }
.starting-order-table th small { color: #78877f; display: block; margin-top: 2px; }
.starting-order-table td { border-bottom: 1px solid var(--results-line); padding: 11px 10px; text-align: center; }
.starting-order-table td:nth-child(2) { font-weight: 800; }
.starting-order-table td:first-child { color: var(--results-green-dark); width: 70px; }
.results-document-footer { border-top: 1px solid var(--results-line); color: #718078; display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .06em; padding-top: 12px; }

@media (max-width: 720px) {
  .public-results-page { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .results-hero { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .results-hero { align-items: flex-start; flex-direction: column; justify-content: center; min-height: 170px; }
  .results-brand { margin-bottom: 22px; }
  .results-brand-mark { border-radius: 14px; height: 62px; width: 62px; }
  .results-brand-mark img { padding: 9px; }
  .results-hero-copy { text-align: left; }
  .results-hero-copy > p:last-child { display: none; }
  .results-toolbar { grid-template-columns: 1fr; margin-top: -12px; }
  .results-document { padding: 22px 16px 14px; }
  .results-document-rule { margin: -22px -16px 20px; }
  .results-document-head { align-items: flex-start; gap: 16px; }
  .results-document-identity > img { height: 36px; width: 36px; }
  .results-event-name { font-size: 16px; }
  .results-document-title span { font-size: 14px; }
  .results-empty-state { margin: 58px auto 70px; }
}

@media print {
  .topbar,
  .results-hero,
  .results-toolbar { display: none; }
  .public-results-page { margin: 0; min-height: 0; padding: 0; }
  .results-document { border: 0; box-shadow: none; max-width: none; padding: 16px 0 0; }
  .results-document-rule { margin-left: 0; margin-right: 0; }
}

/* World Skate RollArt official-form layout, adapted to live HTML. */
.protocol-page { margin: 0 auto 36px; max-width: 1040px; }
.protocol-actions { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.protocol-actions a { color: #567d16; font-weight: 800; text-decoration: none; }
.protocol-actions button { margin: 0; }
.protocol-document { background: #e8e8e8; padding: 18px; }
.protocol-loading, .protocol-error { background: #fff; color: #555; padding: 100px 20px; text-align: center; }
.ws-protocol-sheet { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); box-sizing: border-box; color: #111; font-family: Arial, "Arial Narrow", sans-serif; margin: 0 auto 22px; min-height: 1290px; padding: 34px 30px 24px; width: 100%; }
.ws-title { text-align: center; }
.ws-title h1 { color: #638d1b; font-size: 22px; margin: 0 0 12px; }
.ws-title h2 { font-size: 17px; margin: 0 0 7px; }
.ws-summary { background: #fffde4; border: 2px solid #111; box-shadow: 4px 4px 0 #111; display: grid; grid-template-columns: 50px minmax(190px, 2.4fr) 78px repeat(4, minmax(72px, .8fr)); margin: 0 -8px 12px; min-width: 760px; padding: 9px 8px 8px; }
.ws-summary > div { align-content: space-between; display: grid; min-height: 72px; padding: 0 5px; text-align: center; }
.ws-summary small { color: #111; font-size: 11px; line-height: 1.15; }
.ws-summary strong { font-size: 16px; }
.ws-summary .ws-name { text-align: left; }
.ws-table-scroll { overflow-x: auto; }
.ws-elements-table, .ws-components-table { border-collapse: collapse; font-size: 11px; min-width: 760px; width: 100%; }
.ws-score-frame { border-bottom: 1px solid #777; border-left: 1px solid #777; border-right: 1px solid #777; }
.ws-elements-table { border: 0; }
.ws-elements-table th { background: #fff; border-bottom: 2px solid #111; color: #111; padding: 4px 3px; vertical-align: bottom; }
.ws-elements-table td { border: 0; padding: 3px 3px; text-align: center; }
.ws-elements-table .ws-element-gap td {
  background: linear-gradient(to bottom, transparent 3px, #d6d6d6 3px, #d6d6d6 4px, transparent 4px);
  height: 8px;
  padding: 0;
}
.ws-elements-table .ws-order { width: 22px; }
.ws-elements-table .ws-kind { font-weight: 800; text-align: left; width: 95px; }
.ws-elements-table .ws-code { font-weight: 900; text-align: left; width: 58px; }
.ws-elements-table .ws-info { text-align: left; width: 170px; }
.ws-elements-table .ws-base { font-weight: 700; width: 56px; }
.ws-elements-table .ws-qoe, .ws-elements-table .ws-mark { width: 30px; }
.ws-elements-table .ws-panel-score { font-weight: 700; text-align: right; width: 65px; }
.ws-elements-table sup { font-size: 9px; margin-left: 1px; }
.ws-elements-table .ws-invalid { color: #aaa; }
.ws-elements-table tfoot td { border-top: 0; font-size: 15px; font-weight: 900; padding: 9px 4px 14px; }
.ws-info-head { writing-mode: vertical-rl; }
.ws-components-table { background: #f1f1f1; margin: 0 8px; width: calc(100% - 16px); }
.ws-components-table th, .ws-components-table td { border-bottom: 1px solid #bbb; color: #111; padding: 5px 8px; text-align: center; }
.ws-components-table th { background: #e8e8e8; }
.ws-components-table th:first-child, .ws-components-table td:first-child { text-align: left; }
.ws-components-table tfoot td { font-size: 13px; font-weight: 900; padding: 10px 8px; text-align: right; }
.ws-deductions { align-items: center; display: grid; gap: 12px; grid-template-columns: auto 60px 1fr; min-height: 44px; padding: 10px 14px 12px; }
.ws-deductions span { text-align: center; }
.ws-legend { border-bottom: 2px dashed #222; font-size: 8px; margin: 0; padding: 0 0 8px; }
.ws-officials { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; padding: 8px; }
.ws-officials h3 { background: #ddd; border-bottom: 4px solid #999; display: inline-block; font-size: 12px; margin: 0 0 5px; }
.ws-officials p { display: grid; font-size: 10px; grid-template-columns: 92px 1fr; margin: 4px 0; }
.ws-footer { align-items: end; display: grid; font-size: 9px; grid-template-columns: 1fr 2fr 1fr; margin-top: 70px; text-align: center; }
.ws-footer b { font-size: 11px; }
.ws-footer span:first-child { text-align: left; }
.ws-footer span:last-child { text-align: right; }

@media (max-width: 720px) {
  .protocol-document { margin: 0 -20px; padding: 0; }
  .ws-protocol-sheet { box-shadow: none; min-height: 1165px; min-width: 900px; padding: 24px 18px; }
  .ws-title h1 { font-size: 18px; }
  .ws-summary { margin-left: 0; margin-right: 0; }
  .ws-footer { margin-top: 36px; }
}

@media print {
  .protocol-actions, .topbar { display: none; }
  .protocol-page { margin: 0; max-width: none; }
  .protocol-document { background: #fff; padding: 0; }
  .ws-protocol-sheet { box-shadow: none; break-after: page; margin: 0; min-height: 0; padding: 12mm 9mm 8mm; }
}

.protocol-screen-save-mode .topbar,
.protocol-screen-save-mode .protocol-actions { display: none; }
.protocol-screen-save-mode .page-shell { margin: 0 auto; padding-top: 0; }
.protocol-screen-save-mode .protocol-page { margin-top: 0; }
.protocol-screen-save-mode .protocol-document { background: #fff; padding-top: 0; }

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.event-setup-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.event-setup-grid label {
  display: block;
}

.event-setup-grid label > small {
  margin-left: 6px;
}

.event-setup-grid label > input,
.event-setup-grid label > select {
  box-sizing: border-box;
  display: block;
  margin-top: 6px;
  width: 100%;
}

.event-top-row,
.event-classification-row,
.official-name-row,
.event-action-row {
  grid-column: 1 / -1;
}

.event-top-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.event-top-row > label,
.event-top-row input,
.event-top-row select {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.event-top-row input[type="number"] {
  max-width: 64px;
  padding: 10px 4px;
  width: 64px;
}

.event-official-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 64px 64px 82px;
  justify-content: start;
}

.event-official-row label,
.event-official-row input,
.event-official-row select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.event-official-row .official-count-label {
  display: block;
  line-height: 1.05;
  text-align: center;
}

.event-official-row .official-count-field input {
  text-align: center;
}

.event-classification-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-classification-row > [hidden] {
  display: none !important;
}

.operator-tab-panel[data-tab-panel="setup"] label {
  column-gap: 6px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  row-gap: 6px;
}

.operator-tab-panel[data-tab-panel="setup"] label > small {
  grid-column: 2;
  margin-left: 0;
}

.operator-tab-panel[data-tab-panel="setup"] label > input,
.operator-tab-panel[data-tab-panel="setup"] label > select,
.operator-tab-panel[data-tab-panel="setup"] label > div {
  grid-column: 1 / -1;
  margin-top: 0;
}

.operator-tab-panel[data-tab-panel="setup"] th br {
  display: none;
}

.operator-tab-panel[data-tab-panel="setup"] th small {
  margin-left: 6px;
}

.official-name-placeholder {
  min-width: 0;
}

.official-name-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.official-name-row label,
.official-name-row input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.event-manager-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.event-manager-row label {
  grid-column: 1;
}

#technical-name-fields {
  margin-top: 8px;
}

.event-action-row {
  display: flex;
  gap: 8px;
}

.skater-setup-grid {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.skater-setup-grid label,
.skater-setup-grid input,
.skater-setup-grid select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.planned-save-status {
  color: #637083;
  font-size: 12px;
  margin: 10px 0 0;
}

.planned-save-status.saving {
  color: #285f9f;
}

.planned-save-status.saved {
  color: #18733b;
}

.planned-save-status.error {
  color: #b42318;
}

.music-file-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.music-file-control button {
  flex: 0 0 auto;
  margin-top: 0;
}

.music-file-status {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  color: #637083;
  background: #f5f7fa;
}

.music-file-status.saved {
  color: #18733b;
  border-color: #8fd19e;
  background: #f0fbf3;
}

.music-file-status.error {
  color: #b42318;
  border-color: #f0a29d;
  background: #fff4f3;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

input,
select,
button {
  border: 1px solid #bcc5d0;
  border-radius: 6px;
  font: inherit;
  padding: 10px;
}

td input,
td select,
td button {
  box-sizing: border-box;
  min-width: 64px;
  width: 100%;
}

button {
  background: #1f6feb;
  color: white;
  cursor: pointer;
  margin-top: 14px;
}

.form-panel button {
  align-self: end;
}

.setup-action {
  justify-self: start;
  min-width: 0;
  width: fit-content;
}

#competitions-table td:last-child button,
#events-table td:last-child button,
#skaters-table td:last-child button {
  display: inline-block;
  margin-right: 6px;
  min-width: 0;
  width: fit-content;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.table-scroll {
  overflow-x: auto;
}

.setup-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.technical-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.component-table-scroll {
  margin-top: 12px;
}

#events-table {
  min-width: 900px;
}

#competitions-table,
#skaters-table {
  min-width: 600px;
}

th,
td {
  border-bottom: 1px solid #e2e7ee;
  padding: 10px;
  text-align: left;
}

th {
  background: #dfe8f3;
  color: #173a62;
  font-size: 13px;
}

.element-group-start td {
  border-top: 8px solid #f4f6f8;
}

tbody tr:first-child.element-group-start td {
  border-top-width: 1px;
}

tbody tr.draggable-element-row {
  cursor: grab;
}

tbody tr.draggable-element-row.dragging,
tbody tr.technical-result-row.dragging,
.judge-element-row.dragging {
  background: #e9f2ff;
  box-shadow: inset 0 0 0 3px #1f6feb, 0 8px 18px rgba(31, 111, 235, 0.22);
  opacity: 0.82;
}

tbody tr.draggable-element-row.drag-over td,
tbody tr.technical-result-row.drag-over td,
.judge-element-row.drag-over {
  box-shadow: inset 0 5px 0 #1f6feb;
}

.technical-drag-handle,
.judge-drag-handle,
.planned-drag-handle {
  background: #eef2f6;
  border: 1px solid #9fb2c7;
  border-radius: 5px;
  color: #173a62;
  cursor: grab;
  font-weight: 800;
  margin: 0;
  min-width: 32px;
  padding: 5px 8px;
}

.technical-drag-handle:active,
.judge-drag-handle:active,
.planned-drag-handle:active {
  cursor: grabbing;
}

.group-blank {
  color: transparent;
}

.row-warning {
  background: #fff7df;
}

.row-error {
  background: #ffe8e6;
}

#segment-result-table tbody tr.row-warning td {
  background: #fff7df;
}

#segment-result-table tbody tr.row-error td {
  background: #ffe8e6;
}

#segment-result-table tbody tr.technical-result-row td {
  vertical-align: middle;
}

#segment-result-table {
  table-layout: fixed;
}

#segment-result-table th:nth-child(1),
#segment-result-table td:nth-child(1) { width: 44px; }
#segment-result-table th:nth-child(2),
#segment-result-table td:nth-child(2) { width: 156px; }
#segment-result-table th:nth-child(3),
#segment-result-table td:nth-child(3) { width: 192px; }
#segment-result-table th:nth-child(4),
#segment-result-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 82px;
}
#segment-result-table th:nth-child(5),
#segment-result-table td:nth-child(5) { width: 52px; }
#segment-result-table th:nth-child(6),
#segment-result-table td:nth-child(6),
#segment-result-table th:nth-child(7),
#segment-result-table td:nth-child(7) { width: 48px; }
#segment-result-table th:nth-child(8),
#segment-result-table td:nth-child(8),
#segment-result-table th:nth-child(9),
#segment-result-table td:nth-child(9),
#segment-result-table th:nth-child(10),
#segment-result-table td:nth-child(10) { width: 28px; }
#segment-result-table th:nth-child(11),
#segment-result-table td:nth-child(11),
#segment-result-table th:nth-child(12),
#segment-result-table td:nth-child(12) { width: 48px; }
#segment-result-table th:nth-child(13),
#segment-result-table td:nth-child(13) { width: 74px; }

.badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-right: 4px;
  min-width: 18px;
  padding: 5px 7px;
  text-align: center;
}

.badge.ok {
  background: #dff5e4;
  color: #196c2e;
}

.badge.warn {
  background: #ffe08a;
  color: #684900;
}

.badge.judge-call-badge {
  background: #e9f1ff;
  color: #173a62;
}

.badge.error {
  background: #df2f25;
  color: white;
}

.technical-code-with-controls {
  align-items: flex-start;
  display: inline-flex;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
}

.technical-part-controls {
  align-items: center;
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  margin-top: 0;
  white-space: nowrap;
}

.technical-part-controls button {
  background: #eef2f6;
  border: 1px solid #b8c5d4;
  border-radius: 4px;
  color: #173a62;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  padding: 3px 7px;
}

.technical-part-controls button:hover {
  background: #e2e9f2;
}

.technical-part-controls .technical-remove-part {
  font-size: 12px;
  height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  width: 20px;
}

.technical-kind-cell {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.technical-kind-main {
  align-items: center;
  display: flex;
  gap: 4px;
  min-height: 28px;
}

.technical-kind-cell .combo-kind-locked {
  color: #123f73;
  font-weight: 800;
}

.technical-call-control {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.technical-call-control .technical-element-stamp {
  background: #f4c542;
  border-color: #d6a900;
  color: #241d00;
  font-size: 12px;
  min-width: 48px;
  padding: 5px 8px;
}

.technical-call-control .technical-element-stamp.is-called {
  background: #2e9d57;
  border-color: #217740;
  color: #fff;
}

.technical-call-control .technical-element-stamp-cancel {
  background: #eef2f6;
  border-color: #b8c5d4;
  color: #173a62;
  font-size: 12px;
  min-width: 48px;
  padding: 5px 8px;
}

.technical-call-control .technical-element-stamp-cancel:disabled {
  cursor: default;
  opacity: 0.45;
}

.technical-call-control .element-time-stamp {
  margin: 6px 0 0 2px;
  white-space: nowrap;
}

.technical-kind-cell select {
  background: #fbfcfe;
  border: 1px solid #b8c5d4;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
  height: 30px;
  max-width: 104px;
  min-width: 104px;
  padding: 4px;
  width: 104px;
}

.technical-kind-cell button {
  align-items: center;
  background: #eef2f6;
  border: 1px solid #b8c5d4;
  border-radius: 4px;
  color: #173a62;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
  margin: 0;
  max-width: 48px;
  padding: 3px 7px;
  white-space: nowrap;
  width: 48px;
}

.technical-kind-cell .technical-remove-element,
.technical-kind-cell .judge-remove-element,
.remove-row.technical-remove-element {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
  font-size: 12px;
  height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  width: 20px;
}

.technical-kind-cell .technical-remove-element:hover,
.technical-kind-cell .judge-remove-element:hover,
.remove-row.technical-remove-element:hover {
  background: #195dbd;
  border-color: #195dbd;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend span {
  background: #f4f6f8;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  padding: 8px 10px;
}

.inline-controls {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.inline-controls label {
  min-width: 160px;
}

.operator-tab-panel[hidden] {
  display: none;
}

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

.technical-segment-controls label,
.technical-segment-controls select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.technical-segment-controls label {
  font-size: 14px;
  white-space: nowrap;
}

.technical-control-card {
  background: #f7f9fb;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px;
}

.technical-control-main-row {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.music-control,
.sequence-stopwatches,
.sequence-stopwatches > div,
.judge-timing-panel {
  align-items: center;
  display: flex;
  gap: 8px;
}

.music-control label {
  min-width: 180px;
}

.music-control {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.music-player-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: auto minmax(260px, 50%) auto;
  justify-content: start;
}

.music-control audio {
  height: 36px;
  width: 100%;
}

.music-player-row .judge-readiness {
  flex-wrap: nowrap;
  gap: 3px;
  white-space: nowrap;
}

.music-player-row .judge-readiness .ready,
.music-player-row .judge-readiness .waiting {
  padding: 4px 5px;
}

.music-meta {
  align-items: center;
  display: flex;
  gap: 8px;
}

.performance-control {
  align-items: center;
  border-top: 1px solid #e1e6ec;
  display: flex;
  gap: 6px;
  padding-top: 10px;
}

.performance-elapsed {
  background: #17202a;
  border-radius: 4px;
  color: #fff;
  font-family: Consolas, monospace;
  font-size: 16px;
  font-weight: 800;
  min-width: 92px;
  padding: 5px 8px;
  text-align: center;
}

.performance-control button {
  margin-top: 0;
  padding: 5px 8px;
}

.music-meta strong {
  white-space: nowrap;
}

.sequence-stopwatches {
  border-top: 1px solid #e1e6ec;
  margin-top: 12px;
  padding-top: 12px;
}

.sequence-stopwatches[hidden],
[data-sequence-card][hidden],
[data-free-skating-timing][hidden],
[data-judge-sequence-card][hidden] {
  display: none !important;
}

.sequence-stopwatches > div {
  border: 1px solid #d8dee6;
  padding: 6px 8px;
}

.sequence-stopwatches button {
  margin-top: 0;
  padding: 6px 9px;
}

.timer-phase {
  background: #eef2f6;
  border-radius: 4px;
  font-weight: 700;
  padding: 6px 8px;
}

.timer-phase.second-half {
  background: #ffd65a !important;
  border: 1px solid #a86d00;
  box-shadow: 0 0 0 2px #fff0bd;
  color: #513700;
  font-weight: 800;
}

.judge-timing-panel {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0;
  padding: 0;
}

.judge-timer-card {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #d8dee6;
  border-radius: 5px;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
}

.judge-timer-card > span:first-child {
  color: #173a62;
  font-size: 14px;
  font-weight: 700;
}

.judge-timer-card strong {
  font-size: 16px;
  white-space: nowrap;
}

.judge-timer-card .timer-phase {
  margin-left: auto;
  padding: 4px 6px;
  white-space: nowrap;
}

.element-time-stamp {
  color: #285f9f;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.technical-result-editor {
  display: grid;
  flex: 0 0 250px;
  gap: 4px;
  min-width: 230px;
}

.technical-result-editor select,
.technical-result-code {
  font-size: 12px;
  max-width: none;
}

.technical-result-spin-line {
  align-items: center;
  display: flex;
  gap: 3px;
}

.technical-result-spin-line .technical-part-controls {
  margin-left: 2px;
}

.technical-code-with-controls > .technical-result-code {
  flex: 0 0 132px;
  width: 132px;
}

#segment-result-table .technical-result-code {
  width: 132px;
}

.technical-result-main-line .technical-result-code {
  width: 132px;
}

.technical-result-foot,
.technical-result-direction,
.technical-result-edge {
  width: 48px;
}

.technical-result-position {
  width: 112px;
}

.technical-result-variation {
  width: 112px;
}

.technical-result-info {
  color: #173a62;
  font-size: 12px;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-panel {
  padding-bottom: 12px;
}

pre {
  background: #17202a;
  border-radius: 6px;
  color: white;
  margin: 0;
  min-height: 22px;
  overflow: auto;
  padding: 10px;
}

.score-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.score-strip span,
.result-strip span {
  background: #eef2f6;
  border-radius: 6px;
  padding: 8px 10px;
}

.score-strip .judge-status {
  border: 1px solid #d8dee6;
  font-weight: 700;
}

.score-strip .judge-status.finalized {
  background: #ffd65a;
  border-color: #d6a900;
  color: #513700;
}

.score-strip .judge-status.pending {
  background: #fff4d6;
  color: #7a4d00;
}

.result-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

#segment-result {
  margin-top: 10px;
}

.element-counts {
  margin-bottom: 10px;
}

#technical-element-counts {
  margin-top: 10px;
}

#segment-form > .grid {
  margin-bottom: 16px;
}

#planned-element-counts {
  margin-bottom: 22px;
}

.count-badge {
  background: #eef2f6;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  padding: 8px 10px;
}

.count-badge.over {
  background: #ffe8e6;
  border-color: #df2f25;
  color: #9f1f18;
  font-weight: 700;
}

.count-note {
  color: #637083;
  padding: 8px 0;
}

.section-title {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 18px;
}

.section-title h3 {
  margin: 0;
}

.section-title h3 span {
  color: #637083;
  font-size: 12px;
  font-weight: 400;
}

.component-grid {
  margin-bottom: 12px;
}

#segment-elements-table tbody tr.planned-rule-warning td {
  background: #ffe8e6;
}

.planned-part-rule-error {
  background: #ffe8e6;
  border: 1px solid #df2f25;
  border-radius: 5px;
  padding: 3px;
}

.planned-part-rule-mark {
  color: #b42318;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.planned-part-rule-mark[hidden] {
  display: none;
}

.planned-rule-warning-text {
  color: #9a6700;
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

.planned-calculation-row {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.planned-calculation-row .auto-base-preview {
  color: #173a62;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.planned-sequence-duration,
.technical-sequence-duration {
  align-items: center;
  color: #173a62;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.planned-sequence-duration[hidden] {
  display: none;
}

.technical-sequence-info {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 210px;
}

.technical-sequence-info > span {
  white-space: nowrap;
}

.planned-sequence-duration input,
.technical-sequence-duration input {
  font: inherit;
  padding: 4px 6px;
  width: 22ch;
}

.planned-time-cell {
  min-width: 46ch;
  vertical-align: top;
}

.planned-time-cell[hidden],
.planned-time-column[hidden] {
  display: none !important;
}

.planned-time-cell .planned-sequence-duration {
  align-items: center;
  display: flex;
  gap: 8px;
  width: 100%;
}

.planned-time-cell .planned-sequence-duration label {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

.planned-time-cell .planned-end-label[hidden] {
  display: none;
}

.planned-time-cell .planned-sequence-duration input {
  box-sizing: border-box;
  min-height: 34px;
  width: 18ch;
}

.technical-sequence-duration {
  font-size: 12px;
}

.technical-code-with-controls .technical-sequence-duration {
  margin-left: 4px;
}

.technical-sequence-duration input {
  font-size: 13px;
  width: 112px;
}

.technical-sequence-duration {
  margin-bottom: 3px;
}

#segment-elements-table .single-code-editor > select,
#segment-elements-table .combo-code-part > select {
  max-width: 22ch;
  width: min(100%, 22ch);
}

#segment-elements-table .planned-kind-select {
  min-width: 13ch;
  width: 13ch;
}

#segment-elements-table .planned-kind-controls {
  align-items: center;
  display: flex;
  gap: 6px;
  width: max-content;
}

#segment-elements-table .planned-kind-controls .technical-remove-element {
  flex: 0 0 20px;
  margin: 0;
}

.combo-code-editor {
  display: grid;
  gap: 6px;
}

.combo-code-editor[hidden],
.single-code-editor[hidden] {
  display: none;
}

.combo-code-parts {
  display: grid;
  gap: 6px;
}

.combo-code-part {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(110px, 1fr) auto 24px;
  align-items: start;
}

.combo-code-part:not(.spin-combo-part) {
  align-items: center;
  display: flex;
  gap: 6px;
  width: fit-content;
}

.combo-part-base {
  align-self: center;
  color: #173a62;
  font-size: 15px;
  font-weight: 800;
  min-width: 52px;
  white-space: nowrap;
}

.combo-code-part.spin-combo-part {
  column-gap: 3px;
  grid-template-columns: minmax(110px, 1fr) minmax(180px, 2fr) auto 24px;
}

.planned-spin-editor {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planned-spin-orientation {
  display: grid;
  gap: 2px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 44px);
}

.planned-spin-orientation select {
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  width: 44px;
}

.planned-spin-editor > [name="spin_position_code"],
.planned-spin-editor > [name="spin_variation_code"] {
  min-width: 0;
  width: 100%;
}

.spin-combo-part .combo-part-base {
  min-width: 38px;
}

.combo-code-part .remove-combo-part {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  line-height: 1;
}

.add-combo-part {
  margin-top: 0;
  padding: 8px;
}

.add-combo-part {
  justify-self: start;
  min-width: 0;
  width: fit-content;
}

.remove-combo-part {
  background: #637083;
}

.field-help {
  color: #637083;
  display: block;
  font-size: 11px;
  margin-top: 4px;
}

.hint {
  background: #eef5ff;
  border-left: 4px solid #285f9f;
  color: #173a62;
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 10px 12px;
}

.judge-page-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.judge-control-head {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.judge-load-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 2fr) repeat(2, minmax(130px, 1fr));
  grid-template-areas:
    "judge competition event ."
    "discipline category skater .";
  min-width: 0;
}

.judge-identity-field { grid-area: judge; }
.judge-competition-field { grid-area: competition; }
.judge-event-field { grid-area: event; }
.judge-discipline-field { grid-area: discipline; }
.judge-category-field { grid-area: category; }
.judge-skater-field { grid-area: skater; }

.judge-load-form label,
.judge-load-form select {
  min-width: 0;
  width: 100%;
}

.judge-load-form button,
.judge-submit-top,
.judge-submit-bottom {
  margin-top: 0;
}

.judge-active-skater-card {
  align-items: center;
  background: #f5f9fc;
  border: 1px solid #c8d7e5;
  border-radius: 7px;
  display: grid;
  gap: 10px 16px;
  grid-template-columns: auto minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(180px, 1.4fr) auto;
  padding: 13px 15px;
}

.judge-active-skater-card > div { display: grid; gap: 3px; min-width: 0; }
.judge-active-skater-card small { color: #6a7683; }
.judge-active-skater-card span,
.judge-active-skater-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.judge-active-skater-name strong { color: #173a62; font-size: 18px; }
#judge-ready-button { background: #f3c840; color: #28220c; font-weight: 800; }
#judge-ready-button.is-ready { background: #2e9d61; color: #fff; }
.judge-ready-control { align-items: center; display: flex; gap: 8px; justify-self: end; }
.judge-ready-control #judge-ready-button { font-size: 13px; min-width: 64px; padding: 7px 10px; }

@media (max-width: 720px) {
  .judge-active-skater-card { grid-template-columns: auto 1fr auto; }
  .judge-active-skater-card > div { grid-column: 1 / -1; }
  .judge-active-skater-card .judge-active-skater-name { grid-column: 1 / -1; }
}

.judge-submit-top.finalized,
.judge-submit-bottom.finalized {
  background: #f4c542;
  border-color: #d6a900;
  color: #241d00;
  font-weight: 800;
}

.judge-submit-top.finalized:hover,
.judge-submit-bottom.finalized:hover {
  background: #e8b92f;
  border-color: #c39a00;
}

.technical-final-result-row {
  align-items: center;
  border-top: 1px solid #d8e1eb;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
}

.technical-final-result-button.confirmed {
  background: #f4c542;
  border-color: #d6a900;
  color: #241d00;
  font-weight: 800;
}

.technical-final-result-button:not(.confirmed) {
  background: #f4c542;
  border-color: #d6a900;
  color: #241d00;
  font-weight: 800;
}

.technical-final-result-button.calls-complete {
  background: #2e9d57;
  border-color: #217740;
  color: #fff;
}

#technical-final-result-status { color: #687582; font-weight: 700; }
#technical-final-result-status.confirmed { color: #9a7200; }
#technical-final-result-status.calls-complete { color: #217740; }

.public-competition-controls {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 50%) auto auto;
  justify-content: start;
}

.public-competition-controls label > small { margin-left: 5px; }
.public-competition-controls select { box-sizing: border-box; display: block; margin-top: 6px; width: 100%; }
.public-competition-controls .published {
  background: #f4c542;
  border-color: #d6a900;
  color: #241d00;
}
@media (max-width: 720px) {
  .public-competition-controls { grid-template-columns: minmax(0, 1fr) auto auto; }
  .public-competition-controls button { min-width: 0; }
}

.judge-score-form {
  display: grid;
  gap: 16px;
}

.judge-section-title {
  margin: 0 0 12px;
}

.judge-elements-header,
.judge-element-row {
  display: grid;
  gap: 0;
  grid-template-columns: 42px 140px 290px 280px 60px 120px 56px 96px;
}

.judge-qoe-panel.referee-mode .judge-elements-header,
.judge-qoe-panel.referee-mode .judge-element-row {
  grid-template-columns: 42px 140px 280px 260px 60px 110px 56px 96px 96px;
}

.judge-elements-header {
  background: #dfe8f3;
  color: #173a62;
  font-size: 13px;
  font-weight: 700;
}

.judge-elements-header span,
.judge-element-row > div {
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e7ee;
  display: flex;
  min-height: 44px;
  padding: 8px 10px;
  min-width: 0;
}

.judge-elements-list {
  border-left: 1px solid #e2e7ee;
  border-right: 1px solid #e2e7ee;
  padding-bottom: 6px;
}

.judge-elements-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.judge-qoe-panel.solo-dance-mode .judge-elements-header,
.judge-qoe-panel.solo-dance-mode .solo-dance-element-row {
  grid-template-columns: 32px minmax(118px, 1fr) 132px 70px;
  min-width: 0;
  width: 100%;
}

.judge-qoe-panel.solo-dance-mode.referee-mode .judge-elements-header,
.judge-qoe-panel.solo-dance-mode.referee-mode .solo-dance-element-row {
  column-gap: 8px;
  grid-template-columns: 32px 150px 160px 70px 126px;
  min-width: 0;
  width: 100%;
}

.judge-qoe-panel.solo-dance-mode .judge-elements-header span,
.judge-qoe-panel.solo-dance-mode .solo-dance-element-row > div {
  min-height: 38px;
  padding: 5px 8px;
}

.judge-qoe-panel.solo-dance-mode .solo-dance-element-row {
  min-width: 0;
}

.judge-qoe-panel.solo-dance-mode .element-kind select,
.judge-qoe-panel.solo-dance-mode .element-code select {
  max-width: 100%;
}

.judge-element-row {
  background: #fff;
  min-width: 1084px;
}

.judge-element-row.referee-spin-row {
  min-width: 1140px;
}

.judge-element-row.referee-spin-row .element-info {
  overflow: hidden;
}

.judge-element-row.element-group-start {
  border-top: 8px solid #f4f6f8;
}

.judge-element-row:first-child.element-group-start {
  border-top-width: 0;
}

.judge-element-row.qoe-missing {
  background: #fffdf2;
}

.judge-element-row.row-warning {
  background: #fff7df;
}

.judge-element-row.row-error {
  background: #ffe8e6;
}

.judge-element-row.referee-reorder-row.element-group-start {
  cursor: grab;
}

.element-order,
.element-kind,
.element-code,
.element-base {
  font-weight: 700;
}

.element-code {
  background: #fbfcfe;
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.element-code:has(.technical-spin-editor) {
  overflow: visible;
  white-space: normal;
}

.element-base,
.element-mark,
.element-qoe {
  justify-content: center;
}

.element-calls {
  justify-content: center;
}

.judge-qoe-panel.judge-mode .element-calls {
  display: none;
}

.element-info {
  color: #2f3b49;
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.element-rule {
  flex-wrap: wrap;
  gap: 4px;
  overflow: hidden;
}

.call-select {
  background: #fbfcfe;
  border-radius: 4px;
  font-size: 13px;
  height: 34px;
  padding: 4px 6px;
  width: 90px;
}

.call-readonly {
  color: #173a62;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.technical-code-select {
  background: #fffdf0;
  border: 1px solid #b9c6d6;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  height: 30px;
  line-height: 1.1;
  min-width: 0;
  padding: 3px 4px;
  width: 100%;
}

.technical-code-with-controls > .technical-code-select {
  flex: 0 0 112px;
  width: 112px;
}

.technical-spin-editor {
  display: grid;
  flex: 0 0 260px;
  gap: 4px;
  grid-template-columns: 150px minmax(0, 1fr);
  width: 260px;
}

.technical-spin-main {
  display: grid;
  gap: 4px;
  grid-template-columns: 82px 42px 42px 46px;
  grid-column: 1 / -1;
}

.technical-spin-variation {
  grid-column: 1;
}

.technical-spin-editor > .technical-part-controls {
  grid-column: 2;
  grid-row: 3;
}

.technical-spin-info {
  align-items: center;
  color: #2f3b49;
  display: flex;
  font-size: 10px;
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  padding-left: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-spin-position,
.technical-spin-variation,
.technical-spin-foot,
.technical-spin-direction,
.technical-spin-edge {
  background: #fffdf0;
  border: 1px solid #b9c6d6;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  min-width: 0;
  padding: 2px 3px;
  width: 100%;
}

.qoe-stepper {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 28px 34px 28px;
  justify-content: center;
  width: 96px;
}

.qoe-step {
  background: #f7f9fc;
  border-color: #b8c3d0;
  color: #1e252d;
  font-weight: 700;
  margin: 0;
  padding: 6px 0;
}

.qoe-step:hover {
  background: #e9f1ff;
  border-color: #1f6feb;
}

.qoe-current {
  background: #fff;
  border: 1px solid #b8c3d0;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  font-weight: 700;
  line-height: 30px;
  min-height: 30px;
  text-align: center;
}

.qoe-limit-note,
.muted-cell {
  color: #637083;
  font-size: 11px;
  font-weight: 700;
}

.judge-component-grid label {
  background: #fbfcfe;
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  padding: 10px;
}

#component-guide {
  color: #173a62;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}

.component-score-field small {
  line-height: 1.35;
}

.component-preview {
  color: #173a62;
  font-weight: 700;
}

.deduction-editor,
.judge-deductions-panel {
  margin-top: 12px;
}

.deduction-editor .section-title {
  justify-content: flex-start;
}

.deduction-row.automatic-deduction {
  background: #fff4d8;
  color: #7a4d00;
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.deduction-list {
  display: grid;
  gap: 8px;
}

.deduction-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 90px minmax(180px, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.deduction-row select,
.deduction-row input {
  box-sizing: border-box;
  width: 100%;
}

.deduction-remove {
  min-width: 30px;
  padding: 6px 8px;
}

.judge-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  align-content: center;
  margin-left: 0;
}

.judge-readiness .ready,
.judge-readiness .waiting {
  border: 1px solid #cfd9e6;
  border-radius: 4px;
  padding: 5px 7px;
}

.judge-readiness .ready {
  background: #e2f5e7;
  color: #146c35;
}

.judge-readiness .waiting {
  background: #fff4d8;
  color: #8a5b00;
}

.judge-readiness .readiness-label {
  font-weight: 800;
}

.element-type-add {
  align-items: center;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 14px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  margin: 0 0 0 4px;
  max-width: 24px;
  min-width: 24px;
  padding: 0;
  vertical-align: middle;
  width: 24px;
}

.element-type-table-header {
  white-space: nowrap;
}

.judge-elements-header .element-type-header {
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 700px), (max-width: 950px) and (orientation: landscape) {
  .page-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  main {
    padding-bottom: 12px;
    padding-top: 12px;
  }

  .topbar-content {
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .topbar a {
    margin-left: 0;
  }

  .panel {
    margin-top: 12px;
    max-width: 100%;
    overflow: hidden;
    padding: 12px;
  }

  .technical-table-scroll {
    width: 100%;
  }

  #segment-result-table {
    min-width: 900px;
  }

  #component-result-table {
    min-width: 620px;
  }

  .page-head h1 {
    font-size: 24px;
  }

  .panel h2 {
    font-size: 20px;
  }

  input,
  select,
  button {
    padding: 8px;
  }

  button {
    margin-top: 8px;
  }

  table {
    font-size: 13px;
  }

  #competitions-table {
    display: block;
    min-width: 0;
  }

  #competitions-table thead {
    display: none;
  }

  #competitions-table tbody,
  #competitions-table tr,
  #competitions-table td {
    display: block;
    width: 100%;
  }

  #competitions-table tr {
    border: 1px solid #d8dee6;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 8px;
  }

  #competitions-table td {
    border-bottom: 0;
    padding: 5px 4px;
  }

  #competitions-table td:nth-child(1)::before { content: "대회명: "; font-weight: 700; }
  #competitions-table td:nth-child(2)::before { content: "규정: "; font-weight: 700; }
  #competitions-table td:nth-child(3)::before { content: "장소: "; font-weight: 700; }
  #competitions-table td:nth-child(4)::before { content: "날짜: "; font-weight: 700; }

  #competitions-table td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #competitions-table td:last-child button {
    margin: 2px 0 0;
  }

  .judge-control-head,
  .judge-load-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "judge"
      "competition"
      "event"
      "discipline"
      "category"
      "skater";
  }

  .judge-timing-panel {
    grid-template-columns: 1fr;
  }

  .event-setup-grid {
    grid-template-columns: 1fr;
  }

  .skater-setup-grid {
    grid-template-columns: 1fr;
  }

  .event-top-row,
  .event-official-row {
    grid-template-columns: 1fr;
  }

  .technical-segment-controls {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .technical-control-main-row,
  .music-control,
  .sequence-stopwatches {
    align-items: stretch;
    flex-direction: column;
  }

  .technical-control-main-row {
    grid-template-columns: 1fr;
  }

  .music-player-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .music-player-row .judge-readiness {
    grid-column: 1 / -1;
  }

  .official-name-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .official-name-placeholder {
    display: none;
  }

  .official-name-row input {
    padding-left: 6px;
    padding-right: 6px;
  }

  .event-manager-row {
    grid-template-columns: minmax(0, 210px);
  }

  .event-classification-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .judge-elements-header,
  .judge-element-row {
    min-width: 1084px;
  }

  .judge-qoe-panel.referee-mode .judge-elements-header,
  .judge-qoe-panel.referee-mode .judge-element-row {
    min-width: 1140px;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .panel {
    padding: 10px 12px;
  }
}

.auth-shell {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 150px);
}

.auth-card,
.settings-card {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: 460px;
  width: 100%;
}

.auth-card label,
.settings-card label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.auth-card input,
.settings-card input {
  box-sizing: border-box;
  width: 100%;
}

.auth-error {
  color: #b42318;
  font-weight: 700;
  margin: 0;
}

.auth-success {
  color: #067647;
  font-weight: 700;
  margin: 0;
}

.settings-note {
  color: #526174;
  margin: 0;
}

.topbar nav form {
  display: inline;
  margin: 0;
}

.nav-button {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  text-decoration: underline;
}
.bpm-card { margin-top: .65rem; padding: .65rem; border: 1px solid #cbd7e6; border-radius: 6px; background: #f7faff; }
.bpm-card label { display: inline-flex; align-items: center; gap: .35rem; margin-right: .65rem; }
.bpm-card input { width: 6.5rem; }
.bpm-heading, .bpm-test-row { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.bpm-heading { margin-bottom: .45rem; }
.bpm-test-row span { min-width: 5rem; font-weight: 700; }
.bpm-test-row button.bpm-test-complete { background: #188038; border-color: #188038; color: #fff; }
.element-live-timer { display: block; width: max-content; margin-top: .2rem; padding: .12rem .3rem; border-radius: 4px; background: #e8f1ff; color: #173f6b; font-weight: 700; white-space: nowrap; }
.element-live-timer[hidden] { display: none !important; }
.element-info .element-live-timer,
#segment-result-table td:nth-child(4) .element-live-timer { margin-left: auto; margin-right: auto; }
#segment-result-table td:nth-child(4) .element-live-timer { left: 50%; margin-left: 0; margin-right: 0; position: relative; transform: translateX(-50%); }
.element-live-timer.timer-precall { background: #c9f3d2; color: #0b6b2a; box-shadow: inset 0 0 0 2px #2fb45a; }
.element-live-timer.timer-active { background: #d9f5df; color: #146c2e; box-shadow: inset 0 0 0 1px #78c98d; }
.element-live-timer.timer-active.over-limit { background: #fde2e2; color: #b42318; box-shadow: inset 0 0 0 1px #e59a94; }
.element-live-timer.timer-complete { background: #e7e9ec; color: #6b7280; opacity: .68; box-shadow: none; }
.bpm-status-pass { color: #137333; }
.bpm-status-outside, .bpm-status-review { color: #b3261e; }
@media (max-width: 720px) {
  .bpm-card label { width: 100%; justify-content: space-between; margin: .2rem 0; }
  .bpm-test-row { display: grid; grid-template-columns: auto 1fr; }
}