html,
body {
  min-height: 100%;
}
body {
  background-color: #0f1720;
  color: #e8edf2;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.app-navbar {
  background-color: #17212c;
  border-bottom: 1px solid #26323f;
}
.app-title {
  font-size: 2rem;
  font-weight: 700;
}
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1720;
  --bs-body-color: #e8edf2;
  --bs-border-color: #26323f;
  --bs-secondary-color: #93a1b0;
}
.btn-primary {
  --bs-btn-bg: #22c55e;
  --bs-btn-border-color: #22c55e;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
  --bs-btn-disabled-bg: #22c55e;
  --bs-btn-disabled-border-color: #22c55e;
  --bs-btn-color: #04120a;
  --bs-btn-hover-color: #04120a;
  --bs-btn-active-color: #04120a;
  --bs-btn-disabled-color: #04120a;
}
.btn-lg {
  min-height: 56px;
  border-radius: 12px;
}
.form-control-lg {
  min-height: 56px;
  border-radius: 12px;
}
.error-page .error-code {
  font-size: 4rem;
  font-weight: 700;
  color: #93a1b0;
  margin-bottom: 0.5rem;
}
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.page-header .page-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0;
}
.page-header .page-header-action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.subsection-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.card-title-small {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93a1b0;
  margin-bottom: 0.5rem;
}
.empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #93a1b0;
  background-color: #17212c;
  border: 1px dashed #26323f;
  border-radius: 12px;
}
.preserve-line {
  white-space: pre-line;
}
.session-status-badge {
  font-weight: 600;
  background-color: #1f2b38;
  color: #93a1b0;
}
.session-status-badge.session-status-completed {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.session-status-badge.session-status-abandoned {
  background-color: rgba(185, 28, 28, 0.25);
  color: #fca5a5;
}
.session-status-badge.session-status-active,
.session-status-badge.session-status-ready {
  background-color: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.metric-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
}
.metric-list .metric-item {
  padding: 0.85rem 1rem;
  background-color: #17212c;
  border: 1px solid #26323f;
  border-radius: 12px;
}
.metric-list .metric-item-primary {
  border-color: #22c55e;
}
.metric-list .metric-item-primary .metric-value {
  color: #22c55e;
  font-size: 1.6rem;
}
.metric-list .metric-label {
  font-size: 0.8rem;
  color: #93a1b0;
}
.metric-list .metric-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric-note {
  font-size: 0.85rem;
  color: #93a1b0;
  margin-top: 0.5rem;
}
.result-table {
  --bs-table-bg: #17212c;
  font-variant-numeric: tabular-nums;
}
.result-table th {
  color: #93a1b0;
  font-weight: 600;
  font-size: 0.85rem;
}
.identify-user {
  padding-top: 10vh;
}
.training-configuration-form .option-group {
  flex-wrap: wrap;
}
.training-configuration-form .option-group .btn {
  min-height: 48px;
}
.training-configuration-form .color-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}
.training-configuration-form .color-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
}
.training-configuration-form .color-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.training-configuration-form .number-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.training-configuration-form .number-option-label {
  min-width: 48px;
  min-height: 48px;
  font-weight: 700;
}
.form-section {
  margin-bottom: 1.75rem;
}
.form-section .form-section-title {
  font-weight: 600;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}
.training-preset-list .preset-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #17212c;
  border-color: #26323f;
  color: #e8edf2;
}
.training-preset-list .preset-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.training-preset-list .preset-summary {
  color: #93a1b0;
  font-size: 0.9rem;
}
.training-preset-list .preset-list-item-action {
  display: flex;
  gap: 0.5rem;
}
.add-training-session .condition-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.add-training-session .condition-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  width: 100%;
}
.add-training-session .condition-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: #1f2b38;
  font-weight: 700;
  font-size: 0.85rem;
}
.training-session-controller {
  max-width: 720px;
  margin: 0 auto;
}
.training-session-controller .session-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.training-session-controller .session-code-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93a1b0;
}
.training-session-controller .session-code {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #22c55e;
}
.training-session-controller .session-meta {
  flex: 1 1 16rem;
  font-size: 0.9rem;
}
.training-session-controller .session-meta-item {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.training-session-controller .session-meta-label {
  color: #93a1b0;
  min-width: 5.5rem;
}
.training-session-controller .controller-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.training-session-controller .controller-card {
  background-color: #17212c;
  border-color: #26323f;
  border-radius: 12px;
  margin-bottom: 1rem;
}
.training-session-controller .join-url {
  word-break: break-all;
}
.training-session-controller .readiness-message {
  margin: 1rem 0;
  color: #f59e0b;
  font-weight: 600;
}
.training-session-controller .readiness-message.readiness-message-ready {
  color: #22c55e;
}
.training-session-controller .repetition-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.training-session-controller .repetition-counter-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #93a1b0;
}
.training-session-controller .repetition-counter-value {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.training-session-controller .btn-start-repetition {
  min-height: 7rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 12px;
}
.training-session-controller .repetition-status {
  min-height: 1.75rem;
  margin: 0.75rem 0;
  text-align: center;
  font-weight: 600;
  color: #93a1b0;
}
.training-session-controller .last-result {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  background-color: #17212c;
  border: 2px solid #26323f;
}
.training-session-controller .last-result.last-result-correct {
  border-color: #15803d;
}
.training-session-controller .last-result.last-result-correct .last-result-verdict {
  color: #4ade80;
}
.training-session-controller .last-result.last-result-incorrect {
  border-color: #b91c1c;
}
.training-session-controller .last-result.last-result-incorrect .last-result-verdict {
  color: #f87171;
}
.training-session-controller .last-result.last-result-invalid {
  border-color: #f59e0b;
}
.training-session-controller .last-result.last-result-invalid .last-result-verdict {
  color: #f59e0b;
}
.training-session-controller .last-result-verdict {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}
.training-session-controller .last-result-time {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.training-session-controller .last-result-detail {
  color: #93a1b0;
  font-size: 0.9rem;
}
.training-session-controller .running-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}
.training-session-controller .running-summary-item {
  padding: 0.6rem;
  text-align: center;
  background-color: #17212c;
  border-radius: 12px;
}
.training-session-controller .running-summary-label {
  display: block;
  font-size: 0.75rem;
  color: #93a1b0;
}
.training-session-controller .running-summary-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.training-session-controller .controller-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.training-session-controller .controller-actions .btn {
  flex: 1 1 10rem;
}
.device-list .device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #26323f;
}
.device-list .device-row:last-child {
  border-bottom: 0;
}
.device-list .device-row-label {
  font-weight: 600;
}
.device-list .device-row-self {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #93a1b0;
}
.device-list .device-row-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.device-list .device-row-status .form-select {
  width: auto;
}
.device-list.device-list-compact {
  font-size: 0.85rem;
}
.device-list.device-list-compact .device-row {
  padding: 0.35rem 0;
}
.join-training-session {
  padding-top: 8vh;
}
.join-training-session .session-code-input {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.training-session-result .result-overview {
  margin-bottom: 1.5rem;
}
.training-session-result .result-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.training-session-result .result-headline-count {
  font-size: 1.4rem;
  font-weight: 700;
}
.training-session-result .result-headline-invalid {
  color: #f59e0b;
}
.training-session-result .result-card {
  background-color: #17212c;
  border-color: #26323f;
  border-radius: 12px;
  height: 100%;
}
.training-session-result .result-correct {
  color: #4ade80;
  font-weight: 600;
}
.training-session-result .result-incorrect {
  color: #f87171;
  font-weight: 600;
}
.training-session-result .repetition-invalid td {
  color: #93a1b0;
  font-style: italic;
}
.training-session-result .fatigue-change {
  margin-top: 0.5rem;
}
.training-session-list .history-setup {
  font-size: 0.85rem;
  color: #93a1b0;
}
.training-session-list .history-table {
  --bs-table-bg: #17212c;
  font-variant-numeric: tabular-nums;
}
.exercise-layout {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.scanning-point {
  height: 100%;
}
.scanning-point .scanning-point-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}
.scanning-point .scanning-point-session {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #93a1b0;
}
.scanning-point .scanning-point-label {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.scanning-point .scanning-point-number {
  font-size: 40vmin;
  font-weight: 800;
  line-height: 1;
  color: #22c55e;
}
.scanning-point .scanning-point-status {
  font-size: 1.1rem;
  font-weight: 600;
}
.scanning-point .scanning-point-waiting {
  margin-top: 0.5rem;
  color: #93a1b0;
}
.scanning-point .scanning-point-message-title {
  font-size: 1.8rem;
  font-weight: 800;
}
.scanning-point .scanning-point-message-text {
  margin-top: 0.75rem;
  color: #93a1b0;
}
.scanning-point .connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2100;
  padding: 0.5rem;
  text-align: center;
  font-weight: 700;
  background-color: #f59e0b;
  color: #111111;
}
.stimulus-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: default;
}
.stimulus-screen .stimulus-screen-number {
  font-size: 62vmin;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stimulus-screen .stimulus-screen-text {
  font-size: 13vmin;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.stimulus-screen .stimulus-screen-point {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0.6;
}
.stimulus-screen.stimulus-screen-neutral {
  background-color: #1b2530;
  color: #93a1b0;
}
.stimulus-screen.stimulus-screen-correct {
  background-color: #15803d;
  color: #ffffff;
}
.stimulus-screen.stimulus-screen-correct .stimulus-screen-number {
  font-size: 40vmin;
}
.stimulus-screen.stimulus-screen-incorrect {
  background-color: #b91c1c;
  color: #ffffff;
}
.stimulus-screen.stimulus-screen-incorrect .stimulus-screen-number {
  font-size: 40vmin;
}
.dashboard .dashboard-action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard .dashboard-section {
  margin-bottom: 1.5rem;
}
.dashboard .dashboard-active-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.5rem;
  color: #e8edf2;
  text-decoration: none;
  background-color: #17212c;
  border: 1px solid #f59e0b;
  border-radius: 12px;
}
.dashboard .dashboard-last-session {
  display: block;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  color: #e8edf2;
  text-decoration: none;
  background-color: #17212c;
  border: 1px solid #26323f;
  border-radius: 12px;
}
.dashboard .dashboard-last-session-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93a1b0;
}
.dashboard .dashboard-last-session-date {
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.dashboard .dashboard-last-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem;
}
.dashboard .dashboard-last-session-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard .dashboard-last-session-label {
  font-size: 0.8rem;
  color: #93a1b0;
}
.performance-statistics .statistics-filter {
  padding: 1rem;
  background-color: #17212c;
  border: 1px solid #26323f;
  border-radius: 12px;
}
.performance-statistics .statistics-filter-action {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}