:root {
  color-scheme: light;

  /* Trusted Sport System */
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F0F3F7;
  --color-surface-muted: #F8FAFC;
  --color-border: #D8DEE8;
  --color-border-strong: #B7C0CC;
  --color-text: #172033;
  --color-text-muted: #5F6B7A;
  --color-text-soft: #7B8794;
  --color-navy: #0B1F33;
  --color-navy-soft: #14324A;
  --color-secondary: var(--color-navy);
  --color-secondary-hover: var(--color-navy-soft);
  --color-secondary-soft: var(--color-surface-soft);
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: #E8EFFD;
  --color-accent: #16825D;
  --color-accent-strong: #0F6949;
  --color-accent-soft: #E7F6EF;
  --color-border-accent: #A7D9C0;
  --color-success: #16825D;
  --color-success-hover: #0F6949;
  --color-success-text: #0F6949;
  --color-success-soft: #E7F6EF;
  --color-warning: #B56A00;
  --color-warning-text: #8A5200;
  --color-warning-soft: #FFF4D6;
  --color-danger: #C93636;
  --color-danger-hover: #A72C2C;
  --color-danger-text: #C93636;
  --color-danger-soft: #FDECEC;
  --color-info-soft: var(--color-primary-soft);

  --color-text-inverse: #ffffff;

  /* Schatten */
  --shadow-card: 0 6px 18px rgba(11, 31, 51, 0.045);
  --shadow-soft: 0 2px 10px rgba(11, 31, 51, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.05);
  --shadow-md: var(--shadow-soft);
  --shadow-lg: var(--shadow-card);
  /* Two-tone focus ring: blue on light surfaces, white on dark surfaces. */
  --shadow-focus: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-primary);

  /* Rundungen */
  --radius-sm: 12px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Typografie */
  --font-family-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-hero: 38px;

  /* Backward-compatible design tokens */
  --color-primary-strong: var(--color-primary-hover);
  --color-secondary-strong: var(--color-secondary-hover);
  --color-surface-page: var(--color-bg);
  --color-surface-panel: var(--color-surface);
  --color-surface-subtle: var(--color-surface-muted);
  --color-surface-primary-soft: var(--color-primary-soft);
  --color-surface-success-soft: var(--color-success-soft);
  --color-surface-danger-soft: var(--color-danger-soft);
  --shadow-panel: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  /* Component defaults */
  --button-min-height: 40px;
  --button-padding-y: 0;
  --button-padding-x: var(--space-4);
  --button-border: 1px solid transparent;
  --button-bg: var(--color-surface);
  --button-text: var(--color-text);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-bg-hover: var(--color-surface-soft);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-text: var(--color-text);
  --button-success-bg: var(--color-success);
  --button-success-bg-hover: var(--color-success-hover);
  --button-danger-bg: var(--color-danger);
  --button-danger-border: var(--color-danger);
  --button-danger-text: var(--color-text-inverse);
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-card);
  --card-padding: var(--space-5);
  --layout-max: 1440px;

  /* Backward-compatible aliases used throughout the existing stylesheet */
  --bg: var(--color-surface-page);
  --panel: var(--color-surface-panel);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-strong);
  --red: var(--color-danger);
  --green: var(--color-success-text);
  --amber: var(--color-warning-text);
  --soft-blue: var(--color-surface-primary-soft);
  --soft-red: var(--color-surface-danger-soft);
  --soft-green: var(--color-surface-success-soft);
  --shadow: var(--shadow-panel);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

.btn,
button {
  border: var(--button-border);
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--button-text);
  min-height: var(--button-min-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  cursor: pointer;
  font-weight: 600;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.btn:hover,
button:hover {
  background: var(--button-secondary-bg-hover);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn:disabled,
button:disabled,
.btn[aria-disabled="true"],
button[aria-disabled="true"] {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.78;
}

.btn:disabled:hover,
button:disabled:hover,
.btn[aria-disabled="true"]:hover,
button[aria-disabled="true"]:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn-primary,
button.primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: 700;
}

.btn-primary:hover,
button.primary:hover {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
}

.btn-secondary {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.btn-secondary:hover {
  background: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

button.danger {
  background: var(--button-danger-bg);
  border-color: var(--button-danger-border);
  color: var(--button-danger-text);
}

button.danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--color-text-inverse);
}

button.danger:disabled,
button.danger[aria-disabled="true"] {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

button.danger:disabled:hover,
button.danger[aria-disabled="true"]:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 18px var(--space-6);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%),
    var(--color-navy);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 36px rgba(23, 42, 70, 0.18);
}

.eyebrow {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: #b9d6ed;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
}

.topbar-tagline {
  max-width: 680px;
  margin: 6px 0 0;
  color: #dbeafe;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

h2 {
  font-size: 21px;
  font-weight: 700;
}

.version,
.live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 6px 9px;
  color: #dbe7f3;
}

.live-pill {
  background: rgba(36, 122, 82, 0.28);
}

.live-pill.offline {
  background: rgba(180, 35, 42, 0.22);
}

.status {
  max-width: 520px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #dbe7f3;
  text-align: right;
  background: rgba(255, 255, 255, 0.08);
}

.status.error {
  background: var(--soft-red);
  color: var(--red);
  border-color: #f1b2b6;
}

.friendly-error-message {
  display: block;
}

.technical-error-details {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.status.success {
  background: var(--soft-green);
  color: var(--green);
  border-color: #9ccfb8;
}

.status.loading {
  background: var(--soft-blue);
  color: var(--blue);
  border-color: #9fc2df;
}

/* Ladeanzeige fuer Buttons */
button.loading {
  position: relative;
  pointer-events: none;
}

button.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: auto;
  right: 16px;
  bottom: 0;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

button.primary.loading::after {
  border-top-color: #fff;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: min(100%, var(--layout-max));
  margin: 0 auto;
  padding: var(--space-6);
}

.card,
.panel,
.section,
.summary,
.toolbar,
.table-shell {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.card,
.panel,
.section {
  padding: var(--card-padding);
}

.card {
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.project-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}

.project-current {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-current span,
.project-switch label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-current strong {
  font-size: 20px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.project-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.project-actions {
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(78px, auto) minmax(150px, auto) minmax(132px, auto);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.project-actions button {
  min-width: 0;
  white-space: nowrap;
}

.project-return-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid #f59e0b;
  border-left: 6px solid #d97706;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
}

.project-return-notice[hidden] {
  display: none;
}

.project-return-notice strong {
  font-size: 15px;
}

.project-return-notice p {
  margin: 3px 0 0;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}

.project-return-notice button {
  flex: 0 0 auto;
  border-color: #f59e0b;
  background: #fff7ed;
  color: #78350f;
}

.share-project-has-returns {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #78350f;
}

.hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: 28px var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background:
    linear-gradient(135deg, #ffffff 0%, #ffffff 56%, #eef5ff 100%);
  box-shadow: var(--card-shadow);
}

.hero-intro[hidden] {
  display: none;
}

.welcome-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--card-radius);
  background: #ffffff;
  box-shadow: var(--card-shadow);
}

.welcome-banner[hidden] {
  display: none;
}

.welcome-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.welcome-copy h2 {
  color: var(--text);
  font-size: 24px;
  line-height: 1.18;
}

.welcome-copy p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.welcome-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.welcome-list li {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
}

.welcome-dismiss {
  justify-self: end;
  white-space: nowrap;
}

.quick-guide {
  display: grid;
  gap: 0;
  scroll-margin-top: 88px;
}

.quick-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.quick-guide-head h2 {
  margin-top: 4px;
}

.quick-guide-toggle {
  flex: 0 0 auto;
  min-width: 190px;
}

.quick-guide-content {
  max-height: 1400px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 180ms ease, opacity 160ms ease, margin-top 160ms ease;
  margin-top: 14px;
}

.quick-guide.is-collapsed .quick-guide-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.quick-guide-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: quick-guide-step;
}

.quick-guide-steps li {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 12px 12px 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.quick-guide-steps li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue-dark);
  color: #fff;
  content: counter(quick-guide-step);
  counter-increment: quick-guide-step;
  font-size: 13px;
  font-weight: 800;
}

.quick-guide-steps strong {
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.quick-guide-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-switch {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.project-dialog {
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.28);
}

.project-dialog::backdrop {
  background: rgba(17, 24, 39, 0.38);
}

.project-dialog-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #fff;
}

.share-dialog {
  width: min(560px, calc(100vw - 28px));
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.checkbox-line input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.share-created {
  display: grid;
  gap: 7px;
}

.share-created[hidden] {
  display: none;
}

.share-created label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.share-created-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.share-created-row input {
  min-width: 0;
}

.share-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.share-qr svg {
  width: min(280px, 100%);
  height: auto;
}

.share-qr-error {
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 700;
}

.share-list-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.share-list-head,
.share-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.share-list-head strong {
  font-size: 14px;
}

.share-list-head button,
.share-link-item button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
}

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

.share-link-empty {
  color: var(--muted);
  font-size: 13px;
}

.share-link-item {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.share-link-item.is-reviewed {
  background: #f8fafc;
}

.share-link-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.share-link-copy strong,
.share-link-copy span {
  overflow-wrap: anywhere;
}

.share-link-copy strong {
  font-size: 14px;
}

.share-link-copy span,
.share-status {
  color: var(--muted);
  font-size: 13px;
}

.share-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.return-review-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.return-review-meta dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.return-review-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.return-review-changes,
.return-review-list {
  display: grid;
  gap: 10px;
}

.return-review-change {
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid #2563eb;
  border-radius: 8px;
  background: #eff6ff;
}

.return-review-change.no-change {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

.return-review-change strong {
  display: block;
  margin-bottom: 3px;
}

.share-role-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.share-status.error {
  color: var(--color-danger);
  font-weight: 700;
}

.workflow-guide {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 16px;
  padding: 20px;
  transition: opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.workflow-guide.is-collapsed {
  gap: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-sm);
  opacity: 0.82;
  backdrop-filter: blur(10px);
}

.workflow-guide.is-collapsed:hover,
.workflow-guide.is-collapsed:focus-within {
  opacity: 1;
}

.workflow-guide.is-collapsed .section-head {
  margin-bottom: 0;
}

.workflow-guide.is-collapsed h2 {
  font-size: 18px;
}

.workflow-guide.is-collapsed .workflow-hint {
  display: none;
}

.workflow-guide.is-collapsed .workflow-steps {
  display: none;
}

.workflow-guide-toggle {
  justify-self: end;
  min-width: 112px;
}

.optional-tool {
  overflow: visible;
}

.optional-tool > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  cursor: pointer;
  list-style-position: inside;
}

.optional-tool > summary p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.optional-tool[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.optional-tool-content {
  padding: 14px;
}

.optional-tool:not([open]) .optional-tool-content {
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.workflow-hint {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-steps li {
  position: relative;
  min-width: 0;
}

.workflow-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(100% + 2px);
  width: 4px;
  height: 2px;
  background: var(--color-border);
}

.workflow-steps li.is-complete:not(:last-child)::after {
  background: var(--color-success);
}

.workflow-step-button {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 5px;
  width: 100%;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--color-surface);
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.workflow-step-button:hover {
  border-color: var(--blue);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.workflow-step-button.is-current {
  border-color: var(--blue);
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16), var(--shadow-md);
}

.workflow-step-button.is-complete {
  background: var(--color-success-soft);
  border-color: #a7f3d0;
}

.workflow-step-button.is-upcoming {
  background: var(--color-surface);
  color: var(--muted);
}

.workflow-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.workflow-step-button.is-complete .workflow-step-index {
  background: var(--green);
  color: var(--color-text-inverse);
  font-size: 0;
}

.workflow-step-button.is-complete .workflow-step-index::before {
  content: "✓";
  font-size: 14px;
}

.workflow-step-button.is-current .workflow-step-index {
  background: var(--blue);
  color: var(--color-text-inverse);
}

.workflow-step-title {
  font-weight: 700;
  color: var(--text);
}

.workflow-step-status {
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.workflow-step-button.is-current .workflow-step-status {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.workflow-step-button.is-complete .workflow-step-status {
  background: #dcfce7;
  color: #166534;
}

.workflow-step-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.dialog-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.source-step,
.settings {
  padding: var(--card-padding);
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.source-card {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--color-surface-muted);
  padding: 16px;
}

.source-card.is-active-source {
  border-color: var(--blue);
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.source-card.is-passive-source {
  opacity: 0.84;
}

.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mktt-link-help,
.action-with-subtext span {
  margin: 4px 0 0;
  color: var(--muted, #666);
  font-size: 0.8em;
  line-height: 1.35;
}

.mktt-help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mktt-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #666);
  font-size: 14px;
  line-height: 1;
}

.mktt-help-button:hover,
.mktt-help-button:focus-visible {
  background: var(--color-surface-muted);
  color: var(--blue-dark);
}

.mktt-tooltip {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.mktt-help-tooltip:hover .mktt-tooltip,
.mktt-help-tooltip:focus-within .mktt-tooltip,
.mktt-help-tooltip:active .mktt-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.action-with-subtext {
  display: grid;
  gap: 3px;
  align-items: start;
}

.mktt-extra-link {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.mktt-extra-link summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mktt-extra-link[open] summary {
  border-bottom: 1px solid var(--line);
  color: var(--blue-dark);
}

.mktt-url-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
}

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

.mktt-url-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.mktt-url-badge {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
}

.mktt-url-text {
  overflow: visible;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mktt-url-item button {
  min-height: 30px;
  padding: 4px 8px;
}

.source-association-summary {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.source-association-summary-header {
  display: grid;
  gap: 2px;
}

.source-association-summary-header span,
.source-association-observed {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.source-association-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-association-pill {
  min-height: 28px;
  border-color: #b7cbe0;
  background: #fff;
  color: var(--blue-dark);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.source-association-details {
  min-width: 0;
}

.source-association-details > summary {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.source-association-details[open] > summary {
  margin-bottom: 8px;
}

.source-association-details:not([open]) > .source-association-pills {
  display: none;
}

.ettu-import-scope {
  display: block;
  align-self: start;
  height: fit-content;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--color-surface-soft);
}

.ettu-import-scope-options {
  display: grid;
  align-items: start;
  align-content: start;
  height: fit-content;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  min-width: 0;
}

.ettu-import-scope[hidden] {
  display: none;
}

.ettu-import-scope legend {
  padding: 0 5px;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 800;
}

.ettu-import-scope label {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--color-surface);
  cursor: pointer;
}

.ettu-import-scope label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.ettu-import-scope input {
  width: auto;
  flex: 0 0 auto;
  min-height: 20px;
}

.ettu-import-scope label span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ettu-import-scope label strong,
.ettu-import-scope label small {
  overflow-wrap: anywhere;
}

.ettu-import-scope label small,
.ettu-import-scope p {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.ettu-import-scope p {
  margin: 2px 0 0;
}

.ettu-import-scope.needs-reload {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.source-status-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.source-status-card,
.source-status-note {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px 16px;
}

.source-status-card {
  display: grid;
  gap: 4px;
}

.source-status-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.source-status-card strong {
  font-size: 15px;
}

.source-status-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.source-status-note {
  grid-column: 1 / -1;
  color: var(--blue-dark);
  border-color: #bfdbfe;
  background: var(--color-info-soft);
}

.source-option-card {
  align-content: start;
  gap: 14px;
}

.source-option-head {
  display: grid;
  gap: 4px;
}

.source-option-kicker {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.source-option-head strong {
  color: var(--color-navy);
  font-size: 17px;
}

.source-option-head p,
.source-option-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.source-option-manual {
  border-style: dashed;
}

.source-import-preview {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--color-surface-muted);
}

.source-primary-action {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 230px;
}

.source-primary-action span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.source-preview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.source-preview-metric {
  display: grid;
  gap: 2px;
  min-height: 72px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-surface);
}

.source-preview-metric strong {
  color: var(--color-navy);
  font-size: 22px;
  line-height: 1.1;
}

.source-preview-metric span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.source-import-protocol {
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(208, 226, 255, 0.38);
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 750;
}

.source-issue-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(241, 194, 27, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-warning-soft);
}

.source-issue-panel[hidden] {
  display: none;
}

.source-issue-panel strong {
  color: var(--color-warning-text);
}

.source-issue-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.source-issue {
  color: var(--color-warning-text);
  font-size: 13px;
  line-height: 1.4;
}

.source-issue.is-error {
  color: var(--color-danger-text);
  font-weight: 800;
}

.association-step .section-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.association-step .section-head p {
  max-width: 760px;
}

.association-layout {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.association-step.settings {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.association-step > .workflow-accordion-header,
.association-step > .section-head,
.association-step > .association-layout {
  grid-column: 1 / -1;
}

.association-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 14px;
}

.association-picker-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.82fr);
  gap: 20px;
  align-items: stretch;
  padding: 18px;
}

.association-picker-form,
.association-decision {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.association-picker-card select {
  min-height: 44px;
  font-weight: 750;
}

.association-impact {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.association-actions {
  margin-top: 0;
}

.association-decision {
  align-content: center;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding-left: 20px;
}

.association-decision strong {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 1.35;
}

.association-decision p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.server-mode-warning {
  margin: 12px 0 0;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  background: #fff7df;
  color: #6b4e00;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.mktt-records-warnings {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.mktt-records-warnings summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--blue-dark);
  font-weight: 800;
  cursor: pointer;
}

.mktt-records-warnings[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.mktt-records-warnings-body {
  padding: 12px;
}

.mktt-records-warnings li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mktt-records-warnings {
  display: grid;
  gap: 8px;
}

.mktt-records-warnings ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mktt-records-warnings li {
  border-color: #f0d29b;
  background: #fff8e9;
  color: var(--amber);
  border-radius: 8px;
}

.mktt-record-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.mktt-record-card-title {
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mktt-record-card-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mktt-record-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mktt-record-card-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 26px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
}

.workflow-step {
  scroll-margin-top: 12px;
}

.workflow-step-panel {
  position: relative;
}

.workflow-step-panel.is-current {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, #eff6ff, var(--color-surface) 150px);
  box-shadow: var(--shadow-md);
}

.workflow-step-panel.is-upcoming {
  opacity: 0.94;
}

.workflow-step-panel.is-collapsed {
  display: block;
  padding: 0;
  overflow: hidden;
}

.workflow-step-panel.is-open {
  padding: var(--space-4);
}

.workflow-step-panel.is-collapsed > :not(.workflow-accordion-header) {
  display: none;
}

.workflow-accordion-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: var(--space-3);
  border: 0;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  box-shadow: none;
}

.workflow-accordion-header:disabled {
  cursor: default;
  opacity: 1;
}

.workflow-accordion-header:not(:disabled):hover {
  background: var(--color-surface-muted);
}

.workflow-step-panel.is-open > .workflow-accordion-header {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(239, 246, 255, 0.94);
}

.workflow-accordion-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-primary-hover);
  font-weight: 800;
}

.workflow-step-panel.is-current .workflow-accordion-index,
.workflow-step-panel.is-open .workflow-accordion-index {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.workflow-step-panel.is-complete .workflow-accordion-index {
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-size: 0;
}

.workflow-step-panel.is-complete .workflow-accordion-index::before {
  content: "✓";
  font-size: 14px;
}

.workflow-accordion-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workflow-accordion-title {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
}

.workflow-accordion-summary {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workflow-accordion-status {
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: lowercase;
}

.workflow-step-panel.is-current .workflow-accordion-status {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.workflow-step-panel.is-complete .workflow-accordion-status {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.workflow-step-panel.is-complete .step-number {
  background: var(--soft-green);
  color: var(--green);
}

.step-guidance {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.step-guidance.is-warning {
  border-color: #fcd34d;
  background: var(--color-warning-soft);
}

.step-guidance.is-success {
  border-color: #a7f3d0;
  background: var(--soft-green);
}

.step-guidance-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.step-guidance-copy strong {
  color: var(--text);
}

.step-guidance-copy span {
  color: var(--muted);
  line-height: 1.4;
}

.step-guidance-action {
  min-width: 180px;
}

.settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  gap: 12px;
  align-items: start;
}

.settings .section-head {
  margin-bottom: 0;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background-color: var(--color-surface);
  background-clip: padding-box;
  padding: 0 var(--space-3);
}

select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

input[type="file"] {
  min-height: 40px;
  padding: 5px 7px;
  line-height: 1.3;
}

input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--color-primary-soft);
  border-color: #bfdbfe;
  color: var(--color-primary-hover);
}

textarea {
  resize: vertical;
  min-height: 96px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
.participant-item:has(:focus-visible),
.tournament-trainer-item:has(:focus-visible),
.trainer-item:has(:focus-visible),
.assignment-mobile-card:has(:focus-visible) {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 3px;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--color-primary);
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
}

.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.actions,
.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions {
  min-width: 240px;
}

.participants,
.trainer-pool,
.coaching {
  padding: var(--card-padding);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.ettu-event-scope-callout {
  margin: 0 0 14px;
}

.ettu-event-scope-callout button {
  min-width: 220px;
}

.participant-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(150px, 0.66fr) minmax(180px, 0.86fr) minmax(180px, 0.72fr) minmax(280px, 0.9fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.participant-selected-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.participant-selected-toggle.is-active {
  border-color: rgba(37, 99, 235, 0.32);
  background: #eff6ff;
  color: #1d4ed8;
}

.participant-selected-toggle.is-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.participant-selected-toggle input {
  width: 16px;
  height: 16px;
}

.participant-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 8px;
  min-width: 0;
}

.participant-toolbar-actions button {
  min-height: 40px;
  min-width: 0;
  width: 100%;
  white-space: normal;
}

.participant-selection-summary {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.selected-player-summary {
  display: grid;
  gap: 10px;
}

.selected-player-summary > strong {
  color: var(--muted);
  font-size: 12px;
}

.selected-player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: min(52vh, 480px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.selected-player-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
}

.selected-player-empty {
  color: var(--muted);
  font-size: 13px;
}

.technical-player-names {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.participant-picker,
.trainer-menu {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.participant-picker summary,
.trainer-menu summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--blue-dark);
  font-weight: 800;
  cursor: pointer;
}

.participant-picker summary span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.summary-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.participant-picker[open] summary,
.trainer-menu[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.participant-list {
  display: block;
  max-height: min(64vh, 620px);
  overflow: auto;
  padding: 0;
}

.participant-table-shell {
  display: block;
  overflow: auto;
}

.participant-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.participant-table th,
.participant-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}

.participant-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.participant-table th:first-child,
.participant-table td:first-child {
  width: 42px;
  text-align: center;
}

.participant-table-row {
  cursor: pointer;
  min-height: 44px;
}

.participant-table-row:hover,
.participant-table-row:focus-within {
  background: #f8fafc;
}

.participant-table-row:focus-within {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.participant-table-row.selected {
  background: var(--soft-blue);
}

.participant-name-cell {
  color: var(--color-navy);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.participant-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.participant-status.is-selected {
  border-color: rgba(22, 163, 74, 0.25);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.participant-mobile-list {
  display: none;
}

.participant-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.participant-item.selected {
  background: var(--soft-blue);
  border-color: #bfdbfe;
  border-left: 5px solid var(--color-primary);
}

.participant-item input {
  width: 22px;
  height: 22px;
  margin-top: 0;
}

.participant-main {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.participant-meta {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.selection-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(239, 246, 255, 0.78);
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 750;
}

.selection-undo[hidden] {
  display: none;
}

.selection-undo button {
  min-height: 34px;
}

.trainer-pool-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.trainer-manager,
.tournament-trainers {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.trainer-manager h3,
.tournament-trainers h3 {
  margin: 0;
  font-size: 15px;
}

.trainer-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.trainer-active-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  color: var(--muted);
  font-weight: 700;
}

.trainer-active-field input,
.trainer-item input[type="checkbox"],
.tournament-trainer-item input {
  width: 16px;
  height: 16px;
}

.trainer-pool-list,
.tournament-trainer-list {
  display: grid;
  gap: 8px;
}

.trainer-list-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.trainer-list-menu summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 10px;
  color: var(--blue-dark);
  font-weight: 800;
  cursor: pointer;
}

.trainer-list-menu[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.trainer-list-menu .trainer-pool-list {
  padding: 8px;
}

.trainer-item {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1fr) 92px minmax(160px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: #fff;
}

.trainer-item.inactive {
  background: #fafbfc;
}

.trainer-item input[type="text"] {
  min-width: 0;
}

.tournament-trainer-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: #fff;
}

.tournament-trainer-item.selected {
  background: var(--soft-green);
  border-color: #a7f3d0;
  border-left: 5px solid var(--color-success);
}

.trainer-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.trainer-summary strong {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  overflow-wrap: anywhere;
}

.trainer-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.coach-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
}

.assignment-guidance {
  margin-bottom: 14px;
  border: 1px solid rgba(241, 194, 27, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.assignment-guidance[data-tone="success"] {
  border-color: rgba(22, 163, 74, 0.22);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.assignment-guidance[data-tone="error"] {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(254, 242, 242, 0.9);
  color: var(--color-danger);
}

.assignment-main,
.assignment-sidebar {
  min-width: 0;
}

.assignment-sidebar {
  display: grid;
  gap: 10px;
}

.assignment-side-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 10px;
}

.assignment-side-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.assignment-side-head strong {
  color: var(--color-navy);
}

.assignment-side-head span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.assignment-side-details > summary {
  min-height: 44px;
  color: var(--color-navy);
  cursor: pointer;
}

.assignment-side-details > summary::marker {
  color: var(--color-primary);
}

.assignment-side-details:not([open]) > :not(summary) {
  display: none;
}

.assignment-side-details[open] > summary {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.assignment-side-details.has-issues > summary span {
  color: var(--color-danger);
}

.coach-code-help {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.coach-code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
}

.coach-code-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.technical-coach-codes {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.trainer-code-tooltip {
  vertical-align: middle;
}

.trainer-code-action {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 3px 7px 3px 3px;
  border: 1px solid #9fc2df;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--blue-dark);
}

.trainer-code-action:hover,
.trainer-code-action:focus-visible {
  border-color: var(--blue);
  background: var(--soft-blue);
}

.trainer-code-action .trainer-code-tooltip {
  pointer-events: none;
}

.trainer-code-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #9fc2df;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.trainer-code-action .trainer-code-badge {
  border-color: transparent;
  background: transparent;
  padding-right: 2px;
}

.trainer-code-remove {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trainer-code-badge:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 2px;
}

.trainer-code-tooltip .mktt-tooltip {
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
}

.assignment-list {
  display: block;
  max-height: min(66vh, 640px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.assignment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}

.assignment-table th,
.assignment-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.assignment-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.assignment-table th:nth-child(1),
.assignment-table td:nth-child(1) {
  width: 26%;
  min-width: 0;
}

.assignment-table th:nth-child(2),
.assignment-table td:nth-child(2) {
  width: 9%;
  min-width: 0;
}

.assignment-table th:nth-child(3),
.assignment-table td:nth-child(3) {
  width: 15%;
  min-width: 0;
}

.assignment-table th:nth-child(4),
.assignment-table td:nth-child(4) {
  width: 32%;
  min-width: 0;
  padding-right: 12px;
}

.assignment-table th:nth-child(5),
.assignment-table td:nth-child(5) {
  width: 8%;
  min-width: 0;
  padding-left: 10px;
}

.assignment-table th:nth-child(6),
.assignment-table td:nth-child(6) {
  width: 10%;
  min-width: 0;
}

.assignment-table-row.is-missing {
  background: rgba(255, 247, 237, 0.72);
}

.assignment-table-row.is-locked {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.assignment-player-cell {
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: normal;
}

.assignment-count-cell,
.assignment-source-cell,
.assignment-lock-cell {
  color: var(--color-text-muted);
}

.assignment-count-badge,
.assignment-plan-status,
.assignment-source-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  line-height: 1.15;
  white-space: normal;
}

.assignment-count-badge {
  min-height: 20px;
  padding: 2px 6px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.assignment-plan-cell {
  color: var(--color-text-muted);
  line-height: 1.25;
}

.assignment-plan-status {
  min-height: 21px;
  padding: 3px 7px;
  border-color: #D7E3F3;
  background: #F3F7FC;
  color: var(--color-navy-soft);
  font-size: 11px;
  font-weight: 700;
}

.assignment-team-note {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.assignment-manual-note,
.assignment-unscheduled-note {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.assignment-manual-note {
  color: var(--color-accent-strong);
  font-weight: 700;
}

.assignment-unscheduled-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

.assignment-coach-select {
  min-width: 0;
  min-height: 34px;
  width: 100%;
  max-width: 100%;
  border-color: var(--color-border-accent);
  background-color: var(--color-accent-soft);
  padding-block: 0;
  padding-inline: 10px 30px;
  color: var(--color-accent-strong);
  font-size: 13px;
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.assignment-coach-select:hover {
  border-color: var(--color-accent);
  background-color: #D5F1E7;
}

.assignment-source-badge {
  min-height: 20px;
  padding: 2px 6px;
  border-color: #D7E3F3;
  background: #F8FAFC;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
}

.assignment-lock,
.assignment-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.assignment-lock input,
.assignment-option input {
  width: 17px;
  height: 17px;
}

.assignment-lock {
  min-height: 24px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: normal;
}

.assignment-lock-text {
  line-height: 1.1;
}

.assignment-mobile-list {
  display: none;
}

.assignment-load-list,
.assignment-conflict-list {
  display: grid;
  gap: 8px;
}

.assignment-load-item,
.assignment-conflict-item,
.assignment-side-empty {
  display: grid;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  text-align: left;
}

.assignment-load-item strong,
.assignment-conflict-item strong {
  color: var(--color-navy);
  font-size: 12px;
}

.assignment-load-item span,
.assignment-conflict-item span,
.assignment-side-empty {
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.assignment-load-item.is-overloaded,
.assignment-conflict-item {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(254, 242, 242, 0.9);
}

.assignment-conflict-item.is-warning {
  border-color: rgba(241, 194, 27, 0.35);
  background: var(--color-warning-soft);
}

button.assignment-conflict-item {
  cursor: pointer;
}

.assignment-auto-feedback {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(239, 246, 255, 0.78);
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 750;
}

.assignment-auto-feedback[hidden] {
  display: none;
}

.assignment-auto-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assignment-mobile-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  min-width: 0;
}

.assignment-mobile-card.is-missing {
  background: rgba(255, 247, 237, 0.72);
}

.assignment-mobile-head {
  display: grid;
  gap: 2px;
}

.assignment-mobile-head strong,
.assignment-mobile-card p {
  overflow-wrap: anywhere;
}

.assignment-mobile-card select {
  width: 100%;
}

.assignment-mobile-head span,
.assignment-mobile-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.summary {
  display: grid;
  grid-template-columns: 110px 130px 110px 140px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 16px;
}

.summary.summary-metrics-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.control-overview {
  grid-template-columns: repeat(4, minmax(132px, 1fr)) minmax(280px, 1.5fr);
  padding: 0;
  margin-bottom: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.control-overview.summary-metrics-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.summary-metric {
  display: grid;
  align-content: center;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.summary-metric.has-alert {
  border-color: #fecaca;
  background: var(--soft-red);
  border-left: 5px solid var(--color-danger);
}

.summary-metric.has-alert .metric,
.summary-metric.has-alert .label {
  color: var(--red);
}

.summary-metric.has-alert .label::after {
  content: " prüfen";
}

.summary-metric.has-warning {
  border-color: #fcd34d;
  background: var(--color-warning-soft);
  border-left: 5px solid var(--color-warning);
}

.summary-metric.has-warning .metric,
.summary-metric.has-warning .label {
  color: var(--amber);
}

.summary-metric.has-warning .label::after {
  content: " offen";
}

.metric {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
}

.label {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tournament {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.control-overview .warnings {
  grid-column: 1 / -1;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-6);
  color: var(--muted);
}

.site-footer .version,
.site-footer .live-pill {
  min-height: 28px;
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.site-footer .live-pill {
  background: #f0fdf4;
  color: #166534;
}

.site-footer .live-pill.offline {
  background: #fff1f2;
  color: var(--red);
}

.warnings {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.warnings span {
  display: inline-flex;
  border-radius: 999px;
  background: var(--color-warning-soft);
  color: var(--amber);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.conflict-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #fecaca;
  border-radius: 16px;
  background: var(--soft-red);
}

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

.conflict-panel strong {
  color: var(--red);
  font-size: 14px;
}

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

.conflict-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 1px solid #f1a6aa;
  border-radius: 8px;
  background: #fff;
  color: var(--red);
  padding: 9px 11px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.conflict-list button:hover,
.conflict-list button:focus-visible {
  background: #fff5f5;
  outline: none;
}

.conflict-list small {
  color: var(--red);
}

.conflict-list .conflict-suggestion {
  color: #166534;
  font-weight: 700;
}

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

.traffic-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.traffic-card.is-green {
  border-color: #a7f3d0;
  background: var(--color-success-soft);
}

.traffic-card.is-yellow {
  border-color: #fcd34d;
  background: var(--color-warning-soft);
}

.traffic-card.is-red {
  border-color: #fecaca;
  background: var(--color-danger-soft);
}

.traffic-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.traffic-card.is-green .traffic-light {
  background: var(--color-success);
}

.traffic-card.is-yellow .traffic-light {
  background: var(--color-warning);
  color: #111827;
}

.traffic-card.is-red .traffic-light {
  background: var(--color-danger);
}

.traffic-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.traffic-copy strong {
  color: var(--color-text);
  font-size: 14px;
}

.traffic-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.traffic-count {
  color: var(--color-navy);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.import-review {
  padding: var(--card-padding);
}

.import-review .section-head {
  margin-bottom: 10px;
}

.overview-next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 14px;
  background: #f8fbff;
}

.overview-next-action strong {
  display: block;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.25;
}

.overview-next-label {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.overview-next-action span {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.overview-next-action button {
  min-width: 190px;
}

.overview-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.overview-status-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.overview-status-card[data-status="complete"] {
  background: #fbfefc;
}

.overview-status-card[data-status="active"] {
  border-color: rgba(37, 99, 235, 0.28);
  background: #f8fbff;
}

.overview-status-card[data-status="error"] {
  border-color: rgba(185, 28, 28, 0.22);
  background: #fff7ed;
}

.overview-status-card[data-status="locked"] {
  opacity: 0.72;
}

.overview-status-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.overview-status-head strong {
  color: var(--color-navy);
  font-size: 13px;
  line-height: 1.2;
}

.overview-status-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: #eef2f7;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
}

.overview-status-card[data-status="complete"] .overview-status-head span {
  background: #dcfce7;
  color: #166534;
}

.overview-status-card[data-status="active"] .overview-status-head span {
  background: #dbeafe;
  color: #1d4ed8;
}

.overview-status-card[data-status="error"] .overview-status-head span {
  background: #fee2e2;
  color: #991b1b;
}

.overview-status-card p,
.overview-status-card small {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.overview-status-card p {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
}

.overview-status-card small {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.overview-status-card button {
  justify-self: start;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.overview-todo {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

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

.overview-todo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--color-warning);
  border-radius: 10px;
  background: #fffbeb;
}

.overview-todo-item[data-tone="danger"] {
  border-left-color: var(--color-danger);
  background: #fff7ed;
}

.overview-todo-item span,
.overview-todo-empty {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.overview-todo-item button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 12px;
}

.overview-todo-empty {
  color: var(--color-text-muted);
}

.pdf-import {
  padding: 0;
}

.pdf-import-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pdf-import-status.error {
  border-color: #e2a4a8;
  background: var(--soft-red);
  color: var(--red);
}

.pdf-import-status.success {
  border-color: #9ccfb8;
  background: var(--soft-green);
  color: var(--green);
}

.pdf-file-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.pdf-file-actions button {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.2;
}

.pdf-file-selection {
  display: grid;
  gap: 8px;
  border: 1px solid #bfd4e6;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.pdf-file-selection[hidden] {
  display: none;
}

.pdf-file-selection-summary {
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
}

.pdf-file-selection-list {
  display: grid;
  gap: 6px;
}

.pdf-file-selection-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.pdf-file-selection-item input {
  margin-top: 2px;
}

.pdf-file-selection-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pdf-file-selection-name {
  overflow: visible;
  color: var(--text);
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pdf-file-selection-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pdf-source-quick-result {
  display: grid;
  gap: 7px;
  border: 1px solid #9ccfb8;
  border-radius: 8px;
  padding: 10px;
  background: var(--soft-green);
}

.pdf-source-quick-result[hidden] {
  display: none;
}

.pdf-source-quick-result span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.pdf-source-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-source-quick-actions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 13px;
}

.pdf-source-list {
  display: grid;
  gap: 10px;
}

.pdf-source-item {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pdf-source-item[data-status="success"] {
  border-left: 4px solid var(--green);
}

.pdf-source-item[data-status="empty"] {
  border-left: 4px solid var(--amber);
}

.pdf-source-item[data-status="error"] {
  border-left: 4px solid var(--red);
}

.pdf-source-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.pdf-source-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pdf-source-title strong {
  overflow-wrap: anywhere;
}

.pdf-source-title span,
.pdf-source-error {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pdf-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-source-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pdf-source-meta .has-warning {
  border-color: #e5b16d;
  background: #fff7e6;
  color: var(--amber);
}

.pdf-source-error {
  margin: 0;
  color: var(--red);
}

.pdf-source-error .technical-error-details {
  color: var(--muted);
}

.pdf-source-text {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.pdf-source-text summary {
  padding: 8px 10px;
  color: var(--blue-dark);
  font-weight: 800;
  cursor: pointer;
}

.pdf-source-text[open] summary {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.pdf-source-text pre {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
  background: #fbfcfd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.pdf-analysis-details-body {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: #fbfcfd;
}

.normalized-line-list {
  display: grid;
  gap: 5px;
  max-height: 320px;
  margin: 0;
  overflow: auto;
  padding: 10px 10px 10px 42px;
  background: #fbfcfd;
}

.normalized-line-list li {
  padding: 4px 6px;
  border-left: 3px solid transparent;
  border-radius: 4px;
}

.normalized-line-list li::marker {
  color: var(--muted);
  font-size: 12px;
}

.normalized-line-list code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.normalized-line-list .has-time {
  border-left-color: var(--blue);
  background: var(--soft-blue);
}

.normalized-line-list .has-table {
  border-left-color: var(--green);
}

.normalized-line-list .has-competition {
  background: #f8fafc;
}

.normalized-line-list .has-character-issue {
  border-left-color: var(--red);
  background: var(--soft-red);
}

.line-tags {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.detected-block-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 10px 10px 10px 42px;
  background: #fbfcfd;
}

.detected-block-list li {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  background: #fff;
}

.detected-block-list li::marker {
  color: var(--muted);
  font-size: 12px;
}

.detected-block-list .is-unknown {
  border-left-color: var(--line-strong);
}

.detected-block-list .has-overlap {
  background: #fff7e6;
  border-color: #e5b16d;
}

.detected-block-list .is-short {
  border-left-color: var(--amber);
}

.detected-block-list .is-header-footer {
  opacity: 0.78;
}

.detected-block-head {
  display: grid;
  gap: 3px;
}

.detected-block-head strong {
  overflow-wrap: anywhere;
}

.detected-block-head > span:not(.line-tags) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.detected-block-list pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.group-schedule-preview-body {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #fbfcfd;
}

.group-schedule-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.group-schedule-metrics span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.group-schedule-title,
.group-schedule-byttv {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.group-schedule-warnings {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 700;
}

.group-schedule-group {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.group-schedule-group h3 {
  margin: 0;
  color: #344054;
  font-size: 14px;
}

.group-schedule-byttv {
  color: var(--blue-dark);
  font-weight: 800;
}

.group-schedule-matches {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.group-schedule-preview-body button:disabled {
  justify-self: start;
  cursor: not-allowed;
  opacity: 0.7;
}

.pdf-match-preview-body {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #fbfcfd;
}

.pdf-match-preview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-match-preview-metrics span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.pdf-match-preview-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pdf-match-preview-filters select {
  min-width: 210px;
}

.pdf-match-preview-list {
  display: grid;
  gap: 6px;
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 0 0 0 18px;
}

.pdf-match-preview-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}

.pdf-match-preview-item strong,
.pdf-match-preview-item span {
  overflow-wrap: anywhere;
}

.pdf-planned-rows-body {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #fbfcfd;
}

.pdf-planned-rows-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-planned-rows-metrics span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.pdf-planned-rows-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pdf-planned-rows-filters select {
  min-width: 210px;
}

.pdf-planned-rows-list {
  display: grid;
  gap: 6px;
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 0 0 0 18px;
}

.pdf-planned-rows-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}

.pdf-planned-rows-item strong,
.pdf-planned-rows-item span {
  overflow-wrap: anywhere;
}

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

.review-grid[hidden] {
  display: none;
}

.review-block {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.review-block h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  color: var(--color-navy);
  font-size: 14px;
  line-height: 1.25;
}

.review-block h3 span {
  min-width: 26px;
  border-radius: 999px;
  padding: 3px 7px;
  background: #edf1f5;
  color: var(--blue-dark);
  font-size: 12px;
  text-align: center;
}

.review-empty,
.review-more {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.review-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-list li {
  border-left: 3px solid var(--amber);
  padding: 2px 0 2px 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.review-list strong,
.review-list span {
  display: block;
}

.review-list span {
  margin-top: 2px;
  color: var(--muted);
}

.review-more {
  margin-top: 7px;
  font-weight: 700;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: var(--card-padding);
}

.toolbar .section-head {
  margin-bottom: 0;
}

.plan-primary-actions {
  align-items: stretch;
}

.tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.tab {
  border: 0;
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  min-width: 96px;
  background: #fff;
}

.tab:last-child {
  border-right: 0;
}

.tab.active {
  background: var(--color-navy);
  color: var(--blue-dark);
  color: #fff;
  font-weight: 800;
}

.plan-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.plan-work-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.export-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.export-status-card[data-tone="success"] {
  border-color: rgba(18, 125, 86, 0.24);
  background: #ecfdf5;
}

.export-status-card[data-tone="error"] {
  border-color: rgba(185, 28, 28, 0.18);
  background: #fff7ed;
}

.export-status-card strong {
  display: block;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.25;
}

.export-status-card p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.export-status-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.35;
}

.export-status-card[data-tone="success"] ul:empty::before {
  content: "Keine Exportprobleme.";
  color: #166534;
  font-weight: 750;
}

.export-feedback {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(18, 125, 86, 0.24);
  border-radius: 12px;
  background: #ecfdf5;
  color: #14532d;
  font-size: 13px;
}

.export-feedback[data-tone="error"] {
  border-color: rgba(185, 28, 28, 0.22);
  background: #fef2f2;
  color: #991b1b;
}

.export-actions {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 0.85fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.action-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.action-group-label {
  grid-column: 1 / -1;
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
}

.compact-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.compact-action-grid-three {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}

.action-group-plan .compact-action-grid {
  grid-template-columns: minmax(0, 1fr);
}

#planStep .action-group-plan {
  grid-template-columns: auto minmax(230px, auto) minmax(220px, 1fr) minmax(220px, 1fr) minmax(160px, 0.7fr);
  align-items: center;
  padding: 14px 16px;
  border-color: rgba(37, 99, 235, 0.35);
  background: #eff6ff;
}

#planStep .action-group-plan .action-group-label,
#planStep .action-group-plan .plan-source-status,
#planStep .action-group-plan .action-with-subtext,
#planStep .action-group-plan > button,
#planStep .action-group-plan .plan-action-hint,
#planStep .action-group-plan .compact-action-grid {
  grid-column: auto;
}

#planStep .action-group-plan .action-with-subtext,
#planStep .action-group-plan .plan-action-hint {
  min-width: 0;
}

#planStep .action-group-plan .action-with-subtext span,
#planStep .action-group-plan .plan-action-hint {
  display: none;
}

#planStep .plan-followup-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#planStep .plan-followup-actions button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}

.plan-export-panel {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.date-export-group,
.action-group-plan .action-with-subtext {
  display: grid;
  gap: 7px;
}

.export-date-select {
  display: grid;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.export-date-select select {
  width: 100%;
  min-height: 40px;
}

.action-helper,
.plan-source-status,
.plan-action-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.plan-source-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #f8fafc;
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.step6-export-section {
  display: contents;
}

.step6-section-toggle {
  display: none;
}

.plan-action-hint {
  margin-top: -2px;
}

.export-actions button {
  width: 100%;
  min-height: 38px;
  padding: 7px 11px;
  border-color: var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.18;
  white-space: nowrap;
}

.export-actions .compact-action-grid button {
  white-space: normal;
}

.export-actions .recommended-export {
  min-height: 52px;
  font-size: 15px;
  font-weight: 750;
  white-space: normal;
}

.export-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.action-group-recommended {
  border-color: rgba(37, 99, 235, 0.18);
  background: #f8fbff;
}

.export-history {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

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

.export-history-item {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  min-width: 0;
}

.export-history-item strong,
.export-history-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.export-history-item span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.table-shell {
  overflow: auto;
  --plan-scale: 1;
  border-radius: 16px;
}

.association-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--soft-blue);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.mobile-schedule {
  display: none;
}

.trust-section {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.trust-copy {
  display: grid;
  gap: 6px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.trust-grid article {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 18px;
  border: var(--card-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.trust-grid strong {
  color: var(--text);
  line-height: 1.25;
}

.trust-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: 2px;
}

.trust-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border);
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--blue-dark);
  font-weight: 800;
  text-decoration: none;
}

.trust-links a:hover,
.trust-links a:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: calc(13px * var(--plan-scale));
}

#planTable:not(.schedule-table) {
  min-width: calc(1220px * var(--plan-scale));
}

#planTable.overview-table {
  min-width: calc(1420px * var(--plan-scale));
}

#planTable.overview-table .competition {
  width: 190px;
}

#planTable.overview-table .coach {
  width: 180px;
}

#planTable.overview-table .note {
  width: 78px;
}

#planTable.overview-table .actions-col {
  width: 60px;
}

#planTable.schedule-table {
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

th {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  color: var(--color-navy);
  font-size: 12px;
  text-align: left;
  padding: 10px 8px;
  white-space: nowrap;
}

td {
  border-bottom: 1px solid var(--line);
  padding: 9px 8px;
  vertical-align: middle;
}

tbody tr:nth-child(even) {
  background: #ffffff;
}

tbody tr:hover {
  background: #f5f7fa;
}

.coach {
  width: 100px;
}

.plan-row-status {
  width: 128px;
}

.plan-row-status span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: #eef2f7;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.plan-row-status span[data-status="valid"] {
  background: #dcfce7;
  color: #166534;
}

.plan-row-status span[data-status="warning"] {
  background: #fef3c7;
  color: #92400e;
}

.plan-row-status span[data-status="error"] {
  background: #fee2e2;
  color: #991b1b;
}

.competition {
  width: 170px;
}

.round {
  width: 54px;
}

.note {
  width: 96px;
}

.actions-col {
  width: 64px;
}

.schedule-table .coach {
  width: 190px;
}

.schedule-table .note {
  width: 180px;
}

.schedule-table .actions-col {
  width: 52px;
  text-align: center;
}

.schedule-table td {
  padding: 6px 8px;
}

.schedule-table td input,
.schedule-table td select,
.schedule-table td textarea {
  min-height: 34px;
  padding: 5px 6px;
}

.schedule-table .coach select {
  min-height: 38px;
  padding-inline: 8px;
}

.schedule-table .note input,
.schedule-table .note textarea {
  min-height: 38px;
  padding-inline: 8px;
}

.schedule-table .actions-col .danger {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}

.schedule-time-group-row td {
  border-bottom: 0;
}

.schedule-time-group-cell {
  padding: 12px 4px 6px;
  background: #fff;
  color: var(--text);
  line-height: 1.2;
}

.schedule-time-group-cell::after {
  display: none;
  width: 100%;
  height: 1px;
  margin-top: 8px;
  background: var(--line-strong);
  content: "";
}

.schedule-time-group-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.schedule-time-group-button:hover,
.schedule-time-group-button:focus-visible {
  background: #f8fbff;
  box-shadow: none;
}

.schedule-time-group-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-info-soft);
  color: var(--blue-dark);
  font-size: calc(11px * var(--plan-scale));
  font-weight: 800;
}

.schedule-time-group-arrow {
  color: var(--muted);
  font-size: calc(13px * var(--plan-scale));
  font-weight: 900;
}

.schedule-game-row {
  background: #fff;
}

.schedule-game-row:nth-of-type(even) {
  background: #fbfcfd;
}

.schedule-game-row:hover {
  background: #f7fbff;
}

.schedule-game-row td {
  border-bottom: 1px solid var(--line);
}

.schedule-game-cell {
  padding: 10px clamp(16px, 4vw, 64px);
}

.schedule-game-cell > *,
.schedule-actions-col > * {
  max-height: 96px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  transition:
    max-height 160ms ease,
    opacity 140ms ease,
    transform 160ms ease;
}

.schedule-game-content {
  display: grid;
  gap: 6px;
  width: min(100%, 1040px);
  margin-inline: auto;
  padding: 6px clamp(10px, 2vw, 22px);
  border-radius: 12px;
}

.schedule-game-row.is-collapsed td {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}

.schedule-game-row.is-collapsed {
  display: none;
}

.schedule-game-row.is-collapsed .schedule-game-cell > *,
.schedule-game-row.is-collapsed .schedule-actions-col > * {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}

.schedule-player-input,
.schedule-meta-input,
.schedule-table-input,
.schedule-note-input,
.schedule-coach-select,
.schedule-result-badge {
  min-height: 28px;
  border-radius: var(--radius-md);
}

.schedule-player-input {
  min-width: 0;
  min-height: 38px;
  padding: 2px 0;
  color: var(--text);
  font-size: calc(13px * var(--plan-scale));
  font-weight: 900;
  line-height: 1.35;
  text-overflow: clip;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
}

.schedule-association-badge {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 2px 7px;
  font-size: 10px;
}

.schedule-result-badge {
  width: 56px;
  min-width: 56px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.schedule-result-badge[data-outcome="win"] {
  border-color: #a7f3d0;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.schedule-result-badge[data-outcome="loss"] {
  border-color: #fecaca;
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.schedule-meta-input,
.schedule-table-input,
.schedule-note-input,
.schedule-coach-select {
  color: var(--muted);
  font-size: calc(12px * var(--plan-scale));
  font-weight: 700;
}

.schedule-table-input {
  font-size: calc(11px * var(--plan-scale));
  text-align: center;
}

.schedule-competition-input {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.schedule-round-input {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.schedule-coach-control {
  position: relative;
  display: block;
  min-width: 0;
}

.schedule-coach-select {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--text);
  cursor: pointer;
  opacity: 0.01;
}

.schedule-coach-display {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 5px 6px;
  border-radius: var(--radius-md);
}

.schedule-coach-code {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(10px * var(--plan-scale));
  font-weight: 900;
}

.schedule-coach-name {
  min-width: 0;
  color: var(--text);
  font-size: calc(12px * var(--plan-scale));
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.schedule-note-input:focus,
.schedule-meta-input:focus,
.schedule-table-input:focus,
.schedule-player-input:focus,
.schedule-result-badge:focus,
.schedule-coach-select:focus,
.schedule-coach-control:has(:focus-visible) .schedule-coach-display {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--blue);
}

.schedule-actions-col {
  width: 32px;
  padding: 0 4px 0 0;
  text-align: right;
}

.schedule-table .schedule-actions-col {
  text-align: right;
}

.schedule-delete-button {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  opacity: 0.42;
}

.schedule-game-row:hover .schedule-delete-button,
.schedule-game-row:focus-within .schedule-delete-button {
  opacity: 1;
}

.schedule-delete-button:hover,
.schedule-delete-button:focus-visible {
  border-color: #fecaca;
  background: #fff1f2;
  color: var(--red);
}

.schedule-table .missing-coach .schedule-game-cell {
  border-left: 4px solid var(--color-danger);
}

.schedule-table .conflict .schedule-game-cell {
  border-left: 4px solid var(--color-warning);
  background: var(--color-warning-soft);
}

td input,
td select,
td textarea {
  width: 100%;
  border-color: transparent;
  background-color: transparent;
  border-radius: var(--radius-md);
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.schedule-table textarea.schedule-player-input {
  min-height: 38px;
  padding: 2px 0;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
}

td input:focus,
td select:focus,
td textarea:focus {
  background: #fff;
}

.missing-coach td.coach {
  background: var(--soft-red);
  border-left: 5px solid var(--color-danger);
}

.empty {
  padding: 26px;
  text-align: center;
  color: var(--muted);
}

.hidden {
  display: none;
}

.auto-backup-panel {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.auto-backup-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.auto-backup-title {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.auto-backup-head strong {
  font-size: 14px;
}

.auto-backup-title span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.auto-backup-toggle {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
}

.auto-backup-list {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.auto-backup-list[hidden] {
  display: none;
}

.auto-backup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.auto-backup-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.auto-backup-copy strong,
.auto-backup-copy span {
  overflow-wrap: anywhere;
}

.auto-backup-copy strong {
  font-size: 13px;
}

.auto-backup-copy span {
  color: var(--muted);
  font-size: 12px;
}

.auto-backup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auto-backup-empty {
  color: var(--muted);
  font-size: 13px;
}

.pdf-check-report {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.pdf-check-report > strong {
  font-size: 13px;
}

.pdf-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.pdf-check-metric {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pdf-check-metric strong {
  font-size: 20px;
  line-height: 1;
}

.pdf-check-metric span {
  color: var(--muted);
  font-size: 12px;
}

.pdf-check-ok,
.pdf-check-warning {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.pdf-check-ok {
  color: var(--color-success-text);
}

.pdf-check-warning {
  color: var(--color-warning-text);
}

.refresh-status {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.refresh-status.loading {
  color: var(--color-primary-hover);
}

.refresh-status.error {
  color: var(--color-danger-text);
}

.refresh-status.success {
  color: var(--color-success-text);
}

/* Trusted Sport System visual layer */
html {
  scroll-behavior: smooth;
}

body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  background: var(--color-bg);
  font-size: var(--font-size-base);
}

.shell-toggle-input {
  position: fixed;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

body:has(#appShellToggle:checked) {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 8px;
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 20px;
  width: 240px;
  height: calc(100vh - 16px);
  margin: 8px 0 8px 8px;
  padding: 18px 14px;
  overflow: hidden auto;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: var(--color-navy);
  color: var(--color-text-inverse);
  box-shadow: 0 14px 34px rgba(11, 31, 51, 0.20);
  transition: transform 180ms ease, opacity 180ms ease;
}

body:has(#appShellToggle:checked) .app-sidebar {
  width: 64px;
  padding: 14px 8px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body:has(#appShellToggle:checked) .sidebar-head {
  justify-content: center;
}

body:has(#appShellToggle:checked) .sidebar-brand {
  padding: 0;
}

body:has(#appShellToggle:checked) .sidebar-brand > span:not(.sidebar-logo),
body:has(#appShellToggle:checked) .sidebar-label,
body:has(#appShellToggle:checked) .sidebar-status {
  display: none;
}

body:has(#appShellToggle:checked) .sidebar-link {
  justify-content: center;
  padding: 0;
}

.sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 4px;
  color: var(--color-text-inverse);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.05;
  text-decoration: none;
}

.shell-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}

.shell-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}

.sidebar-collapse {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
}

.sidebar-nav {
  display: grid;
  align-content: start;
  gap: 6px;
}

.sidebar-nav-secondary {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 850;
}

.sidebar-label {
  min-width: 0;
  overflow: visible;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.sidebar-link.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.sidebar-link:hover .sidebar-mark,
.sidebar-link:focus-visible .sidebar-mark,
.sidebar-link.is-active .sidebar-mark {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sidebar-status {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-status span {
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  font-weight: 700;
}

.sidebar-status strong {
  color: #fff;
  font-size: 13px;
}

.topbar {
  position: sticky;
  top: 0;
  grid-column: 2;
  z-index: 20;
  min-height: 74px;
  margin: 8px 8px 0 18px;
  padding: 14px clamp(18px, 3vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-navy);
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.05);
  backdrop-filter: blur(10px);
}

body:has(#appShellToggle:checked) .topbar {
  margin-left: 10px;
}

h1 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0;
}

.topbar-tagline {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.topbar-menu {
  display: inline-flex;
}

.status,
.version,
.live-pill {
  border-radius: var(--radius-pill);
}

.status {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
}

.layout {
  grid-column: 2;
  width: min(100%, 1500px);
  gap: 18px;
  margin: 0;
  padding: 14px 8px 34px 18px;
}

body:has(#appShellToggle:checked) .layout {
  padding-left: 10px;
}

#reviewStep,
#workflowGuide,
#sourceStep,
#associationStep,
#playersStep,
#trainersStep,
#assignmentsStep,
#planStep,
#exportStep,
#exportArea,
#kurzanleitung {
  scroll-margin-top: 96px;
}

.project-bar { order: 1; }
.import-review { order: 2; }
.project-return-notice { order: 3; }
.workflow-guide { order: 4; }
.hero-intro { order: 5; }
.welcome-banner { order: 6; }
.workflow-step-panel,
#planStep,
#exportStep { order: 7; }
.quick-guide { order: 8; }
.trust-section { order: 9; }

.card,
.panel,
.section,
.summary,
.toolbar,
.table-shell,
.trust-section,
.hero-intro,
.welcome-banner {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 10px 28px rgba(11, 31, 51, 0.06);
}

.project-bar,
.workflow-guide,
.workflow-step-panel,
#planStep,
.import-review {
  padding: 18px;
}

.project-bar {
  align-items: center;
  border-color: rgba(11, 31, 51, 0.08);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.045);
}

.project-current span,
.project-switch label,
.field label,
.field-label,
.source-status-label,
.label {
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.project-current strong {
  color: var(--color-navy);
  font-size: var(--font-size-lg);
}

.project-controls {
  gap: 10px;
}

.project-switch {
  min-width: 220px;
}

.hero-intro {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
}

.hero-intro::after {
  display: none;
  content: none;
}

.welcome-list li,
.badge,
.warnings span,
.association-badge,
.schedule-time-group-count,
.schedule-result-badge,
.trainer-code-badge,
.selected-player-chip {
  border-radius: var(--radius-pill);
}

.btn-primary,
button.primary,
#newProjectBtn,
#loadParticipantsBtn,
#extractPdfTextBtn:not(:disabled),
#confirmAssociationBtn,
#confirmPlayersBtn,
#confirmTrainersBtn,
#applyAssignmentsBtn {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.btn-primary:hover,
button.primary:hover,
#newProjectBtn:hover,
#loadParticipantsBtn:hover,
#extractPdfTextBtn:not(:disabled):hover,
#confirmAssociationBtn:hover,
#confirmPlayersBtn:hover,
#confirmTrainersBtn:hover,
#applyAssignmentsBtn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

.btn-secondary,
button:not(.primary):not(.danger) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

button:not(.primary):not(.danger):hover,
.btn-secondary:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-soft);
}

.btn-secondary:hover {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text);
}

button.danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

input,
select,
textarea {
  min-height: 40px;
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  background-clip: padding-box;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  border-color: var(--color-primary);
}

.step-number {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.section-head h2,
.trust-copy h2,
.quick-guide-head h2 {
  color: var(--color-navy);
  font-size: clamp(20px, 2vw, 24px);
}

.section-head p,
.dialog-copy,
.step-guidance-copy span,
.source-status-meta,
.participant-meta,
.trainer-summary span,
.trust-grid span {
  color: var(--color-text-muted);
}

.control-overview {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(260px, 1.15fr);
  gap: 14px;
}

.summary-metric,
.tournament,
.traffic-card,
.review-block,
.source-card,
.source-status-card,
.source-status-note,
.participant-selection-summary,
.participant-picker,
.trainer-menu,
.action-group,
.auto-backup-panel,
.trust-grid article,
.share-list-panel,
.return-review-meta,
.mktt-record-card,
.mobile-schedule-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 8px 22px rgba(11, 31, 51, 0.045);
}

.summary-metric {
  position: relative;
  min-height: 126px;
  padding: 18px 18px 16px;
  overflow: hidden;
}

.summary-metric::before {
  display: none;
  content: none;
}

.summary-metric:nth-child(2)::before {
  background: var(--color-accent-soft);
}

.summary-metric:nth-child(3)::before,
.summary-metric:nth-child(4)::before {
  background: var(--color-success-soft);
}

.metric {
  color: var(--color-navy);
  font-size: clamp(30px, 2.6vw, 34px);
  font-weight: 800;
}

.label {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.summary-metric.has-alert {
  border-color: rgba(201, 54, 54, 0.28);
  background: var(--color-danger-soft);
  border-left: 6px solid var(--color-danger);
}

.summary-metric.has-alert::before {
  background: rgba(201, 54, 54, 0.12);
}

.summary-metric.has-alert .metric,
.summary-metric.has-alert .label {
  color: var(--color-danger);
}

.summary-metric.has-warning {
  border-color: rgba(241, 194, 27, 0.55);
  background: var(--color-warning-soft);
  border-left: 6px solid var(--color-warning);
}

.summary-metric.has-warning::before {
  background: rgba(241, 194, 27, 0.20);
}

.summary-metric.has-warning .metric,
.summary-metric.has-warning .label {
  color: var(--color-warning-text);
}

.tournament {
  grid-column: auto;
  min-height: 126px;
  color: var(--color-text-muted);
}

.control-overview .warnings {
  grid-column: 1 / -1;
}

.traffic-dashboard {
  gap: 14px;
}

.traffic-card {
  min-height: 88px;
  padding: 14px;
}

.traffic-card.is-green {
  border-color: rgba(22, 130, 93, 0.30);
  background: var(--color-success-soft);
}

.traffic-card.is-yellow {
  border-color: rgba(241, 194, 27, 0.55);
  background: var(--color-warning-soft);
}

.traffic-card.is-red {
  border-color: rgba(201, 54, 54, 0.28);
  background: var(--color-danger-soft);
}

.traffic-light {
  min-width: 42px;
  min-height: 28px;
}

.traffic-count {
  color: var(--color-navy);
  font-size: 28px;
}

.workflow-guide {
  background: var(--color-surface);
}

.workflow-guide.is-collapsed {
  background: rgba(255, 255, 255, 0.90);
  opacity: 1;
}

.workflow-steps {
  gap: 10px;
}

.workflow-steps li:not(:last-child)::after {
  top: 31px;
  left: calc(100% + 4px);
  width: 8px;
  background: var(--color-border-strong);
}

.workflow-step-button {
  min-height: 86px;
  padding: 10px 12px;
  border-color: var(--color-border);
  border-radius: 14px;
}

.workflow-step-button.is-current {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 18px rgba(11, 31, 51, 0.05);
}

.workflow-step-button.is-complete {
  border-color: rgba(22, 130, 93, 0.30);
  background: var(--color-success-soft);
}

.workflow-step-button.is-upcoming {
  background: var(--color-surface-muted);
}

.workflow-step-index,
.workflow-accordion-index {
  border-radius: var(--radius-pill);
}

.workflow-step-button.is-complete .workflow-step-index,
.workflow-step-panel.is-complete .workflow-accordion-index {
  background: var(--color-success);
}

.workflow-step-panel.is-current {
  border-color: rgba(37, 99, 235, 0.42);
  background: var(--color-surface);
  box-shadow: 0 10px 28px rgba(11, 31, 51, 0.06);
}

.workflow-step-panel.is-open > .workflow-accordion-header {
  border-bottom-color: var(--color-border);
  background: var(--color-surface-muted);
}

.workflow-accordion-header {
  border-radius: var(--radius-md);
}

.step-guidance {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
}

.step-guidance.is-success {
  border-color: rgba(22, 130, 93, 0.30);
  background: var(--color-success-soft);
}

.step-guidance.is-warning {
  border-color: rgba(241, 194, 27, 0.55);
  background: var(--color-warning-soft);
}

.source-grid {
  gap: 18px;
}

.source-card {
  padding: 16px;
  background: var(--color-surface-muted);
}

.source-card.is-active-source {
  border-color: rgba(37, 99, 235, 0.42);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10), 0 8px 22px rgba(11, 31, 51, 0.045);
}

.source-status-note {
  border-color: rgba(37, 99, 235, 0.28);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.server-mode-warning,
.project-return-notice,
.share-project-has-returns,
.mktt-records-warnings li,
.group-schedule-warnings,
.mobile-schedule-card.conflict {
  border-color: rgba(241, 194, 27, 0.55);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.participant-item,
.trainer-item,
.tournament-trainer-item,
.mktt-url-item,
.share-link-item {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.participant-item.selected {
  border-color: rgba(37, 99, 235, 0.36);
  background: var(--color-primary-soft);
}

.tournament-trainer-item.selected {
  border-color: rgba(22, 130, 93, 0.32);
  background: var(--color-success-soft);
}

.empty-state {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-warning,
.warnings span {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.association-badge,
.selected-player-chip,
.trainer-code-badge,
.schedule-time-group-count {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.schedule-result-badge {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

.action-group {
  padding: 16px;
  background: var(--color-surface);
}

.action-group-label {
  color: var(--color-navy);
}

.export-actions .recommended-export {
  min-height: 44px;
}

.table-shell {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

th {
  background: var(--color-surface-muted);
  color: var(--color-navy);
  border-bottom-color: var(--color-border);
}

td {
  border-bottom-color: var(--color-border);
}

tbody tr:hover,
.schedule-game-row:hover,
.schedule-time-group-button:hover,
.schedule-time-group-button:focus-visible {
  background: var(--color-surface-soft);
}

.schedule-table .missing-coach .schedule-game-cell,
.missing-coach td.coach,
.mobile-schedule-card.missing-coach {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.schedule-table .conflict .schedule-game-cell,
.conflict td,
.conflict-panel,
.mobile-schedule-card.conflict {
  background: var(--color-danger-soft);
}

.schedule-table .conflict .schedule-game-cell,
.conflict td:first-child,
.mobile-schedule-card.conflict {
  border-left-color: var(--color-danger);
}

.conflict-panel {
  border-color: rgba(201, 54, 54, 0.28);
}

.conflict-panel strong,
.conflict-list small,
.conflict-list button {
  color: var(--color-danger);
}

.conflict-list button {
  border-color: rgba(201, 54, 54, 0.24);
  background: var(--color-surface);
}

.conflict-list button:hover,
.conflict-list button:focus-visible {
  background: var(--color-danger-soft);
}

.conflict-list .conflict-suggestion {
  color: var(--color-success);
}

.trust-section {
  background:
    linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
}

.trust-grid article {
  box-shadow: none;
}

.site-footer {
  padding-bottom: 28px;
}

.site-footer .version,
.site-footer .live-pill {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.site-footer .live-pill {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.site-footer .live-pill.offline {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

button,
.btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.status {
  max-width: 420px;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
}

h2 {
  font-size: var(--font-size-xl);
}

.workflow-step-index {
  width: 32px;
  min-height: 32px;
  font-size: var(--font-size-sm);
}

.workflow-step-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.workflow-step-status {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 11px;
}

.workflow-step-meta {
  font-size: 12px;
}

.workflow-accordion-title {
  font-size: var(--font-size-lg);
}

.workflow-accordion-summary {
  font-size: var(--font-size-sm);
}

.workflow-accordion-index {
  width: 32px;
  min-height: 32px;
  font-size: var(--font-size-sm);
}

.section-head {
  margin-bottom: 10px;
}

.section-head p {
  font-size: var(--font-size-sm);
}

.action-group-label {
  font-size: var(--font-size-xs);
}

.export-actions button,
.pdf-source-quick-actions button,
.pdf-file-actions button,
.action-group button {
  min-height: 38px;
  font-size: var(--font-size-sm);
}

th {
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 9px 8px;
}

td {
  font-size: var(--font-size-base);
  padding: 8px;
}

.schedule-game-cell {
  padding-block: 8px;
}

.schedule-game-content {
  border-radius: 10px;
}

.table-shell {
  box-shadow: 0 8px 22px rgba(11, 31, 51, 0.045);
}

@media (max-width: 1100px) {
  body {
    display: block;
  }

  .app-sidebar {
    display: none;
  }

  .topbar {
    margin: 0;
    border-radius: 0;
  }

  .topbar-menu {
    display: none;
  }

  .layout {
    width: min(100%, var(--layout-max));
    margin: 0 auto;
    padding: 14px;
  }

  .hero-intro {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .hero-intro::after {
    display: none;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .settings,
  .source-grid,
  .participant-tools,
  .trainer-pool-layout,
  .trainer-form,
  .coach-layout,
  .review-grid,
  .summary,
  .control-overview {
    grid-template-columns: 1fr;
  }

  .pdf-file-actions {
    grid-template-columns: 1fr;
  }

  .toolbar,
  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .auto-backup-item {
    grid-template-columns: 1fr;
  }

  .auto-backup-actions {
    justify-content: flex-start;
  }

  .mktt-url-manager,
  .mktt-url-item {
    grid-template-columns: 1fr;
  }

  .mktt-url-item button {
    justify-self: start;
  }

  .export-actions {
    grid-template-columns: 1fr;
  }

  #exportStep .export-actions {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    width: 100%;
  }
}

@media (max-width: 960px) {
  :root {
    --card-padding: 14px;
    --radius-card: 12px;
    --radius-control: 10px;
    --button-min-height: 40px;
    --space-6: 20px;
    --space-7: 24px;
  }

  body {
    font-size: 15px;
    background: var(--color-bg);
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 19px;
    line-height: 1.2;
  }

  .card,
  .panel,
  .section,
  .summary,
  .toolbar,
  .table-shell,
  .trust-section {
    border-radius: 12px;
  }

  .panel,
  .section,
  .toolbar,
  .trust-section {
    padding: 16px;
  }

  .hero-intro {
    gap: 14px;
    padding: 20px;
  }

  .welcome-banner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .welcome-copy {
    gap: 8px;
  }

  .welcome-copy h2 {
    font-size: 18px;
  }

  .welcome-copy p {
    font-size: 13px;
  }

  .welcome-list {
    display: none;
  }

  .welcome-list li {
    min-width: 0;
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .welcome-dismiss {
    justify-self: stretch;
    width: 100%;
  }

  .quick-guide {
    scroll-margin-top: 16px;
  }

  .quick-guide-head {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-guide-toggle {
    width: 100%;
    min-width: 0;
    min-height: 40px;
  }

  .quick-guide-steps li {
    padding: 11px 11px 11px 42px;
  }

  .workflow-guide {
    position: static;
    padding: 12px;
  }

  .workflow-guide.is-collapsed {
    padding: 10px 12px;
  }

  .workflow-guide-toggle {
    width: 100%;
    min-height: 40px;
  }

  .workflow-steps {
    display: grid;
    grid-auto-columns: minmax(178px, 74vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    margin-inline: -12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 12px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .workflow-steps li:not(:last-child)::after {
    top: 34px;
    left: calc(100% + 2px);
    width: 4px;
    height: 2px;
  }

  .workflow-step-button {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 74px;
    padding: 9px;
    scroll-snap-align: start;
  }

  .workflow-step-index {
    grid-row: 1 / 3;
  }

  .workflow-step-title {
    align-self: end;
  }

  .workflow-step-status {
    grid-column: 2;
    justify-self: start;
  }

  .workflow-step-meta {
    grid-column: 2;
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .workflow-hint {
    max-width: none;
  }

  .workflow-step-panel.is-open {
    padding: var(--space-3);
  }

  .workflow-step-panel.is-open > .workflow-accordion-header {
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  }

  .workflow-accordion-header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--space-2);
    min-height: 62px;
    padding: 10px;
  }

  .workflow-accordion-index {
    width: 32px;
    min-height: 32px;
  }

  .workflow-accordion-status {
    grid-column: 2;
    justify-self: start;
  }

  .workflow-accordion-title {
    font-size: 17px;
  }

  .workflow-accordion-summary {
    font-size: 13px;
  }

  .source-status-board {
    grid-template-columns: 1fr;
  }

  button,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 40px;
    font-size: 16px;
  }

  button {
    padding: 8px 10px;
  }

  .project-controls button:not(.primary):not(.danger),
  .actions button:not(.primary):not(.danger),
  .mini-actions button:not(.primary):not(.danger),
  .source-card button:not(.primary):not(.danger),
  .dialog-actions button:not(.primary):not(.danger),
  .action-group button:not(.primary):not(.danger),
  .pdf-file-actions button:not(.primary):not(.danger),
  .pdf-source-quick-actions button:not(.primary):not(.danger),
  .auto-backup-actions button:not(.primary):not(.danger) {
    border-color: var(--line-strong);
    background: #fff;
  }

  .project-controls .btn-secondary,
  .actions .btn-secondary,
  .mini-actions .btn-secondary,
  .source-card .btn-secondary,
  .dialog-actions .btn-secondary,
  .action-group .btn-secondary,
  .pdf-file-actions .btn-secondary,
  .pdf-source-quick-actions .btn-secondary,
  .auto-backup-actions .btn-secondary {
    border-color: var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
  }

  .actions,
  .mini-actions,
  .project-controls,
  .dialog-actions,
  .pdf-file-actions,
  .pdf-source-quick-actions,
  .auto-backup-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .project-switch,
  .action-with-subtext,
  .plan-action-hint {
    grid-column: 1 / -1;
  }

  .actions button,
  .mini-actions button,
  .project-controls button,
  .dialog-actions button,
  .export-actions button,
  .source-card button,
  .pdf-source-quick-actions button,
  .auto-backup-actions button {
    width: 100%;
  }

  .source-card .mktt-help-button {
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .source-card .label-with-help {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .source-card .mktt-help-tooltip {
    display: contents;
  }

  .source-card .mktt-tooltip {
    display: none;
    position: static;
    flex: 0 0 100%;
    width: 100%;
  }

  .mktt-help-tooltip:hover .mktt-tooltip,
  .mktt-help-tooltip:focus-within .mktt-tooltip,
  .mktt-help-tooltip:active .mktt-tooltip {
    display: block;
    transform: none;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 12px 14px;
  }

  .status {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .topbar h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .topbar-tagline {
    max-width: none;
    font-size: 13px;
    margin-top: 3px;
  }

  .status {
    grid-column: 1 / -1;
    max-width: none;
    min-height: 30px;
    padding: 5px 8px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .version,
  .live-pill {
    justify-content: center;
    min-height: 30px;
    padding: 5px 8px;
  }

  .layout {
    gap: 10px;
    padding: 10px 12px 20px;
  }

  .project-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .project-switch {
    min-width: 0;
    width: 100%;
  }

  .project-current strong {
    font-size: 18px;
    line-height: 1.2;
  }

  .section-head {
    gap: 10px;
    margin-bottom: 10px;
  }

  .section-head p {
    line-height: 1.35;
  }

  .source-step,
  .settings,
  .participants,
  .trainer-pool,
  .coaching {
    padding: 16px;
  }

  .source-card,
  .source-status-card,
  .source-status-note,
  .action-group,
  .participant-picker,
  .trainer-menu,
  .review-block,
  .auto-backup-panel {
    border-radius: 10px;
  }

  .source-card {
    padding: 12px;
  }

  .source-status-board {
    margin-top: 10px;
  }

  .settings {
    align-items: stretch;
  }

  .pdf-source-header {
    flex-direction: column;
  }

  .mktt-records-warnings-body {
    font-size: 13px;
  }

  .pdf-source-header button {
    width: 100%;
  }

  .pdf-source-meta span {
    min-height: 28px;
  }

  .tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .export-actions button {
    min-height: 40px;
    width: 100%;
  }

  .action-group {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .participant-list,
  .assignment-list {
    grid-template-columns: 1fr;
    max-height: min(58vh, 420px);
  }

  .participant-item,
  .tournament-trainer-item,
  .trainer-item {
    border-radius: 10px;
  }

  .trainer-item {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .trainer-item input[type="text"],
  .trainer-item button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .step-guidance {
    align-items: stretch;
  }

  .step-guidance-action {
    min-width: 0;
    width: 100%;
  }

  .coach-layout .field {
    max-width: none;
  }

  .table-shell {
    display: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-schedule {
    display: grid;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .mobile-schedule h2 {
    margin: 0;
    padding: 0 2px;
    font-size: 16px;
  }

  .mobile-schedule-list {
    display: grid;
    gap: 9px;
    min-width: 0;
  }

  .mobile-schedule-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.05);
  }

  .mobile-schedule-card.missing-coach {
    border-left: 4px solid var(--red);
  }

  .mobile-schedule-card.conflict {
    border-left: 4px solid var(--amber);
    background: #fffaf0;
  }

  .mobile-schedule-competition {
    min-width: 0;
  }

  .mobile-schedule-competition {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    color: var(--muted);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mobile-schedule-field input,
  .mobile-schedule-field select,
  .mobile-schedule-field textarea {
    min-height: 38px;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 16px;
  }

  .mobile-schedule-field span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .mobile-match-coach {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
  }

  .mobile-match-coach select {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    opacity: 0;
  }

  .mobile-match-coach-display {
    display: block;
    min-height: 38px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 9px;
    background: #fff;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mobile-schedule-details {
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .mobile-schedule-details summary {
    min-height: 38px;
    padding: 8px 10px;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }

  .mobile-match-details-link {
    min-width: 78px;
  }

  .mobile-schedule-details[open] summary {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
  }

  .mobile-schedule-fields {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .mobile-schedule-details:not([open]) > .mobile-schedule-fields {
    display: none;
  }

  .mobile-schedule-field {
    display: grid;
    gap: 5px;
  }

  .mobile-schedule-fields .danger {
    width: 100%;
  }

  .trust-section {
    gap: 14px;
  }

  .trust-grid {
    gap: 10px;
  }

  .trust-grid article {
    padding: 14px;
    border-radius: 10px;
  }

  .trust-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .trust-links a {
    justify-content: center;
    min-height: 40px;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .table-shell {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-schedule {
    display: none;
  }

  .schedule-game-cell {
    padding-inline: 10px;
  }

  .schedule-game-content {
    width: 100%;
    padding-inline: 6px;
  }
}

@media (max-width: 639px) {
  .step6-export-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .step6-export-section {
    grid-column: 1 / -1;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
  }

  .step6-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border-color: var(--line-strong);
    background: #fff;
    color: var(--blue-dark);
    font-weight: 800;
    text-align: left;
  }

  .step6-section-toggle::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
  }

  .step6-export-section[data-open="true"] .step6-section-toggle::after {
    content: "-";
  }
}

@media (max-width: 480px) {
  .optional-tool > summary {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 10px 12px;
  }

  .optional-tool > summary p {
    display: none;
  }

  .layout {
    padding: 8px;
  }

  .topbar {
    padding: 14px;
  }

  .site-footer {
    justify-content: flex-start;
    padding: 0 8px 12px;
  }

  .hero-intro {
    display: grid;
    padding: 18px 16px;
  }

  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .summary-metric {
    min-height: 58px;
    padding: 8px;
  }

  .summary .tournament,
  .summary .warnings {
    grid-column: 1 / -1;
  }

  .project-controls {
    gap: 7px;
  }

  .workflow-step-panel.is-open {
    padding: 12px;
  }

  .workflow-step-panel.is-open > .workflow-accordion-header {
    margin: -12px -12px 10px;
  }

  .source-card,
  .action-group,
  .auto-backup-panel {
    padding: 10px;
  }

  .participant-picker summary,
  .trainer-menu summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media print {
  body {
    background: #fff;
  }

  .topbar,
  .site-footer,
  .workflow-guide,
  .optional-tool,
  .project-bar,
  .settings,
  .participants,
  .trainer-pool,
  .coaching {
    display: none;
  }

  #planStep {
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  #planStep > .workflow-accordion-header,
  #planStep .tabs,
  #planStep .table-filters,
  #planStep .plan-status-line,
  #planStep .plan-work-actions,
  #planStep .plan-view-switch,
  #planStep .plan-view-summary,
  #exportStep {
    display: none !important;
  }

  .quick-guide {
    break-inside: avoid;
    box-shadow: none;
  }

  .quick-guide .quick-guide-toggle {
    display: none;
  }

  .quick-guide .quick-guide-content,
  .quick-guide.is-collapsed .quick-guide-content {
    max-height: none;
    margin-top: 12px;
    opacity: 1;
    overflow: visible;
  }

  .layout {
    padding: 0;
  }

  .summary,
  .table-shell {
    box-shadow: none;
    border: 0;
  }

  .table-shell {
    display: block !important;
    overflow: visible;
  }

  .mobile-schedule {
    display: none !important;
  }

  td input,
  td select {
    border: 0;
  }

  .danger,
  .actions-col {
    display: none;
  }
}

body.auth-required {
  display: block;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-navy);
}

body.auth-required > :is(.shell-toggle-input, .skip-link, .app-sidebar, .sidebar-backdrop, header, main, dialog, .site-footer) {
  display: none !important;
}

body.auth-required > .auth-panel:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  background: var(--color-navy);
}

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

.auth-card {
  width: min(460px, 100%);
  display: grid;
  gap: 20px;
  padding: 28px;
  border: 1px solid #d4e2ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(4, 13, 31, 0.18);
}

.auth-copy {
  display: grid;
  gap: 7px;
}

.auth-card h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.12;
}

.auth-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.auth-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.auth-trust-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.auth-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  min-height: 44px;
}

#authPanel .auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

#authPanel .auth-remember input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.auth-error {
  min-height: 20px;
  color: #b91c1c;
  font-weight: 800;
}

.auth-help {
  font-size: 12px;
  text-align: center;
}

/* Focused app-shell cleanup */
@media (min-width: 1101px) {
  body {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body:has(#appShellToggle:checked) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app-sidebar {
    width: 220px;
    gap: 16px;
    padding: 16px 12px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.16);
  }

  body:has(#appShellToggle:checked) .app-sidebar {
    width: 64px;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    padding: 14px 8px;
  }

  .sidebar-head {
    align-items: center;
  }

  body:has(#appShellToggle:checked) .sidebar-head {
    display: grid;
    justify-items: center;
  }

  .sidebar-brand {
    gap: 10px;
    padding: 0;
    font-size: 16px;
  }

  .sidebar-collapse {
    min-width: 0;
    min-height: 32px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .toggle-collapsed {
    display: none;
  }

  body:has(#appShellToggle:checked) .sidebar-collapse {
    display: inline-flex;
    width: 48px;
    padding: 0;
    font-size: 11px;
  }

  body:has(#appShellToggle:checked) .toggle-expanded {
    display: none;
  }

  body:has(#appShellToggle:checked) .toggle-collapsed {
    display: inline;
  }

  body:has(#appShellToggle:checked) .sidebar-nav,
  body:has(#appShellToggle:checked) .sidebar-nav-secondary {
    display: none;
  }

  .sidebar-nav {
    gap: 3px;
  }

  .sidebar-nav-secondary {
    padding-top: 12px;
  }

  .sidebar-link {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
  }

  .sidebar-link:hover,
  .sidebar-link:focus-visible {
    background: rgba(255, 255, 255, 0.10);
  }

  .sidebar-mark {
    display: none;
  }

  .topbar {
    min-height: 64px;
    margin: 8px 8px 0 14px;
    padding: 12px 22px;
    border-radius: 14px 14px 0 0;
  }

  .topbar h1 {
    font-size: 23px;
    line-height: 1.1;
  }

  .topbar-menu {
    display: none;
  }

  .layout {
    width: min(100%, 1440px);
    gap: 14px;
    padding: 14px 8px 32px 14px;
  }

  .project-bar,
  .workflow-guide,
  .workflow-step-panel,
  #planStep,
  .import-review {
    padding: 16px;
  }

  .project-bar {
    border-radius: 18px;
  }

  .project-current strong {
    font-size: 16px;
  }

  .section-head h2,
  .trust-copy h2,
  .quick-guide-head h2 {
    font-size: 22px;
  }

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

  .summary-metric {
    min-height: 98px;
    padding: 14px;
    border-radius: 14px;
  }

  .metric {
    font-size: 30px;
  }

  .label {
    margin-top: 6px;
    font-size: 12px;
  }

  .tournament {
    min-height: 98px;
    padding: 14px;
    border-radius: 14px;
    font-size: 13px;
  }

  .traffic-card,
  .review-block {
    border-radius: 14px;
  }
}

/* Visibility and status refinements */
.summary-metric[hidden],
.tournament[hidden],
.warnings[hidden] {
  display: none !important;
}

body {
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.status.error {
  max-width: min(520px, 100%);
  border: 1px solid rgba(241, 194, 27, 0.35);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.server-mode-warning {
  max-width: 520px;
  border: 1px solid rgba(241, 194, 27, 0.35);
  border-radius: 14px;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  box-shadow: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar h1 {
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.1;
}

.topbar-tagline {
  font-size: 14px;
  line-height: 1.35;
}

.project-bar {
  display: grid;
  grid-template-columns: minmax(145px, 0.28fr) minmax(0, 1fr);
  gap: 14px;
}

.project-current {
  gap: 4px;
}

.project-current span,
.project-switch label {
  font-size: 12px;
}

.project-controls {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.project-switch {
  min-width: 0;
}

.project-switch select {
  min-height: 42px;
  border-radius: var(--radius-md);
  background-clip: padding-box;
}

.project-controls button {
  min-height: 42px;
  padding-inline: 14px;
}

.project-actions {
  display: grid;
  grid-template-columns: minmax(168px, auto) minmax(76px, auto) minmax(150px, auto) minmax(132px, auto);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.project-actions button {
  min-width: 0;
  white-space: nowrap;
}

.import-review {
  display: grid;
  gap: 14px;
}

.import-review .section-head {
  margin-bottom: 0;
}

.import-review .section-head h2 {
  font-size: 22px;
  line-height: 1.15;
}

.import-review .section-head p {
  margin-top: 6px;
  font-size: 14px;
}

.summary.control-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.summary.control-overview.summary-metrics-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.summary.control-overview:not(.summary-metrics-hidden) .tournament {
  grid-column: span 2;
}

.summary.control-overview .warnings {
  grid-column: 1 / -1;
}

.summary-metric {
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.06);
}

.summary-metric .metric,
.metric {
  font-size: 32px;
  line-height: 1;
}

.summary-metric .label,
.label {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.25;
}

.summary-metric.has-alert {
  border-color: rgba(201, 54, 54, 0.30);
  background: var(--color-danger-soft);
  border-left: 4px solid var(--color-danger);
}

.summary-metric.has-warning {
  border-color: rgba(241, 194, 27, 0.50);
  background: var(--color-warning-soft);
  border-left: 4px solid var(--color-warning);
}

.tournament {
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.06);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.traffic-dashboard {
  margin-top: 0;
}

.review-grid {
  gap: 14px;
}

@media (min-width: 1101px) {
  body {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  body:has(#appShellToggle:checked) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app-sidebar {
    grid-template-rows: auto auto 1fr auto auto;
    width: 216px;
    height: calc(100vh - 20px);
    margin: 10px 0 10px 10px;
    padding: 16px;
    gap: 14px;
    border-radius: 16px;
  }

  .sidebar-head {
    display: block;
  }

  .sidebar-brand {
    padding: 0;
    gap: 10px;
    font-size: 16px;
  }

  .sidebar-collapse {
    width: 100%;
    min-height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
  }

  .sidebar-nav {
    gap: 2px;
  }

  .sidebar-link {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 13px;
  }

  .sidebar-status {
    padding: 10px;
    border-radius: 12px;
  }

  body:has(#appShellToggle:checked) .app-sidebar {
    width: 64px;
    padding: 14px 8px;
  }

  body:has(#appShellToggle:checked) .sidebar-brand > span:not(.sidebar-logo),
  body:has(#appShellToggle:checked) .sidebar-label,
  body:has(#appShellToggle:checked) .sidebar-status,
  body:has(#appShellToggle:checked) .sidebar-nav,
  body:has(#appShellToggle:checked) .sidebar-nav-secondary {
    display: none;
  }

  body:has(#appShellToggle:checked) .sidebar-collapse {
    display: inline-flex;
    width: 48px;
    padding: 0;
  }

  .topbar {
    min-height: 66px;
    margin: 10px 12px 0 16px;
    padding: 12px 20px;
    border-radius: 16px;
  }

  .layout {
    width: min(100%, 1440px);
    gap: 16px;
    padding: 16px 12px 36px 16px;
  }

  .panel,
  .workflow-step-panel,
  #planStep {
    border-radius: 20px;
  }

  .project-bar,
  .workflow-guide,
  .workflow-step-panel,
  #planStep,
  .import-review {
    padding: 18px;
  }
}

@media (max-width: 1100px) {
  .summary.control-overview {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .summary.control-overview:not(.summary-metrics-hidden) .tournament {
    grid-column: 1 / -1;
  }

  .project-bar {
    grid-template-columns: 1fr;
  }

  .project-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .project-actions button {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .summary.control-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .summary.control-overview.summary-metrics-hidden {
    grid-template-columns: 1fr;
  }

  .project-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-metric {
    min-height: 58px;
    padding: 8px;
  }

  .summary-metric .metric,
  .metric {
    font-size: 22px;
  }

  .topbar h1 {
    font-size: 24px;
  }
}

/* Desktop app-shell visual polish */
@media (min-width: 1101px) {
  body {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    background:
      radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32rem),
      linear-gradient(180deg, var(--color-bg) 0%, #fff 100%);
  }

  body:has(#appShellToggle:checked) {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .app-sidebar {
    width: 236px;
    min-height: calc(100vh - 24px);
    height: calc(100vh - 24px);
    margin: 12px 0 12px 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--color-navy) 0%, #071A2D 100%);
    box-shadow: 0 18px 45px rgba(11, 31, 51, 0.18);
  }

  body:has(#appShellToggle:checked) .app-sidebar {
    width: 64px;
    padding: 14px 8px;
  }

  .sidebar-brand {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.05;
    min-width: 0;
  }

  .sidebar-collapse {
    justify-self: stretch;
    min-height: 28px;
    margin-bottom: 2px;
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.70);
    font-size: 11px;
    box-shadow: none;
  }

  .sidebar-nav {
    gap: 6px;
  }

  .sidebar-link {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 650;
  }

  .sidebar-link.is-active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
  }

  .sidebar-status {
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
  }

  .topbar {
    min-height: 78px;
    margin: 12px 12px 0 16px;
    padding: 18px 22px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 28px rgba(11, 31, 51, 0.06);
  }

  .topbar h1 {
    font-size: 26px;
    letter-spacing: 0;
  }

  .topbar-tagline {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 14px;
  }

  .status {
    min-height: 40px;
    border-radius: var(--radius-pill);
    padding: 9px 13px;
    font-size: 13px;
    text-align: left;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: min(100%, 1500px);
    padding: 16px 12px 36px 16px;
  }

  .layout > * {
    grid-column: 1 / -1;
  }

  .import-review {
    order: 1;
  }

  .project-bar {
    order: 2;
  }

  .welcome-banner {
    order: 3;
  }

  .workflow-guide {
    order: 4;
    grid-column: 1 / -1;
  }

  #sourceStep,
  #associationStep,
  #playersStep,
  #trainersStep,
  #assignmentsStep {
    order: 5;
    grid-column: 1 / -1;
  }

  #planStep {
    order: 7;
    grid-column: 1 / -1;
    position: static;
    top: auto;
  }

  .quick-guide,
  .trust-section {
    grid-column: 1 / -1;
  }

  .card,
  .panel,
  .section,
  .toolbar,
  .table-shell,
  .summary-metric,
  .tournament,
  .review-block,
  .source-card,
  .action-group,
  .auto-backup-panel {
    border-radius: var(--radius-xl);
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgba(11, 31, 51, 0.055);
  }

  .import-review {
    padding: 18px;
    gap: 14px;
  }

  .import-review > .section-head {
    display: none;
  }

  .summary.control-overview {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .summary.control-overview.summary-metrics-hidden {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary.control-overview:not(.summary-metrics-hidden) .tournament {
    grid-column: 1 / -1;
    min-height: 64px;
  }

  .summary-metric {
    min-height: 128px;
    padding: 16px;
    align-content: start;
    gap: 8px;
  }

  .summary-metric .metric,
  .metric {
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
  }

  .summary-metric .metric-text {
    color: var(--color-primary);
    font-size: 24px;
    line-height: 1.05;
  }

  .summary-metric.is-ready .metric-text {
    color: var(--color-success);
  }

  .summary-metric .label,
  .label {
    order: -1;
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 750;
  }

  .summary-metric::after {
    content: "aktuell";
    align-self: end;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 650;
  }

  .summary-metric.has-alert::after {
    content: "Bitte prüfen";
    color: var(--color-danger);
  }

  .summary-metric.has-warning::after {
    content: "Bitte prüfen";
    color: var(--color-warning-text);
  }

  .summary-metric.is-ready::after {
    content: "Zum Export";
    color: var(--color-success);
  }

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

  .review-block {
    min-height: 92px;
    padding: 14px;
    box-shadow: none;
  }

  .project-bar {
    grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1.45fr);
    padding: 16px 18px;
  }

  .project-controls button,
  .project-switch select {
    min-height: 40px;
  }

  .workflow-guide {
    padding: 18px;
  }

  .workflow-guide .section-head {
    align-items: center;
    margin-bottom: 12px;
  }

  .workflow-hint {
    display: none;
  }

  .workflow-guide-toggle {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
  }

  .workflow-guide.is-collapsed .workflow-steps {
    display: grid;
  }

  .workflow-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .workflow-step-button {
    min-height: 78px;
    padding: 10px 8px;
    border-radius: 16px;
    text-align: center;
    justify-items: center;
  }

  .workflow-step-index {
    width: 32px;
    min-height: 32px;
    border-radius: var(--radius-pill);
    font-size: 13px;
  }

  .workflow-step-title {
    font-size: 12px;
    line-height: 1.2;
  }

  .workflow-step-status,
  .workflow-step-meta {
    display: none;
  }

  .workflow-step-panel {
    padding: 0;
  }

  .workflow-step-panel.is-open {
    padding: 18px;
  }

  .workflow-step-panel.is-open > .workflow-accordion-header {
    margin: -18px -18px 16px;
  }

  .workflow-accordion-header {
    min-height: 58px;
    border-radius: 18px;
  }

  .workflow-accordion-title {
    font-size: 16px;
  }

  .workflow-accordion-summary {
    font-size: 13px;
  }

  .source-grid,
  .trainer-pool-layout,
  .coach-layout {
    gap: 14px;
  }

  #planStep {
    max-height: none;
    overflow: visible;
    padding: 18px;
  }

  #planStep .section-head h2 {
    font-size: 18px;
  }

  #planStep .tabs {
    gap: 8px;
  }

  #planStep .action-group,
  #exportStep .action-group {
    padding: 14px;
  }

  #planStep .table-shell {
    max-height: none;
    overflow: auto;
  }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .summary.control-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-guide,
  #sourceStep,
  #associationStep,
  #playersStep,
  #trainersStep,
  #assignmentsStep,
  #planStep,
  #exportStep {
    grid-column: 1 / -1;
  }

  #planStep {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .summary.control-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .summary.control-overview {
    grid-template-columns: 1fr;
  }
}

/* Desktop workflow column order */
@media (min-width: 1101px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout > * {
    grid-column: 1 / -1;
  }

  .workflow-guide {
    order: 4;
  }

  #sourceStep,
  #associationStep,
  #playersStep,
  #trainersStep,
  #assignmentsStep {
    order: 5;
  }

  #planStep,
  #exportStep {
    order: 7;
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .workflow-step-panel.is-collapsed {
    min-height: 0;
  }

  .workflow-step-panel.is-open {
    margin-top: 0;
  }

}

/* Desktop project and workflow order */
@media (min-width: 1101px) {
  .project-bar {
    order: 1;
  }

  .import-review {
    order: 2;
  }

  .project-return-notice {
    order: 3;
  }

  .welcome-banner {
    order: 4;
  }

  .workflow-guide {
    order: 5;
  }

  #sourceStep,
  #associationStep,
  #playersStep,
  #trainersStep,
  #assignmentsStep {
    order: 6;
  }

  #planStep {
    order: 7;
  }

  #exportStep {
    order: 8;
  }

  #exportStep .export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact review/export action area */
.topbar {
  min-height: 66px;
  padding-block: 12px;
}

.topbar h1 {
  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.08;
}

.topbar-tagline {
  margin-top: 4px;
}

#planStep .action-group,
#exportStep .action-group {
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(11, 31, 51, 0.035);
}

#exportStep .action-group:not(.action-group-recommended) {
  border-color: var(--color-border);
  background: #fff;
  box-shadow: none;
}

#exportStep .action-group-recommended {
  border-color: rgba(37, 99, 235, 0.38);
  background: #f3f7ff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.10);
}

@media (max-width: 720px) {
  .overview-next-action,
  .overview-todo-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-next-action button,
  .overview-todo-item button {
    width: 100%;
  }

  .overview-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #exportStep .export-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #exportStep .export-status-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-source-status {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  #planStep .action-group-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planStep .action-group-plan .action-group-label,
  #planStep .action-group-plan .plan-source-status {
    grid-column: 1 / -1;
  }

  #planStep .action-group-plan .action-with-subtext,
  #planStep .action-group-plan > button,
  #planStep .action-group-plan .compact-action-grid {
    min-width: 0;
  }

  #planStep .plan-followup-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 520px) {
  #planStep .action-group-plan,
  #planStep .plan-followup-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #planStep .mobile-schedule-details {
    width: auto;
  }

  #planStep .mobile-match-coach-display {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .compact-action-grid,
  .compact-action-grid-three,
  .action-group-plan .compact-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phase 1 wizard polish */

.app-sidebar .sidebar-nav:first-of-type {
  position: relative;
}

.app-sidebar .sidebar-nav:first-of-type::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 20px;
  left: 18px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}

.sidebar-link {
  position: relative;
}

.sidebar-link .sidebar-mark {
  display: inline-grid;
}

.sidebar-link.is-active .sidebar-mark {
  background: rgba(255, 255, 255, 0.22);
}

.sidebar-link[aria-current="step"] .sidebar-label {
  font-weight: 850;
}

@media (min-width: 1101px) {
  .topbar {
    align-items: center;
  }

  .sidebar-link {
    gap: 9px;
    min-height: 40px;
    padding-left: 8px;
  }

  .sidebar-mark {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #102c46;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
  }

  .sidebar-nav-secondary {
    margin-top: 2px;
  }

  .sidebar-nav-secondary .sidebar-mark {
    border-radius: 8px;
  }

  body:has(#appShellToggle:checked) .sidebar-nav,
  body:has(#appShellToggle:checked) .sidebar-nav-secondary {
    display: grid;
  }

  body:has(#appShellToggle:checked) .sidebar-link {
    justify-content: center;
    min-height: 40px;
    padding: 0;
  }

  body:has(#appShellToggle:checked) .sidebar-mark {
    width: 34px;
    height: 34px;
  }

  body:has(#appShellToggle:checked) .app-sidebar .sidebar-nav:first-of-type::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Phase 1 professional app shell */
body.app-shell {
  background: var(--color-bg);
}

body.app-shell .app-sidebar {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
}

body.app-shell .sidebar-nav {
  gap: 5px;
}

body.app-shell .sidebar-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
}

body.app-shell .sidebar-mark {
  display: inline-grid;
}

body.app-shell .sidebar-step-status {
  min-width: 62px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

body.app-shell .sidebar-link.is-active {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(37, 99, 235, 0.92);
}

body.app-shell .sidebar-link[data-status="complete"] .sidebar-mark {
  background: rgba(222, 251, 230, 0.15);
  color: #dff8e6;
}

body.app-shell .sidebar-link[data-status="complete"] .sidebar-step-status {
  background: rgba(222, 251, 230, 0.10);
  color: rgba(222, 251, 230, 0.86);
}

body.app-shell .sidebar-link[data-status="locked"] {
  color: rgba(255, 255, 255, 0.46);
  cursor: not-allowed;
}

body.app-shell .sidebar-link[data-status="locked"] .sidebar-mark,
body.app-shell .sidebar-link[data-status="locked"] .sidebar-step-status {
  opacity: 0.58;
}

body.app-shell .sidebar-link[data-status="error"] {
  border-color: rgba(255, 241, 241, 0.16);
}

body.app-shell .sidebar-link[data-status="error"] .sidebar-step-status {
  background: rgba(255, 241, 241, 0.12);
  color: #ffd7d9;
}

body.app-shell .sidebar-link[data-status="active"] .sidebar-step-status {
  background: rgba(208, 226, 255, 0.18);
  color: #ffffff;
}

body.app-shell .topbar {
  position: static;
  min-height: 68px;
  border-color: #e2e9f2;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(11, 31, 51, 0.045);
}

body.app-shell .topbar-menu {
  display: none;
}

body.app-shell .topbar-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.app-shell .topbar-eyebrow {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.app-shell .topbar h1 {
  margin: 0;
}

body.app-shell .topbar-tagline {
  max-width: 820px;
  margin: 0;
  overflow-wrap: anywhere;
}

body.app-shell .topbar-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 230px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.app-shell .topbar-save-status.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

body.app-shell .topbar-save-retry {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-danger-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.app-shell .topbar-save-retry:hover:not(:disabled) {
  background: var(--color-danger-soft);
}

body.app-shell .status {
  min-height: 34px;
  max-width: 300px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.25;
}

body.app-shell .panel,
body.app-shell .summary,
body.app-shell .toolbar,
body.app-shell .table-shell,
body.app-shell .welcome-banner,
body.app-shell .trust-section {
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

body.app-shell .project-bar,
body.app-shell .workflow-guide,
body.app-shell .workflow-step-panel,
body.app-shell #planStep,
body.app-shell #exportStep,
body.app-shell .import-review {
  padding: 16px;
}

body.app-shell button,
body.app-shell .btn,
body.app-shell input,
body.app-shell select {
  min-height: 40px;
  border-radius: var(--radius-md);
}

body.app-shell button,
body.app-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  height: auto;
  overflow: visible;
  line-height: 1.15;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell button:focus-visible,
body.app-shell .btn:focus-visible,
body.app-shell input:focus-visible,
body.app-shell select:focus-visible,
body.app-shell textarea:focus-visible,
body.app-shell .sidebar-link:focus-visible,
body.app-shell a:focus-visible,
body.app-shell summary:focus-visible,
body.app-shell [role="tab"]:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

body.app-shell .step-accordion-list > .step-summary-card > .workflow-accordion-header:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

body.app-shell .badge-success {
  color: var(--color-success-text);
}

body.app-shell .workflow-step-button.is-complete,
body.app-shell .workflow-step-panel.is-complete .workflow-accordion-status,
body.app-shell .workflow-step-button.is-complete .workflow-step-status {
  border-color: rgba(22, 130, 93, 0.18);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

body.app-shell .workflow-step-button.is-current,
body.app-shell .workflow-step-panel.is-current .workflow-accordion-status {
  border-color: rgba(37, 99, 235, 0.22);
  background: var(--color-primary-soft);
}

body.app-shell .workflow-step-button.is-error,
body.app-shell .workflow-step-panel.is-error .workflow-accordion-status {
  border-color: rgba(201, 54, 54, 0.22);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

body.app-shell .project-bar,
body.app-shell .workflow-guide,
body.app-shell .import-review {
  border-color: #e6edf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

body.app-shell .workflow-step-panel {
  border-color: #d8dee8;
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell .workflow-step-panel.is-current,
body.app-shell .workflow-step-panel.is-open {
  border-color: #dbe3ee;
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(11, 31, 51, 0.065);
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed,
body.app-shell .workflow-step-panel.is-upcoming.is-collapsed {
  border-color: #e6edf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

body.app-shell .workflow-step-panel.is-open {
  padding: 24px;
  margin-top: 4px;
}

body.app-shell .workflow-step-panel.is-open > .workflow-accordion-header {
  min-height: auto;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom-color: #e4ebf3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .workflow-step-panel.is-collapsed > .workflow-accordion-header {
  min-height: 58px;
  padding: 12px 18px;
  border-radius: 14px;
  background: transparent;
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed > .workflow-accordion-header {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed .workflow-accordion-index {
  width: 34px;
  min-height: 34px;
  font-size: 14px;
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed .workflow-accordion-title {
  font-size: 16px;
  line-height: 1.2;
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed .workflow-accordion-summary {
  font-size: 13px;
  line-height: 1.25;
}

body.app-shell .workflow-step-panel.is-complete.is-collapsed .workflow-accordion-status {
  padding: 5px 12px;
  font-size: 12px;
}

body.app-shell .association-card,
body.app-shell .source-card,
body.app-shell .action-group,
body.app-shell .participant-picker,
body.app-shell .trainer-menu,
body.app-shell .assignment-side-card,
body.app-shell .assignment-list,
body.app-shell .table-shell,
body.app-shell .auto-backup-panel,
body.app-shell .step6-export-section {
  border-color: #e5ecf4;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: none;
}

body.app-shell .association-picker-card {
  gap: 18px;
  padding: 16px;
}

body.app-shell .association-decision {
  border-left-color: #e1e9f2;
  padding-left: 18px;
}

body.app-shell .topbar {
  align-items: flex-start;
}

body.app-shell .topbar-save-status,
body.app-shell .status,
body.app-shell .workflow-accordion-status,
body.app-shell .workflow-step-status {
  min-width: 0;
  max-width: 100%;
}

body.app-shell .topbar-save-status,
body.app-shell .status {
  overflow: visible;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell .step-accordion-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  order: 7;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.app-shell .step-accordion-list > .step-summary-card,
body.app-shell .step-accordion-list > #planStep.step-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

body.app-shell .step-accordion-list > .step-summary-card.is-current,
body.app-shell .step-accordion-list > .step-summary-card.is-open,
body.app-shell .step-accordion-list > #planStep.step-summary-card.is-current,
body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open {
  grid-column: auto !important;
  border-color: rgba(37, 99, 235, 0.28);
  background: #fff;
  box-shadow: 0 10px 26px rgba(11, 31, 51, 0.055);
}

body.app-shell .step-accordion-list > .step-summary-card.is-complete,
body.app-shell .step-accordion-list > .step-summary-card[data-status="complete"] {
  border-color: #d7eadf;
}

body.app-shell .step-accordion-list > .step-summary-card > .workflow-accordion-header {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 18px 22px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > .workflow-accordion-header {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid #edf2f7;
  border-radius: 18px 18px 0 0;
}

body.app-shell .step-accordion-list .workflow-accordion-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  width: 44px;
  min-height: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

body.app-shell .step-accordion-list .workflow-accordion-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  grid-column: 2;
  min-width: 0;
  padding-right: 0;
  text-align: left;
}

body.app-shell .step-accordion-list .workflow-accordion-title {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell .step-accordion-list .workflow-accordion-summary {
  min-width: 0;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

body.app-shell .step-accordion-list .workflow-accordion-status {
  position: static;
  grid-column: 3;
  justify-self: end;
  min-height: 26px;
  max-width: none;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body.app-shell .step-accordion-list > .step-summary-card > :not(.workflow-accordion-header) {
  min-width: 0;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > :not(.workflow-accordion-header) {
  display: revert;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > .section-head,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .source-grid,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .server-mode-warning,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .source-status-board,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .source-import-preview,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .association-layout,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .participant-tools,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .participant-picker,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .participant-selection-summary,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .trainer-pool-layout,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .assignment-guidance,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .coach-layout,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .plan-work-actions,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .plan-view-switch,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .table-shell,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .mobile-schedule,
body.app-shell .step-accordion-list > .step-summary-card.is-open > .export-step {
  margin-top: 0;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open {
  padding: 0;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > :not(.workflow-accordion-header) {
  box-sizing: border-box;
  width: auto;
  max-width: calc(100% - 48px);
  margin-inline: 24px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > .section-head {
  margin-top: 22px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > :last-child {
  margin-bottom: 24px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-collapsed > :not(.workflow-accordion-header) {
  display: none !important;
}

body.app-shell .overview-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

body.app-shell .overview-next-action {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-color: rgba(37, 99, 235, 0.18);
  border-radius: var(--app-inner-radius);
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  box-shadow: none;
}

body.app-shell .overview-next-action > div {
  min-width: 0;
}

body.app-shell .overview-next-label {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
}

body.app-shell .overview-next-action strong {
  font-size: 17px;
  font-weight: 750;
  line-height: 1.18;
}

body.app-shell .overview-next-action span:not(.overview-next-label) {
  max-width: 68ch;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

body.app-shell .overview-next-action button {
  max-width: 100%;
  min-width: 180px;
  white-space: normal;
}

body.app-shell .overview-status-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  min-height: 140px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

body.app-shell .overview-status-card[data-status="complete"] {
  border-color: #cfe9d8;
  background: #fbfefc;
}

body.app-shell .overview-status-card[data-status="active"] {
  border-color: rgba(37, 99, 235, 0.28);
  background: #f7fbff;
}

body.app-shell .overview-status-card[data-status="error"] {
  border-color: rgba(185, 28, 28, 0.24);
  background: #fff8f4;
}

body.app-shell .overview-status-card[data-status="locked"] {
  opacity: 0.78;
}

body.app-shell .overview-status-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: #e7edf5;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

body.app-shell .overview-status-card[data-status="complete"] .overview-status-icon {
  background: var(--color-success);
  color: #fff;
}

body.app-shell .overview-status-card[data-status="active"] .overview-status-icon {
  background: var(--color-primary);
  color: #fff;
}

body.app-shell .overview-status-card[data-status="error"] .overview-status-icon {
  background: var(--color-danger);
  color: #fff;
}

body.app-shell .overview-status-body {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: 8px;
  min-width: 0;
  height: 100%;
}

body.app-shell .overview-status-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

body.app-shell .overview-status-head strong {
  min-width: 0;
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.18;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell .overview-status-head span {
  justify-self: end;
  min-height: 28px;
  min-width: 76px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: #eef2f7;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

body.app-shell .overview-status-card[data-status="complete"] .overview-status-head span {
  background: #dcfce7;
  color: #166534;
}

body.app-shell .overview-status-card[data-status="active"] .overview-status-head span {
  background: #dbeafe;
  color: #1d4ed8;
}

body.app-shell .overview-status-card[data-status="error"] .overview-status-head span {
  background: #fee2e2;
  color: #991b1b;
}

body.app-shell .overview-status-card p,
body.app-shell .overview-status-card small {
  min-width: 0;
  margin: 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

body.app-shell .overview-status-card p {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

body.app-shell .overview-status-card small {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

body.app-shell .overview-status-card button {
  align-self: end;
  justify-self: start;
  min-height: 36px;
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

body.app-shell .project-bar {
  display: grid;
  grid-template-columns: minmax(180px, 0.24fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  overflow: visible;
}

body.app-shell .project-bar > *,
body.app-shell .project-controls > *,
body.app-shell .project-actions > * {
  min-width: 0;
  max-width: 100%;
}

body.app-shell .project-controls {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
  min-width: 0;
  width: 100%;
}

body.app-shell .project-switch {
  min-width: 0;
  max-width: 100%;
}

body.app-shell .project-switch select {
  width: 100%;
}

body.app-shell .project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

body.app-shell .project-actions button {
  flex: 0 1 auto;
  min-width: min(100%, 76px);
  max-width: 100%;
  padding-inline: 14px;
}

body.app-shell .project-actions button.primary {
  min-width: min(100%, 172px);
}

body.app-shell .project-actions button.danger {
  min-width: min(100%, 138px);
}

body.app-shell .actions,
body.app-shell .mini-actions,
body.app-shell .dialog-actions,
body.app-shell .selection-undo,
body.app-shell .pdf-file-actions,
body.app-shell .pdf-source-quick-actions,
body.app-shell .plan-primary-actions,
body.app-shell .plan-work-actions,
body.app-shell .plan-followup-actions,
body.app-shell .auto-backup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

body.app-shell .actions > *,
body.app-shell .mini-actions > *,
body.app-shell .dialog-actions > *,
body.app-shell .selection-undo > *,
body.app-shell .pdf-file-actions > *,
body.app-shell .pdf-source-quick-actions > *,
body.app-shell .plan-primary-actions > *,
body.app-shell .plan-work-actions > *,
body.app-shell .plan-followup-actions > *,
body.app-shell .auto-backup-actions > * {
  min-width: 0;
  max-width: 100%;
}

body.app-shell .sidebar-link {
  grid-template-columns: 30px minmax(0, 1fr) max-content;
}

body.app-shell .sidebar-label {
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell .layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 34px;
}

@media (min-width: 1101px) {
  body.app-shell {
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 16px 24px;
    padding: 14px 16px 18px 14px;
    background: var(--color-bg);
  }

  body.app-shell:has(#appShellToggle:checked) {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 18px;
  }

  body.app-shell .app-sidebar {
    top: 14px;
    width: 272px;
    height: calc(100vh - 28px);
    margin: 0;
    border-radius: 18px;
    background: var(--color-navy);
    box-shadow: 0 16px 38px rgba(11, 31, 51, 0.18);
  }

  body.app-shell:has(#appShellToggle:checked) .app-sidebar {
    width: 64px;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-step-status {
    display: none;
  }

  body.app-shell .topbar {
    grid-column: 2;
    width: 100%;
    margin: 0;
  }

  body.app-shell .layout {
    grid-column: 2;
    gap: 12px;
    padding: 0 0 34px;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-label {
    display: none;
  }
}

@media (max-width: 1280px) and (min-width: 1101px) {
  body.app-shell .project-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .project-controls {
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  }

  body.app-shell .overview-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body.app-shell .project-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .project-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  body.app-shell .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  body.app-shell .topbar-menu {
    grid-column: 1;
    grid-row: 1;
  }

  body.app-shell .topbar-title {
    grid-column: 2;
    grid-row: 1;
  }

  body.app-shell .topbar-save-status {
    justify-content: center;
    max-width: none;
  }

  body.app-shell .status {
    grid-column: 1 / -1;
    max-width: none;
  }

  body.app-shell .project-bar {
    order: 1;
  }

  body.app-shell .workflow-guide {
    order: 2;
  }

  body.app-shell .import-review {
    order: 3;
  }

  body.app-shell .workflow-steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scroll-snap-type: x proximity;
  }

  body.app-shell .workflow-guide.is-collapsed {
    gap: 10px;
  }

  body.app-shell .workflow-guide.is-collapsed .workflow-steps {
    display: flex;
  }

  body.app-shell .workflow-steps li {
    flex: 0 0 min(210px, 72vw);
    scroll-snap-align: start;
  }

  body.app-shell .workflow-step-button {
    min-height: 100%;
  }

  body.app-shell .overview-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.app-shell .topbar {
    padding: 12px;
  }

  body.app-shell .topbar-save-status {
    width: 100%;
  }

  body.app-shell .project-bar,
  body.app-shell .workflow-guide,
  body.app-shell .workflow-step-panel,
  body.app-shell #planStep,
  body.app-shell #exportStep,
  body.app-shell .import-review {
    padding: 14px;
  }

  body.app-shell .overview-status-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.app-shell .overview-status-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 128px;
    padding: 16px;
  }

  body.app-shell .overview-status-icon {
    width: 40px;
    height: 40px;
  }

  body.app-shell .step-accordion-list > .step-summary-card > .workflow-accordion-header {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 16px;
  }

  body.app-shell .step-accordion-list > .step-summary-card.is-open > :not(.workflow-accordion-header) {
    margin-inline: 16px;
  }
}

@media (max-width: 900px) {

  .source-primary-action {
    justify-items: stretch;
    min-width: 0;
  }

  .source-primary-action span {
    text-align: left;
  }

  .source-preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .association-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .association-picker-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  .association-decision {
    align-content: start;
    border-top: 1px solid var(--color-border);
    border-left: 0;
    padding-top: 14px;
    padding-left: 0;
  }

  .participant-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .participant-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .participant-selected-toggle {
    align-self: end;
  }

  .coach-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-sidebar {
    order: 2;
  }
}

@media (max-width: 640px) {
  body.app-shell .layout {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .source-preview-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-import-preview {
    padding: 14px;
  }

  .association-card {
    padding: 12px;
  }

  .association-actions button {
    width: 100%;
  }

  .participant-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .ettu-event-scope-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .ettu-event-scope-callout button {
    width: 100%;
  }

  .participant-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .participant-toolbar-actions button {
    width: 100%;
  }

  .participant-table-shell {
    display: none;
  }

  .participant-mobile-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .participant-list {
    max-height: min(58vh, 480px);
  }

  .selection-undo {
    align-items: stretch;
    display: grid;
  }

  .selection-undo button {
    width: 100%;
  }

  .assignment-list {
    max-height: min(58vh, 480px);
  }

  .assignment-table {
    display: none;
  }

  .assignment-mobile-list {
    display: grid;
    gap: 10px;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .assignment-coach-select,
  .assignment-auto-actions button {
    width: 100%;
  }

  .assignment-auto-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Visual foundation consolidation: final app-shell layer. */
body.app-shell {
  --app-card-radius: 16px;
  --app-main-radius: 18px;
  --app-inner-radius: 12px;
  --app-border: var(--color-border);
  --app-border-soft: #e6eaf0;
  --app-panel-bg: var(--color-surface);
  --app-muted-bg: var(--color-surface-muted);
  --app-card-shadow: var(--shadow-soft);
  --app-active-shadow: var(--shadow-card);
  overflow-x: hidden;
}

body.app-shell .layout,
body.app-shell .topbar {
  max-width: min(100%, 1560px);
}

body.app-shell .layout {
  gap: 14px;
}

body.app-shell .panel,
body.app-shell .summary,
body.app-shell .toolbar,
body.app-shell .table-shell,
body.app-shell .welcome-banner,
body.app-shell .trust-section,
body.app-shell .project-bar,
body.app-shell .workflow-guide,
body.app-shell .import-review,
body.app-shell .workflow-step-panel,
body.app-shell #planStep,
body.app-shell #exportStep {
  border: 1px solid var(--app-border);
  border-radius: var(--app-card-radius);
  background: var(--app-panel-bg);
  box-shadow: none;
}

body.app-shell .topbar,
body.app-shell .project-bar,
body.app-shell .workflow-guide,
body.app-shell .import-review {
  box-shadow: var(--app-card-shadow);
}

body.app-shell .project-bar,
body.app-shell .workflow-guide,
body.app-shell .import-review {
  padding: 16px 18px;
}

body.app-shell .step-accordion-list {
  gap: 12px;
}

body.app-shell .step-accordion-list > .step-summary-card,
body.app-shell .step-accordion-list > #planStep.step-summary-card {
  border-color: var(--app-border);
  border-radius: var(--app-main-radius);
  background: var(--app-panel-bg);
  box-shadow: none;
}

body.app-shell .step-accordion-list > .step-summary-card.is-current,
body.app-shell .step-accordion-list > .step-summary-card.is-open,
body.app-shell .step-accordion-list > #planStep.step-summary-card.is-current,
body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open {
  border-color: rgba(37, 99, 235, 0.26);
  box-shadow: var(--app-active-shadow);
}

body.app-shell .step-accordion-list > .step-summary-card.is-complete,
body.app-shell .step-accordion-list > .step-summary-card[data-status="complete"] {
  border-color: #d8eadf;
}

body.app-shell .step-accordion-list > .step-summary-card > .workflow-accordion-header {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 58px;
  padding: 15px 18px;
  border-radius: var(--app-main-radius);
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > .workflow-accordion-header {
  padding: 16px 20px;
  border-bottom-color: var(--app-border-soft);
  border-radius: var(--app-main-radius) var(--app-main-radius) 0 0;
}

body.app-shell .step-accordion-list .workflow-accordion-index {
  width: 38px;
  height: 38px;
  min-height: 38px;
  font-size: 14px;
}

body.app-shell .step-accordion-list .workflow-accordion-title {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
}

body.app-shell .step-accordion-list .workflow-accordion-summary {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
}

body.app-shell .step-accordion-list .workflow-accordion-status,
body.app-shell .workflow-step-status,
body.app-shell .overview-status-head span,
body.app-shell .sidebar-step-status,
body.app-shell .plan-source-status,
body.app-shell .assignment-count-badge,
body.app-shell .assignment-plan-status,
body.app-shell .assignment-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

body.app-shell .step-accordion-list .workflow-accordion-status {
  min-height: 24px;
  padding-inline: 10px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > :not(.workflow-accordion-header) {
  box-sizing: border-box;
  width: auto;
  max-width: calc(100% - 40px);
  margin-inline: 20px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > .section-head {
  margin-top: 18px;
}

body.app-shell .step-accordion-list > .step-summary-card.is-open > :last-child {
  margin-bottom: 20px;
}

body.app-shell .association-card,
body.app-shell .source-card,
body.app-shell .source-status-card,
body.app-shell .source-status-note,
body.app-shell .source-import-preview,
body.app-shell .participant-picker,
body.app-shell .participant-selection-summary,
body.app-shell .trainer-menu,
body.app-shell .assignment-side-card,
body.app-shell .assignment-list,
body.app-shell .action-group,
body.app-shell .auto-backup-panel,
body.app-shell .export-status-card,
body.app-shell .export-history,
body.app-shell .step6-export-section {
  border-color: var(--app-border-soft);
  border-radius: var(--app-inner-radius);
  background: var(--app-muted-bg);
  box-shadow: none;
}

body.app-shell .section-head {
  gap: 12px;
  margin-bottom: 14px;
}

body.app-shell .section-head h2 {
  line-height: 1.16;
}

body.app-shell .section-head p {
  max-width: 78ch;
  line-height: 1.4;
}

body.app-shell button,
body.app-shell .btn {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

body.app-shell button.primary,
body.app-shell .btn-primary {
  min-height: 40px;
  padding-inline: 16px;
  font-weight: 750;
}

body.app-shell button.danger {
  min-height: 38px;
  padding-inline: 13px;
}

body.app-shell .mktt-help-button,
body.app-shell .tab,
body.app-shell .workflow-guide-toggle,
body.app-shell .quick-guide-toggle,
body.app-shell .auto-backup-toggle,
body.app-shell .schedule-delete-button {
  font-size: 13px;
}

body.app-shell .mktt-help-button {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
}

body.app-shell .actions,
body.app-shell .mini-actions,
body.app-shell .dialog-actions,
body.app-shell .selection-undo,
body.app-shell .pdf-file-actions,
body.app-shell .pdf-source-quick-actions,
body.app-shell .plan-primary-actions,
body.app-shell .plan-work-actions,
body.app-shell .plan-followup-actions,
body.app-shell .auto-backup-actions,
body.app-shell .assignment-auto-actions {
  gap: 8px;
}

body.app-shell .compact-action-grid,
body.app-shell .compact-action-grid-three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

body.app-shell .project-bar {
  grid-template-columns: minmax(170px, 0.24fr) minmax(0, 1fr);
  gap: 14px;
}

body.app-shell .project-controls {
  gap: 10px;
}

body.app-shell .project-actions {
  gap: 8px;
}

body.app-shell .project-actions button {
  flex: 1 1 132px;
}

body.app-shell .project-actions #shareProjectBtn {
  flex-basis: 96px;
}

body.app-shell .project-actions #newProjectBtn,
body.app-shell .project-actions #renameProjectBtn {
  flex-basis: 170px;
}

body.app-shell .project-actions #deleteProjectBtn {
  flex-basis: 142px;
}

body.app-shell .overview-status-grid {
  gap: 14px;
}

body.app-shell .overview-status-card {
  min-height: 126px;
  padding: 16px 18px;
  border-color: var(--app-border);
  border-radius: var(--app-card-radius);
}

body.app-shell .overview-status-icon {
  width: 38px;
  height: 38px;
}

body.app-shell .overview-status-body {
  gap: 7px;
}

body.app-shell .overview-status-card p {
  font-size: 14px;
}

body.app-shell .overview-status-card small {
  font-size: 12px;
}

body.app-shell .assignment-table {
  font-size: 12px;
}

body.app-shell .assignment-table th,
body.app-shell .assignment-table td {
  padding: 10px 9px;
}

body.app-shell .assignment-player-cell {
  font-size: 14px;
  line-height: 1.18;
}

body.app-shell .assignment-coach-select {
  min-height: 34px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

body.app-shell #planTable,
body.app-shell .schedule-table {
  font-size: 14px;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea {
  max-width: 100%;
  border-radius: var(--radius-md);
}

body.app-shell .export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.app-shell .export-status-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  background: #fffaf2;
}

body.app-shell .export-status-card[data-tone="success"] {
  background: #f2fbf5;
}

body.app-shell .export-status-card > ul {
  grid-column: 1 / -1;
}

body.app-shell .export-readiness-action {
  justify-self: end;
}

body.app-shell .export-primary-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 14px 18px;
  align-items: center;
  border-color: rgba(37, 99, 235, 0.22);
  background: linear-gradient(180deg, #f8fbff, #fff);
}

body.app-shell .export-primary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.app-shell .export-primary-copy strong {
  color: var(--color-navy);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.18;
}

body.app-shell .export-primary-copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

body.app-shell .export-primary-card .action-group-label {
  grid-column: 1 / -1;
}

body.app-shell .export-primary-card .recommended-export {
  min-height: 48px;
  align-self: stretch;
}

body.app-shell .export-actions:not(.is-export-ready) .export-primary-card {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fffaf2;
}

body.app-shell .export-secondary-group {
  padding: 0;
  overflow: hidden;
  background: #fff;
  grid-column: auto;
}

body.app-shell .export-secondary-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}

body.app-shell .export-secondary-group > summary::-webkit-details-marker {
  display: none;
}

body.app-shell .export-secondary-group > summary::after {
  content: "Öffnen";
  padding: 4px 8px;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 750;
}

body.app-shell .export-secondary-group[open] > summary::after {
  content: "Schließen";
}

body.app-shell .export-secondary-group > summary span {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}

body.app-shell .export-secondary-group > summary small {
  grid-column: 1;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

body.app-shell .export-secondary-group > :not(summary) {
  margin-inline: 16px;
}

body.app-shell .export-secondary-group > :last-child {
  margin-bottom: 16px;
}

body.app-shell .export-secondary-group .compact-action-grid,
body.app-shell .export-secondary-group .date-export-group,
body.app-shell .export-secondary-group .action-helper,
body.app-shell .export-secondary-group .action-group-source-update {
  margin-top: 0;
}

body.app-shell .export-secondary-group .date-export-group,
body.app-shell .export-secondary-group .action-group-source-update {
  padding-top: 12px;
  border-top: 1px solid var(--app-border-soft);
}

body.app-shell .export-secondary-group .action-group-source-update {
  display: grid;
  gap: 8px;
}

body.app-shell .export-actions:not(.is-export-ready) .export-secondary-group {
  background: #f8fafc;
}

body.app-shell .export-secondary-group .compact-action-grid,
body.app-shell .export-secondary-group .compact-action-grid-three {
  gap: 10px;
}

body.app-shell #exportStep .action-group,
body.app-shell #planStep .action-group {
  padding: 14px;
}

body.app-shell #planStep .action-group-plan {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

body.app-shell #planStep .action-group-plan > *,
body.app-shell #planStep .action-group-plan .compact-action-grid {
  min-width: 0;
}

body.app-shell #exportStep .action-group-recommended {
  border-color: rgba(37, 99, 235, 0.26);
  background: #f6f9ff;
  box-shadow: none;
}

body.app-shell #exportStep .export-secondary-group {
  padding: 0;
}

body.app-shell #exportStep .export-actions:not(.is-export-ready) .export-primary-card {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fffaf2;
}

body.app-shell .export-actions button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.16;
  white-space: normal;
}

body.app-shell .export-actions .recommended-export {
  min-height: 46px;
  font-size: 14px;
}

body.app-shell .export-actions button:disabled {
  border-color: #dce3eb;
  background: #f3f6f9;
  color: #7b8490;
  opacity: 1;
}

body.app-shell #exportStep .export-secondary-group button:disabled {
  border-color: #e4eaf1;
  background: #f8fafc;
  color: #8a95a3;
  box-shadow: none;
  font-weight: 650;
}

body.app-shell #exportStep .export-actions:not(.is-export-ready) .recommended-export:disabled {
  border-color: #d9e1ea;
  background: #f5f7fa;
  color: #7a8491;
  box-shadow: none;
}

body.app-shell .mobile-schedule-card,
body.app-shell .participant-item,
body.app-shell .trainer-item,
body.app-shell .tournament-trainer-item {
  max-width: 100%;
}

@media (max-width: 1180px) {
  body.app-shell .project-bar,
  body.app-shell .project-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  body.app-shell .layout {
    gap: 12px;
  }

  body.app-shell .workflow-guide,
  body.app-shell .import-review,
  body.app-shell .project-bar {
    padding: 14px;
  }

  body.app-shell .export-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .export-secondary-group {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.app-shell .export-status-card,
  body.app-shell .export-primary-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .export-readiness-action,
  body.app-shell .export-primary-card .recommended-export {
    justify-self: stretch;
    width: 100%;
  }

  body.app-shell .overview-next-action {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .overview-next-action button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  body.app-shell {
    overflow-x: hidden;
  }

  body.app-shell .workflow-guide {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.app-shell .workflow-steps {
    display: flex;
    width: max-content;
    min-width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    gap: 8px;
  }

  body.app-shell .workflow-steps li {
    flex: 0 0 168px;
  }

  body.app-shell .workflow-step-button {
    min-height: 86px;
    padding: 10px;
  }

  body.app-shell .workflow-step-meta {
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: normal;
  }

  body.app-shell .topbar,
  body.app-shell .project-bar,
  body.app-shell .workflow-guide,
  body.app-shell .import-review,
  body.app-shell .step-accordion-list > .step-summary-card,
  body.app-shell .step-accordion-list > #planStep.step-summary-card {
    border-radius: 14px;
  }

  body.app-shell .step-accordion-list {
    gap: 10px;
  }

  body.app-shell .step-accordion-list > .step-summary-card > .workflow-accordion-header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  body.app-shell .step-accordion-list > .step-summary-card.is-open > .workflow-accordion-header {
    padding: 14px;
  }

  body.app-shell .step-accordion-list .workflow-accordion-index {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  body.app-shell .step-accordion-list .workflow-accordion-status {
    grid-column: 2;
    justify-self: start;
    min-height: 22px;
    margin-top: 2px;
    padding: 4px 8px;
    font-size: 10px;
  }

  body.app-shell .step-accordion-list .workflow-accordion-title {
    font-size: 15px;
  }

  body.app-shell .step-accordion-list .workflow-accordion-summary {
    font-size: 12px;
  }

  body.app-shell .step-accordion-list > .step-summary-card.is-open > :not(.workflow-accordion-header) {
    max-width: calc(100% - 28px);
    margin-inline: 14px;
  }

  body.app-shell .step-accordion-list > .step-summary-card.is-open > .section-head {
    margin-top: 16px;
  }

  body.app-shell .step-accordion-list > .step-summary-card.is-open > :last-child {
    margin-bottom: 16px;
  }

  body.app-shell button,
  body.app-shell .btn {
    width: auto;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 14px;
  }

  body.app-shell .actions,
  body.app-shell .mini-actions,
  body.app-shell .project-actions,
  body.app-shell .dialog-actions,
  body.app-shell .pdf-file-actions,
  body.app-shell .pdf-source-quick-actions,
  body.app-shell .auto-backup-actions,
  body.app-shell .assignment-auto-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body.app-shell .actions button,
  body.app-shell .mini-actions button,
  body.app-shell .project-actions button,
  body.app-shell .dialog-actions button,
  body.app-shell .overview-next-action button,
  body.app-shell .export-actions button,
  body.app-shell .source-card button,
  body.app-shell .pdf-source-quick-actions button,
  body.app-shell .auto-backup-actions button,
  body.app-shell .assignment-auto-actions button {
    width: 100%;
  }

  body.app-shell .overview-status-card {
    min-height: 0;
    padding: 14px;
  }
}

/* Accessibility and responsive hardening */
.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 2000;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--color-navy);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translate(-50%, calc(-100% - 16px));
  transition: transform 140ms ease;
}

.skip-link:focus {
  color: #fff;
  outline: 3px solid #fff;
  outline-offset: 2px;
  transform: translate(-50%, 0);
}

.sidebar-backdrop {
  display: none;
}

.traffic-card.is-neutral {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  box-shadow: none;
}

.traffic-card.is-neutral .traffic-light {
  background: #64748b;
}

body.app-shell button.primary:disabled,
body.app-shell .btn-primary:disabled,
body.app-shell button.primary[aria-disabled="true"],
body.app-shell .btn-primary[aria-disabled="true"] {
  border-color: #cbd5e1;
  background: #eef2f6;
  color: #64748b;
  box-shadow: none;
  opacity: 1;
}

body.app-shell #planStep,
body.app-shell #exportStep,
body.app-shell #exportArea {
  scroll-margin-top: 16px;
}

@media (max-width: 1100px) {
  body.app-shell .app-sidebar {
    position: fixed;
    inset: 8px auto 8px 8px;
    z-index: 1001;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(320px, calc(100vw - 32px));
    height: calc(100dvh - 16px);
    margin: 0;
    padding: 16px;
    visibility: hidden;
    pointer-events: none;
    transition: margin-left 180ms ease, visibility 180ms ease;
  }

  body.app-shell:has(#appShellToggle:checked) {
    overflow: hidden;
  }

  body.app-shell:has(#appShellToggle:checked) .app-sidebar {
    width: min(320px, calc(100vw - 32px));
    padding: 16px;
    margin-left: 0;
    visibility: visible;
    pointer-events: auto;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-head {
    justify-content: flex-start;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-brand > span:not(.sidebar-logo),
  body.app-shell:has(#appShellToggle:checked) .sidebar-label,
  body.app-shell:has(#appShellToggle:checked) .sidebar-status {
    display: initial;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-status {
    display: grid;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-nav,
  body.app-shell:has(#appShellToggle:checked) .sidebar-nav-secondary {
    display: grid;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-link {
    justify-content: stretch;
    padding: 0 10px;
  }

  body.app-shell .sidebar-collapse {
    width: 100%;
    min-height: 44px;
  }

  body.app-shell .toggle-expanded {
    display: inline;
  }

  body.app-shell .toggle-collapsed {
    display: none;
  }

  body.app-shell .topbar-menu {
    display: inline-flex;
    min-height: 44px;
  }

  body.app-shell:has(#appShellToggle:checked) .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(7, 26, 45, 0.48);
    cursor: pointer;
  }

  body.app-shell .workflow-step-button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "index title"
      "status status"
      "meta meta";
    align-content: start;
    min-height: 124px;
  }

  body.app-shell .workflow-step-index {
    grid-area: index;
  }

  body.app-shell .workflow-step-title {
    grid-area: title;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  body.app-shell .workflow-step-status {
    grid-area: status;
  }

  body.app-shell .workflow-step-meta {
    grid-area: meta;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 900px) {
  body.app-shell #planStep,
  body.app-shell #exportStep,
  body.app-shell #exportArea {
    scroll-margin-top: 12px;
  }

  body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open > .section-head,
  body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open > .action-group-plan,
  body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open > .plan-view-switch,
  body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open > .mobile-schedule,
  body.app-shell .step-accordion-list > #planStep.step-summary-card.is-open > #exportStep {
    margin-top: 10px;
  }

  body.app-shell #planStep .section-head {
    gap: 8px;
  }

  body.app-shell #planStep .section-head h2,
  body.app-shell #exportStep .section-head h2 {
    font-size: 20px;
    line-height: 1.12;
  }

  body.app-shell #planStep .section-head p,
  body.app-shell #exportStep .section-head p {
    font-size: 13px;
    line-height: 1.35;
  }

  body.app-shell #planStep .plan-work-actions,
  body.app-shell #planStep .plan-followup-actions,
  body.app-shell #planStep .action-group-plan {
    gap: 8px;
  }

  body.app-shell #planStep .action-group-plan {
    padding: 10px;
  }

  body.app-shell #planStep .plan-source-status,
  body.app-shell #planStep .plan-action-hint {
    font-size: 12px;
    line-height: 1.35;
  }

  body.app-shell #planStep #mobileSchedule {
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  body.app-shell #planStep .mobile-schedule h2 {
    font-size: 15px;
    line-height: 1.2;
  }

  body.app-shell #planStep .mobile-schedule-card {
    gap: 7px;
    padding: 9px;
    border-radius: 12px;
    box-shadow: none;
  }

  body.app-shell #exportStep {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--app-border-soft);
  }

  body.app-shell #exportStep .section-head {
    margin-bottom: 0;
  }

  body.app-shell #exportStep .export-status-card,
  body.app-shell #exportStep .export-primary-card,
  body.app-shell #exportStep .export-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  body.app-shell #exportStep .export-status-card,
  body.app-shell #exportStep .export-primary-card {
    padding: 12px;
  }

  body.app-shell #exportStep .export-readiness-action {
    justify-self: stretch;
    width: 100%;
  }

  body.app-shell #exportStep .export-secondary-group .compact-action-grid,
  body.app-shell #exportStep .export-secondary-group .compact-action-grid-three {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.app-shell #exportStep .export-actions button {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    line-height: 1.18;
  }
}

@media (max-width: 640px) {
  body.app-shell button,
  body.app-shell .btn,
  body.app-shell .sidebar-link,
  body.app-shell .tabs .tab,
  body.app-shell select,
  body.app-shell textarea,
  body.app-shell .mobile-schedule-details summary,
  body.app-shell .trust-links a,
  body.app-shell .mobile-match-coach-display,
  body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    min-height: 44px !important;
  }
}

/* Mobile app shell refinements */

body.app-shell .project-mobile-actions-toggle {
  display: none;
}

.topbar-save-status-compact {
  display: none;
}

body.app-shell .sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {

  body.app-shell .plan-mobile-filter-actions button {
    flex: 0 0 auto;
    min-height: 44px;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
  }

}

@media (max-width: 900px) {
  body.app-shell .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.app-shell select,
  body.app-shell textarea,
  body.app-shell .assignment-coach-select {
    font-size: 16px;
  }

  body.app-shell button,
  body.app-shell .btn,
  body.app-shell .sidebar-link,
  body.app-shell .tabs .tab,
  body.app-shell select,
  body.app-shell textarea,
  body.app-shell details > summary,
  body.app-shell .trust-links a,
  body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    min-height: 44px !important;
  }

  body.app-shell .mktt-help-button {
    min-width: 44px;
  }

  body.app-shell .project-mobile-actions-toggle {
    display: inline-flex;
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  body.app-shell .project-actions {
    display: none;
  }

  body.app-shell .project-actions.is-mobile-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-shell .project-actions.is-mobile-open button {
    width: 100%;
  }

  body.app-shell #reviewStep .overview-status-grid {
    display: none;
  }

  body.app-shell #reviewStep .control-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
  }

  body.app-shell #reviewStep .summary-metric {
    min-height: 68px;
    padding: 9px 6px;
    border-radius: 12px;
  }

  body.app-shell #reviewStep .summary-metric .metric {
    font-size: 20px;
  }

  body.app-shell #reviewStep .summary-metric .label {
    font-size: 11px;
    line-height: 1.2;
  }

  body.app-shell #reviewStep .tournament,
  body.app-shell #reviewStep .warnings {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 10px 12px;
  }

  body.app-shell #reviewStep .traffic-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.app-shell #reviewStep .traffic-card {
    min-height: 0;
    padding: 10px;
  }

  body.app-shell #reviewStep .traffic-card.is-neutral .traffic-copy span {
    display: none;
  }

  body.app-shell .topbar {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
    min-height: 0;
    padding: 12px 14px;
  }

  body.app-shell .topbar-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.app-shell .topbar-eyebrow {
    display: none;
  }

  body.app-shell .topbar h1 {
    font-size: 20px;
    line-height: 1.1;
  }

  body.app-shell .topbar-menu {
    grid-column: 1;
    grid-row: 1;
    gap: 6px;
    width: auto;
    min-height: 44px;
    padding: 8px 11px;
  }

  body.app-shell .topbar-save-status {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-success-text);
    font-size: 11px;
    white-space: nowrap;
  }

  body.app-shell .status {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 999;
    width: auto;
    max-width: 560px;
    max-height: min(42vh, 280px);
    margin-inline: auto;
    padding: 10px 12px;
    overflow: auto;
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-navy);
    text-align: left;
    box-shadow: 0 14px 34px rgba(11, 31, 51, 0.20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  body.app-shell .status.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body.app-shell .workflow-guide,
  body.app-shell .workflow-guide.is-collapsed {
    gap: 10px;
    padding: 12px 14px;
    overflow: visible;
    opacity: 1;
  }

  body.app-shell .workflow-guide .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
  }

  body.app-shell .workflow-guide .section-head > div {
    min-width: 0;
  }

  body.app-shell .workflow-guide .section-head h2 {
    font-size: 18px;
  }

  body.app-shell .workflow-guide .workflow-hint {
    display: none;
  }

  body.app-shell .workflow-guide-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 11px;
  }

  body.app-shell .workflow-guide.is-collapsed .workflow-steps {
    display: none;
  }

  body.app-shell .workflow-guide:not(.is-collapsed) .workflow-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.app-shell .workflow-steps li {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  body.app-shell .workflow-steps li:not(:last-child)::after {
    display: none;
  }

  body.app-shell .workflow-step-button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "index title status";
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 7px 9px;
    text-align: left;
  }

  body.app-shell .workflow-step-index {
    grid-area: index;
  }

  body.app-shell .workflow-step-title {
    grid-area: title;
    align-self: center;
  }

  body.app-shell .workflow-step-status {
    grid-area: status;
    justify-self: end;
  }

  body.app-shell .workflow-step-meta {
    display: none;
  }

  body.app-shell .mobile-schedule-details summary {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

@media (max-width: 340px) {
  body.app-shell .project-actions.is-mobile-open {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #reviewStep .traffic-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.app-shell .overview-control-details {
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-inner-radius);
  background: #f8fafc;
  overflow: hidden;
}

body.app-shell .overview-control-details > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--color-navy);
  font-weight: 750;
  cursor: pointer;
}

body.app-shell .overview-control-details > summary::marker {
  color: var(--color-primary);
}

body.app-shell .overview-control-details > summary span:last-child {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: right;
}

body.app-shell .overview-control-details.has-critical > summary span:last-child {
  color: var(--color-danger);
}

body.app-shell .overview-control-details[open] > summary {
  border-bottom: 1px solid var(--app-border-soft);
}

body.app-shell .overview-control-details-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

body.app-shell .overview-control-details:not([open]) > .overview-control-details-body {
  display: none;
}

body.app-shell .assignment-lock-help {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.app-shell .assignment-lock-text {
  line-height: 1.25;
  white-space: normal;
}

body.app-shell .workflow-guide[hidden] {
  display: none !important;
}

body.app-shell .source-path-details > summary,
body.app-shell .source-status-details > summary {
  min-height: 44px;
  color: var(--color-navy);
  cursor: pointer;
}

body.app-shell .source-path-details > summary::marker,
body.app-shell .source-status-details > summary::marker {
  color: var(--color-primary);
}

body.app-shell .source-path-details:not([open]) > :not(summary),
body.app-shell .source-status-details:not([open]) > :not(summary) {
  display: none;
}

body.app-shell .source-path-details[open] > summary {
  border-bottom: 1px solid var(--app-border-soft);
  padding-bottom: 10px;
}

body.app-shell .source-path-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  align-content: start;
  height: auto;
  min-height: 0;
  gap: 10px;
  min-width: 0;
  padding-top: 10px;
}

body.app-shell .source-status-details {
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-inner-radius);
  background: #f8fafc;
  overflow: hidden;
}

body.app-shell .source-status-details > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-weight: 750;
}

body.app-shell .source-status-details > summary span {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: right;
}

body.app-shell .source-status-details[open] > summary {
  border-bottom: 1px solid var(--app-border-soft);
}

body.app-shell .source-status-details .source-status-board {
  margin-top: 0;
  padding: 12px;
}

@media (max-width: 900px) {
  body.app-shell .overview-control-details-body {
    gap: 10px;
    padding: 10px;
  }

  body.app-shell .source-association-summary {
    gap: 8px;
  }

  body.app-shell .source-association-details > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  body.app-shell #planStep .mobile-schedule-details summary {
    min-height: 44px;
  }

  body.app-shell .source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .source-option-manual {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body.app-shell :is(.badge, .plan-row-status span[data-status], .workflow-accordion-status, .overview-status-icon) {
    border: 1px solid CanvasText;
  }

  body.app-shell :is(.tab[aria-selected="true"], .plan-mobile-filter-actions button[aria-pressed="true"]) {
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* Plan-step visual hierarchy: calm completed states and a clear next action. */
body.app-shell .sidebar-step-status {
  text-transform: none;
  font-weight: 650;
  letter-spacing: 0;
}

body.app-shell .project-actions #newProjectBtn {
  border-color: rgba(37, 99, 235, 0.28);
  background: var(--color-surface);
  color: var(--color-primary-hover);
  box-shadow: none;
}

body.app-shell .project-actions #newProjectBtn:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

body.app-shell .project-actions #deleteProjectBtn {
  border-color: rgba(185, 28, 28, 0.28);
  background: transparent;
  color: var(--color-danger-text);
  box-shadow: none;
}

body.app-shell .project-actions #deleteProjectBtn:hover:not(:disabled) {
  background: var(--color-danger-soft);
}

body.app-shell .project-actions #newProjectBtn:focus-visible,
body.app-shell .project-actions #deleteProjectBtn:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

body.app-shell .overview-status-grid {
  gap: 10px;
}

body.app-shell .overview-status-card {
  min-height: 112px;
  padding: 14px 16px;
  border-color: var(--app-border-soft);
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell .overview-status-card[data-status="complete"] {
  border-color: var(--app-border-soft);
  background: var(--color-surface);
}

body.app-shell .overview-status-card[data-status="complete"] .overview-status-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(22, 130, 93, 0.18);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

body.app-shell .overview-status-card[data-status="complete"] .overview-status-head span {
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--color-success-text);
}

body.app-shell .overview-status-card[data-status="active"] {
  border-color: rgba(37, 99, 235, 0.30);
  background: #f8fbff;
}

body.app-shell .overview-next-action {
  padding: 16px 18px;
}

body.app-shell .overview-next-action button {
  min-width: 164px;
}

@media (max-width: 900px) {
  body.app-shell .overview-next-action button {
    min-width: 0;
  }
}

/* Light redesign handoff: keep the existing workflow markup and bindings, but
   present it as the focused, sky-blue planning workspace from the handoff. */
:root {
  --color-bg: #f7fafc;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f5f9;
  --color-surface-muted: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #94a3b8;
  --color-navy: #0f172a;
  --color-navy-soft: #334155;
  --color-primary: #0369a1;
  --color-primary-hover: #075985;
  --color-primary-soft: #f0f9ff;
  --color-success: #16a34a;
  --color-success-hover: #15803d;
  --color-success-text: #166534;
  --color-success-soft: #dcfce7;
  --color-warning: #f97316;
  --color-warning-text: #c2410c;
  --color-warning-soft: #fff0e2;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-soft: #fef2f2;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-card: 14px;
  --radius-control: 8px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --button-min-height: 40px;
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body.app-shell {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--color-bg);
}

body.app-shell:has(#appShellToggle:checked) {
  grid-template-columns: 72px minmax(0, 1fr);
}

body.app-shell .app-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 240px;
  height: 100vh;
  margin: 0;
  padding: 20px 14px;
  overflow: hidden auto;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

body.app-shell:has(#appShellToggle:checked) .app-sidebar {
  width: 72px;
  padding: 20px 10px;
}

body.app-shell .sidebar-head {
  align-items: center;
  min-height: 32px;
  padding: 0 6px 18px;
}

body.app-shell .sidebar-brand {
  gap: 8px;
  padding: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

body.app-shell #playersStep .participant-picker > summary {
  display: none;
}

body.app-shell #playersStep .participant-game-count {
  width: 100px;
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
}

body.app-shell .sidebar-collapse {
  display: none;
}

body.app-shell .sidebar-nav {
  gap: 2px;
}

body.app-shell .sidebar-nav:first-of-type::before {
  content: none;
}

body.app-shell .sidebar-nav-secondary {
  margin-top: auto;
  padding-top: 14px;
  border-top-color: var(--color-border);
}

body.app-shell .sidebar-link {
  display: flex;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 650;
}

body.app-shell .app-sidebar .sidebar-link {
  display: flex;
  grid-template-columns: none;
}

body.app-shell .sidebar-mark {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
}

body.app-shell .sidebar-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body.app-shell .sidebar-link:hover,
body.app-shell .sidebar-link:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

body.app-shell .sidebar-link.is-active,
body.app-shell .sidebar-link.is-step-active {
  border-left: 3px solid var(--color-primary);
  border-radius: 8px 0 0 8px;
  background: var(--color-primary-soft);
  color: var(--color-text);
  box-shadow: none;
}

body.app-shell .sidebar-link.is-active .sidebar-mark,
body.app-shell .sidebar-link.is-step-active .sidebar-mark {
  background: var(--color-primary);
  color: #fff;
}

body.app-shell .sidebar-link.is-complete .sidebar-mark {
  background: var(--color-success-soft);
  color: var(--color-success);
}

body.app-shell .sidebar-link.is-complete .sidebar-mark svg {
  display: none;
}

body.app-shell .sidebar-link.is-complete .sidebar-mark::after {
  content: "✓";
  font-size: 13px;
  font-weight: 800;
}

body.app-shell .sidebar-link.is-locked {
  color: var(--color-text-soft);
  cursor: default;
}

body.app-shell .sidebar-link.is-locked .sidebar-mark {
  color: #cbd5e1;
}

body.app-shell .sidebar-label {
  overflow: hidden;
  font-weight: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell .sidebar-step-status {
  margin-left: auto;
  color: var(--color-text-soft);
  font-size: 11px;
  font-weight: 700;
}

body.app-shell .sidebar-link.is-complete .sidebar-step-status {
  color: var(--color-success-text);
}

body.app-shell .sidebar-link.is-active .sidebar-step-status,
body.app-shell .sidebar-link.is-step-active .sidebar-step-status {
  color: var(--color-primary-hover);
}

body.app-shell .sidebar-status {
  gap: 3px;
  margin-top: 14px;
  padding: 10px 6px 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell .topbar-eyebrow {
  display: none;
}

body.app-shell .topbar-title h1 {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.app-shell .topbar-tagline {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 400;
}

body.app-shell .topbar-menu {
  display: none;
  min-height: 36px;
  padding: 0 10px;
  border-color: var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

body.app-shell .topbar-save-status,
body.app-shell .status,
body.app-shell .topbar-save-retry {
  min-height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-muted);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

body.app-shell .layout {
  grid-column: 2;
  width: 100%;
  max-width: 1280px;
  gap: 18px;
  margin: 0;
  padding: 28px;
}

body.app-shell .card,
body.app-shell .panel,
body.app-shell .section,
body.app-shell .summary,
body.app-shell .toolbar,
body.app-shell .table-shell,
body.app-shell .trust-section,
body.app-shell .hero-intro,
body.app-shell .welcome-banner {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

body.app-shell .project-bar,
body.app-shell .workflow-step-panel,
body.app-shell #planStep,
body.app-shell #exportStep {
  padding: 20px;
}

body.app-shell .project-bar {
  align-items: center;
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

body.app-shell .project-current span,
body.app-shell .project-switch label,
body.app-shell .field label,
body.app-shell .field-label,
body.app-shell .label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.app-shell .project-current strong {
  color: var(--color-text);
  font-size: 16px;
}

body.app-shell button,
body.app-shell .btn {
  border-color: var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

body.app-shell button:hover:not(:disabled),
body.app-shell .btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text);
}

body.app-shell button.primary,
body.app-shell .btn-primary,
body.app-shell #loadParticipantsBtn,
body.app-shell #extractPdfTextBtn:not(:disabled),
body.app-shell #confirmAssociationBtn,
body.app-shell #confirmPlayersBtn,
body.app-shell #confirmTrainersBtn,
body.app-shell #applyAssignmentsBtn {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.25);
}

body.app-shell button.primary:hover:not(:disabled),
body.app-shell .btn-primary:hover:not(:disabled),
body.app-shell #loadParticipantsBtn:hover:not(:disabled),
body.app-shell #extractPdfTextBtn:not(:disabled):hover,
body.app-shell #confirmAssociationBtn:hover:not(:disabled),
body.app-shell #confirmPlayersBtn:hover:not(:disabled),
body.app-shell #confirmTrainersBtn:hover:not(:disabled),
body.app-shell #applyAssignmentsBtn:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #fff;
}

body.app-shell button:disabled,
body.app-shell .btn:disabled,
body.app-shell button[aria-disabled="true"],
body.app-shell .btn[aria-disabled="true"] {
  border-color: #f1f5f9;
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 1;
}

body.app-shell button.danger {
  border-color: #fecaca;
  background: #fff;
  color: var(--color-danger-text);
}

body.app-shell input:not([type="checkbox"]):not([type="radio"]),
body.app-shell select,
body.app-shell textarea {
  border-color: var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus,
body.app-shell button:focus-visible,
body.app-shell .btn:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid rgba(14, 165, 233, 0.18);
  outline-offset: 1px;
  box-shadow: none;
}

body.app-shell input[type="checkbox"],
body.app-shell input[type="radio"] {
  accent-color: var(--color-primary);
}

body.app-shell .workflow-guide {
  display: none !important;
}

body.app-shell .import-review {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .import-review > .section-head {
  margin: 0 0 16px;
}

body.app-shell .section-head h2,
body.app-shell .workflow-step-panel .section-head h2 {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.app-shell .section-head p {
  color: #64748b;
  font-size: 13px;
  font-weight: 400;
}

body.app-shell .step-number {
  color: var(--color-primary-hover);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.app-shell .overview-next-action {
  border-color: #bae6fd;
  border-radius: 14px;
  padding: 18px;
  background: var(--color-primary-soft);
}

body.app-shell .overview-next-label {
  color: var(--color-primary-hover);
}

body.app-shell .overview-next-action strong {
  color: var(--color-text);
}

body.app-shell .overview-next-action span {
  color: #475569;
  font-weight: 400;
}

body.app-shell .overview-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

body.app-shell .overview-status-card,
body.app-shell .summary-metric,
body.app-shell .traffic-card,
body.app-shell .review-block {
  border-color: var(--color-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

body.app-shell .overview-status-card {
  padding: 16px;
}

body.app-shell .overview-status-card[data-status="active"] {
  border-color: #bae6fd;
  background: var(--color-primary-soft);
}

body.app-shell .overview-status-icon {
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
}

body.app-shell .overview-status-card[data-status="complete"] .overview-status-icon {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success);
}

body.app-shell .control-overview {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

body.app-shell .summary-metric {
  min-height: 108px;
  padding: 16px;
}

body.app-shell .summary-metric.has-alert {
  border-color: #fdba74;
  border-left-width: 1px;
  background: var(--color-warning-soft);
}

body.app-shell .summary-metric.has-alert .metric,
body.app-shell .summary-metric.has-alert .label,
body.app-shell .summary-metric.has-warning .metric,
body.app-shell .summary-metric.has-warning .label {
  color: var(--color-warning-text);
}

body.app-shell .summary-metric.has-warning {
  border-color: #fdba74;
  border-left-width: 1px;
  background: var(--color-warning-soft);
}

body.app-shell .metric {
  color: var(--color-text);
  font-size: 22px;
}

body.app-shell .tournament,
body.app-shell .traffic-card {
  border-color: var(--color-border);
}

body.app-shell .source-card,
body.app-shell .association-card,
body.app-shell .participant-picker,
body.app-shell .trainer-menu,
body.app-shell .assignment-table-shell,
body.app-shell #planTableShell {
  border-color: var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

body.app-shell .source-card.is-active-source,
body.app-shell #onlineSourceDetails {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
}

body.app-shell .source-option-head,
body.app-shell .participant-picker > summary,
body.app-shell .trainer-menu > summary,
body.app-shell .trainer-list-menu > summary {
  background: #fff;
}

body.app-shell .participant-tools {
  grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

body.app-shell .participant-table th,
body.app-shell .assignment-table th,
body.app-shell .schedule-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
}

body.app-shell .participant-table td,
body.app-shell .assignment-table td,
body.app-shell .schedule-table td {
  border-bottom-color: #f1f5f9;
}

body.app-shell .participant-table-row.selected,
body.app-shell .participant-item.selected,
body.app-shell .tournament-trainer-item.selected {
  border-color: #bae6fd;
  border-left-color: var(--color-primary);
  background: var(--color-primary-soft);
}

body.app-shell .participant-table-row:hover,
body.app-shell .participant-table-row:focus-within {
  background: #f8fafc;
}

body.app-shell .participant-table-row.selected:hover,
body.app-shell .participant-table-row.selected:focus-within {
  background: var(--color-primary-soft);
}

body.app-shell .trainer-item,
body.app-shell .tournament-trainer-item,
body.app-shell .participant-item {
  border-color: var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}

body.app-shell .trainer-code-badge {
  border-color: transparent;
  background: var(--color-surface-soft);
  color: #334155;
}

body.app-shell .assignment-table,
body.app-shell .plan-table,
body.app-shell .schedule-table {
  border-color: var(--color-border);
}

body.app-shell .assignment-table-row.is-missing,
body.app-shell .assignment-mobile-card.is-missing {
  background: var(--color-warning-soft);
}

body.app-shell .assignment-plan-status,
body.app-shell .plan-row-status span[data-status="valid"] {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

body.app-shell .plan-row-status span[data-status="warning"],
body.app-shell .plan-row-status span[data-status="error"] {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

body.app-shell .export-status-card[data-tone="success"] {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

body.app-shell .export-status-card[data-tone="error"] {
  border-color: #fdba74;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

body.app-shell .tabs {
  border-color: var(--color-border);
  border-radius: 8px;
}

body.app-shell .tab {
  color: #64748b;
}

body.app-shell .tab.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

@media (min-width: 1101px) {
  body.app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  body.app-shell:has(#appShellToggle:checked) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.app-shell .app-sidebar {
    top: 0;
    width: 240px;
    height: 100vh;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  body.app-shell:has(#appShellToggle:checked) .app-sidebar {
    width: 72px;
  }

  body.app-shell .topbar,
  body.app-shell .layout {
    grid-column: 2;
  }

  body.app-shell .topbar {
    width: 100%;
  }

  body.app-shell .layout {
    padding: 28px;
  }
}

@media (max-width: 1100px) {
  /* Schublade wie im Entwurf */
  body.app-shell:not(.has-mobile-tabbar):has(#appShellToggle:checked) .app-sidebar {
    width: min(280px, calc(100vw - 32px));
  }

  body.app-shell .topbar-menu span:last-child,
  body.app-shell .topbar-save-status,
  body.app-shell .topbar-save-retry,
  body.app-shell .status {
    display: none;
  }

  body.app-shell .layout {
    width: 100%;
    padding: 18px 16px 30px;
  }
}

@media (max-width: 640px) {
  body.app-shell .layout {
    gap: 14px;
    padding: 16px 12px calc(28px + env(safe-area-inset-bottom));
  }

  body.app-shell .project-bar,
  body.app-shell .workflow-step-panel,
  body.app-shell #planStep,
  body.app-shell #exportStep {
    padding: 16px;
  }

  body.app-shell .project-bar,
  body.app-shell .project-controls,
  body.app-shell .project-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .project-actions button,
  body.app-shell .participant-tools button,
  body.app-shell .overview-next-action button {
    width: 100%;
  }

  body.app-shell .overview-next-action {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  body.app-shell .overview-status-grid,
  body.app-shell .control-overview,
  body.app-shell .participant-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell .summary-metric {
    min-height: 96px;
  }
}

@media (max-width: 1100px) {
  body.app-shell .status.is-visible {
    display: block;
  }
}

/* Designsystem, Paket 1
   The existing workflow markup stays in place. Later packages map individual
   views to this foundation without changing data flow or event bindings. */
:root {
  /* Core palette */
  --color-bg: #f4f4f2;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f7f5;
  --color-surface-muted: #f1f1ee;
  --color-border: rgba(22, 23, 26, 0.14);
  --color-border-strong: rgba(22, 23, 26, 0.22);
  --color-text: #16171a;
  --color-text-muted: #5f5e5a;
  --color-text-soft: #85837e;
  --color-navy: #16171a;
  --color-navy-soft: #1b2f9e;
  --color-primary: #2b47d9;
  --color-primary-hover: #1b2f9e;
  --color-primary-soft: #e8ebfd;
  --color-accent: #2f7a58;
  --color-accent-strong: #3f6152;
  --color-accent-soft: #eaefe9;
  --color-border-accent: rgba(63, 97, 82, 0.3);
  --color-success: #3f6152;
  --color-success-hover: #2f4d40;
  --color-success-text: #3f6152;
  --color-success-soft: #eaefe9;
  --color-warning: #b4432a;
  --color-warning-text: #8e3520;
  --color-warning-soft: #fdf4f1;
  --color-danger: #b4432a;
  --color-danger-hover: #8e3520;
  --color-danger-text: #8e3520;
  --color-danger-soft: #fdf4f1;
  --color-info-soft: #e8ebfd;
  --color-text-inverse: #ffffff;

  /* Design-only tokens for the remaining packages. */
  --color-text-label: #9b9995;
  --color-text-disabled: #b2b0ac;
  --color-accent-on-dark: #7f8cff;
  --color-signal-chip: #fbe9e3;
  --color-signal-on-dark: #e0865f;
  --color-sidebar-text: #e7e7e4;
  --color-sidebar-muted: #c5c6c4;
  --color-sidebar-tertiary: #95969a;
  --color-sidebar-label: #7b7c80;
  --color-sidebar-disabled: #5b5c60;
  --line-row: rgba(22, 23, 26, 0.055);
  --line-header: rgba(22, 23, 26, 0.1);
  --line-on-dark: rgba(255, 255, 255, 0.09);

  /* Typography uses local fallbacks until font hosting is explicitly enabled. */
  --font-family-base: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: "Instrument Serif", Georgia, serif;
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 14px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;
  --font-size-hero: 44px;

  /* 4 / 8 / 12 / 16 / 20 / 24 / 32 / 44 / 48 / 56 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 48px;
  --space-10: 56px;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 2px;
  --radius-card: 0;
  --radius-control: 2px;
  --shadow-card: none;
  --shadow-soft: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-panel: none;
  --shadow-popover: none;
  --shadow-focus: none;
  --button-min-height: 44px;
  --button-padding-y: 11px;
  --button-padding-x: 16px;
  --button-border: 1px solid var(--color-border-strong);
  --button-bg: var(--color-surface);
  --button-text: var(--color-text);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-bg-hover: var(--color-surface-soft);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-text: var(--color-text);
  --button-success-bg: var(--color-success);
  --button-success-bg-hover: var(--color-success-hover);
  --button-danger-bg: var(--color-danger);
  --button-danger-border: var(--color-danger);
  --button-danger-text: var(--color-text-inverse);
  --card-bg: var(--color-surface);
  --card-border: 0;
  --card-radius: 0;
  --card-shadow: none;
  --card-padding: 32px;

  /* Existing aliases remain stable while consuming the new system. */
  --color-primary-strong: var(--color-primary-hover);
  --color-secondary: var(--color-navy);
  --color-secondary-hover: var(--color-navy-soft);
  --color-secondary-strong: var(--color-secondary-hover);
  --color-secondary-soft: var(--color-surface-soft);
  --color-surface-page: var(--color-bg);
  --color-surface-panel: var(--color-surface);
  --color-surface-subtle: var(--color-surface-muted);
  --color-surface-primary-soft: var(--color-primary-soft);
  --color-surface-success-soft: var(--color-success-soft);
  --color-surface-danger-soft: var(--color-danger-soft);
  --bg: var(--color-surface-page);
  --panel: var(--color-surface-panel);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-strong);
  --red: var(--color-danger);
  --green: var(--color-success-text);
  --amber: var(--color-warning-text);
  --soft-blue: var(--color-surface-primary-soft);
  --soft-red: var(--color-surface-danger-soft);
  --soft-green: var(--color-surface-success-soft);
  --shadow: var(--shadow-panel);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.55;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

body.app-shell :is(button, .btn) {
  min-height: var(--button-min-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app-shell :is(button, .btn):hover:not(:disabled) {
  border-color: var(--color-text);
  background: var(--color-surface-soft);
  color: var(--color-text);
}

body.app-shell :is(button.primary, .btn-primary, #loadParticipantsBtn, #extractPdfTextBtn:not(:disabled), #confirmAssociationBtn, #confirmPlayersBtn, #confirmTrainersBtn, #applyAssignmentsBtn) {
  min-height: 48px;
  padding: 13px 20px;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: none;
}

body.app-shell :is(button.primary, .btn-primary, #loadParticipantsBtn, #extractPdfTextBtn:not(:disabled), #confirmAssociationBtn, #confirmPlayersBtn, #confirmTrainersBtn, #applyAssignmentsBtn):hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

body.app-shell :is(button, .btn):disabled,
body.app-shell :is(button, .btn)[aria-disabled="true"] {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-disabled);
  box-shadow: none;
  opacity: 1;
}

body.app-shell :is(input, select, textarea) {
  min-height: 44px;
  border-color: var(--color-border-strong);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
}

body.app-shell :is(input, select, textarea)::placeholder {
  color: var(--color-text-soft);
  opacity: 1;
}

body.app-shell :is(.card, .panel, .section, .summary, .toolbar, .table-shell, .trust-section, .hero-intro, .welcome-banner) {
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

@keyframes om-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tt-drift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 44px 0, -44px 0;
  }
}

body.app-shell button:focus-visible,
body.app-shell input:focus-visible,
body.app-shell select:focus-visible,
body.app-shell textarea:focus-visible,
body.app-shell a:focus-visible,
body.app-shell summary:focus-visible,
body.app-shell .sidebar-link:focus-visible,
body.app-shell [role="tab"]:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus) !important;
}

body.app-shell :is(button, input, select, textarea, a, summary, [role="tab"]):focus-visible,
body.app-shell .sidebar-link:focus-visible,
body.app-shell :is(.participant-item, .tournament-trainer-item, .trainer-item, .assignment-item, .assignment-mobile-card):has(:focus-visible) {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  border-color: var(--color-primary);
  box-shadow: none !important;
}

/* Redesign, Paket 2: App-Rahmen. Die Workflow-Abschnitte behalten ihre
   bestehenden IDs; die Ansicht wird ausschließlich über ihren vorhandenen
   Workflow-Zustand ein- und ausgeblendet. */
body.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  background: var(--color-bg);
}

body.app-shell .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 264px;
  height: 100dvh;
  padding: 28px 16px 16px;
  border: 0;
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-sidebar-text);
  box-shadow: none;
  overflow-y: auto;
}

body.app-shell .sidebar-head {
  padding: 0 8px 20px;
  border-bottom: 1px solid var(--line-on-dark);
}

body.app-shell .sidebar-brand,
body.app-shell .sidebar-brand:hover {
  gap: 10px;
  color: var(--color-sidebar-text);
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-decoration: none;
}

body.app-shell .sidebar-collapse {
  display: none;
}

body.app-shell .sidebar-nav {
  gap: 2px;
  margin: 20px 0 0;
}

body.app-shell .sidebar-nav-secondary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-on-dark);
}

body.app-shell .sidebar-link {
  min-height: 44px;
  padding: 9px 8px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--color-sidebar-muted);
  background: transparent;
}

body.app-shell .sidebar-link:hover,
body.app-shell .sidebar-link:focus-visible {
  border-left-color: var(--color-accent-on-dark);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-sidebar-text);
}

body.app-shell .sidebar-link.is-active,
body.app-shell .sidebar-link.is-step-active {
  border-left-color: var(--color-accent-on-dark);
  background: rgba(127, 140, 255, 0.16);
  color: var(--color-sidebar-text);
}

body.app-shell .sidebar-link.is-locked,
body.app-shell .sidebar-link[aria-disabled="true"] {
  color: var(--color-sidebar-disabled);
}

body.app-shell .sidebar-mark,
body.app-shell .sidebar-link .sidebar-label {
  color: inherit;
}

body.app-shell .sidebar-link .sidebar-label {
  font-size: 14px;
  font-weight: 500;
}

body.app-shell .sidebar-step-status {
  color: var(--color-sidebar-label);
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
}

body.app-shell .sidebar-link.is-complete .sidebar-step-status {
  color: var(--color-sidebar-muted);
}

body.app-shell .sidebar-status {
  order: 4;
  gap: 3px;
  margin-top: 16px;
  padding: 16px 8px 0;
  border-top: 1px solid var(--line-on-dark);
}

body.app-shell .sidebar-status span,
body.app-shell .sidebar-status strong {
  color: var(--color-sidebar-label);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell .project-bar {
  order: 5;
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 8px 0;
  border: 0;
  border-top: 1px solid var(--line-on-dark);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .project-current span,
body.app-shell .project-switch label {
  color: var(--color-sidebar-label);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell .project-current strong {
  display: block;
  margin-top: 2px;
  color: var(--color-sidebar-text);
  font-size: 14px;
  font-weight: 600;
}

body.app-shell .project-switch select {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border-color: var(--line-on-dark);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-sidebar-text);
}

body.app-shell .project-mobile-actions-toggle {
  display: none;
  width: 100%;
  justify-content: flex-start;
  border-color: var(--line-on-dark);
  background: transparent;
  color: var(--color-sidebar-text);
}

body.app-shell .project-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

body.app-shell .project-actions.is-mobile-open {
  display: grid;
}

body.app-shell .project-actions button {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  color: var(--color-sidebar-muted);
}

body.app-shell .project-actions button:hover:not(:disabled) {
  border-color: var(--line-on-dark);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-sidebar-text);
}

body.app-shell .project-actions button.danger {
  border-color: var(--line-on-dark);
  background: var(--color-text);
  color: var(--color-signal-on-dark);
}

body.app-shell #projectActions #deleteProjectBtn {
  border-color: var(--line-on-dark) !important;
  background: var(--color-text) !important;
  color: var(--color-signal-on-dark) !important;
}

/* Redesign, Paket 3: Turnierlink und Verband. Die vorhandenen Importpfade
   bleiben unverändert; Nebenwege werden nur als Details eingeklappt. */
body.app-shell #sourceStep .source-grid {
  display: block;
  max-width: 660px;
}

body.app-shell #sourceStep #onlineSourceDetails {
  display: block;
  padding: 32px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #sourceStep #onlineSourceDetails > summary {
  display: none;
}

body.app-shell #sourceStep .mktt-url-field {
  gap: 8px;
}

body.app-shell #sourceStep .mktt-url-field label {
  color: var(--color-text-label);
}

body.app-shell #sourceStep #tournamentUrl {
  min-height: 52px;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 22px;
  font-weight: 400;
}

body.app-shell #sourceStep #tournamentUrl:focus-visible {
  border-bottom-color: var(--color-primary);
}

body.app-shell #sourceStep .mktt-link-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

body.app-shell #sourceStep .source-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--color-danger-text);
  font-size: 13px;
  line-height: 1.45;
}

body.app-shell #sourceStep #onlineSourceDetails .actions {
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

body.app-shell #sourceStep #loadParticipantsBtn {
  min-width: 180px;
}

body.app-shell #sourceStep #refreshDataBtn {
  border: 0;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.app-shell #sourceStep #refreshDataBtn:hover:not(:disabled) {
  background: transparent;
  color: var(--color-primary-hover);
}

body.app-shell #sourceStep .refresh-status,
body.app-shell #sourceStep .mktt-url-list,
body.app-shell #sourceStep .source-association-summary,
body.app-shell #sourceStep .mktt-extra-link,
body.app-shell #sourceStep .ettu-import-scope {
  margin-top: 16px;
}

body.app-shell #sourceStep .source-alternatives {
  max-width: 660px;
  margin-top: 16px;
}

body.app-shell #sourceStep .source-alternatives > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.app-shell #sourceStep .source-alternative-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

body.app-shell #sourceStep .source-alternative-grid > .source-card {
  min-width: 0;
  padding: 24px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #sourceStep .source-alternative-grid .source-option-head {
  padding: 0;
  background: transparent;
}

body.app-shell #sourceStep .source-alternative-grid .source-option-head strong {
  color: var(--color-text);
  font-size: 17px;
}

body.app-shell #sourceStep .source-alternative-grid .source-option-description,
body.app-shell #sourceStep .source-alternative-grid .source-option-head p {
  color: var(--color-text-muted);
  font-size: 13px;
}

body.app-shell #sourceStep .source-alternative-grid .source-path-content {
  padding: 20px 0 0;
}

body.app-shell #sourceStep .source-import-preview {
  max-width: 660px;
  margin-top: 24px;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell #sourceStep .source-import-preview .source-primary-action {
  display: none;
}

body.app-shell #sourceStep .source-import-preview.has-source-result {
  border-color: rgba(63, 97, 82, 0.3);
  background: var(--color-success-soft);
}

body.app-shell #sourceStep .source-issue-panel,
body.app-shell #sourceStep .source-issue.is-error {
  color: var(--color-danger-text);
}

body.app-shell #sourceStep .source-issue-panel {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell #sourceStep .source-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

body.app-shell #associationStep .association-layout {
  max-width: 820px;
}

body.app-shell #associationStep .association-picker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #associationStep .association-current-value > span {
  display: block;
  color: var(--color-text-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.app-shell #associationStep .association-current-value strong {
  display: block;
  margin: 4px 0;
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

body.app-shell #associationStep .association-current-value p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

body.app-shell #associationStep .association-edit-details {
  flex: 0 0 min(320px, 100%);
}

body.app-shell #associationStep .association-edit-details:not([open]) {
  flex-basis: auto;
}

body.app-shell #associationStep .association-edit-details > summary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

body.app-shell #associationStep .association-edit-details > summary::-webkit-details-marker {
  display: none;
}

body.app-shell #associationStep .association-edit-details[open] > summary {
  margin-bottom: 16px;
}

body.app-shell #associationStep .association-decision {
  margin-top: 12px;
}

body.app-shell #associationStep .association-decision p,
body.app-shell #associationStep .association-impact {
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  body.app-shell #sourceStep #onlineSourceDetails {
    padding: 0;
    border: 0;
  }

  body.app-shell #associationStep .association-picker-card {
    padding: 32px;
  }

  body.app-shell #sourceStep #tournamentUrl {
    font-size: 18px;
  }

  body.app-shell #sourceStep .source-alternative-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #associationStep .association-picker-card {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }
}

/* Redesign, Paket 4: Auswahloberflächen für Spieler und Trainer. */
body.app-shell #playersStep .participant-tools {
  display: grid;
  grid-template-columns: minmax(260px, 300px) repeat(2, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  max-width: 820px;
}

body.app-shell #playersStep .participant-tools .field:first-child input {
  width: 100%;
}

body.app-shell #playersStep .participant-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.app-shell #playersStep .participant-toolbar-actions button {
  white-space: nowrap;
}

body.app-shell #playersStep .participant-picker {
  max-width: 820px;
  margin-top: 24px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #playersStep .participant-picker > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 20px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

body.app-shell #playersStep .participant-picker > summary span:last-child {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell #playersStep .participant-table {
  width: 100%;
  border: 0;
}

body.app-shell #playersStep .participant-table th {
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-header);
  background: transparent;
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.app-shell #playersStep .participant-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-row);
  color: var(--color-text);
  font-size: 15px;
}

body.app-shell #playersStep .participant-table-row:hover,
body.app-shell #playersStep .participant-table-row:focus-within {
  background: var(--color-surface-soft);
}

body.app-shell #playersStep .participant-table-row.selected {
  border-left: 0;
  background: var(--color-primary-soft);
}

body.app-shell #playersStep .participant-name-cell {
  font-size: 16px;
  font-weight: 600;
}

body.app-shell #playersStep .participant-status {
  color: var(--color-text-soft);
  font-size: 13px;
}

body.app-shell #playersStep .participant-status.is-selected {
  color: var(--color-primary-hover);
  font-weight: 600;
}

body.app-shell #playersStep .participant-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 820px;
  margin-top: 20px;
}

body.app-shell #playersStep .selected-player-summary {
  min-width: 0;
}

body.app-shell #playersStep .selected-player-summary > strong {
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 14px;
  font-weight: 500;
}

body.app-shell #playersStep .selected-player-chips {
  display: none;
}

@media (max-width: 640px) {
  body.app-shell #playersStep .selected-player-chips {
    display: flex;
    max-height: none;
    overflow: visible;
  }
}

/* Redesign, Paket 5: Betreuung, Plan und Ausgabe. */
body.app-shell #assignmentsStep .assignment-action-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin-bottom: 20px;
}

body.app-shell #assignmentsStep .assignment-action-line > #autoCoachBtn {
  min-height: 48px;
  padding-inline: 20px;
}

body.app-shell #assignmentStatusSummary {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.35;
}

body.app-shell #assignmentsStep .assignment-auto-options {
  position: static;
  margin-left: 0;
}

body.app-shell #assignmentsStep .assignment-auto-options > summary {
  min-height: 44px;
  padding: 11px 10px;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

body.app-shell #assignmentsStep .assignment-auto-options > summary::-webkit-details-marker {
  display: none;
}

body.app-shell #assignmentsStep .assignment-auto-options > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 0 2px 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

body.app-shell #assignmentsStep .assignment-auto-options[open] > summary::after {
  margin-bottom: -2px;
  transform: rotate(225deg);
}

body.app-shell #assignmentsStep .assignment-auto-options-body {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: min(360px, calc(100vw - 48px));
  max-height: min(440px, 65dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 12px 32px hsl(195 32% 20% / 0.14);
}

body.app-shell #assignmentsStep .assignment-option {
  min-height: 44px;
  gap: 10px;
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

body.app-shell #assignmentsStep .assignment-option:hover {
  background: var(--color-surface-soft);
}

body.app-shell #assignmentsStep .assignment-option input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  accent-color: var(--color-primary);
}

body.app-shell #assignmentsStep .assignment-guidance {
  max-width: 820px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  box-shadow: none;
}

body.app-shell #assignmentsStep .coach-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(260px, 320px);
  gap: 32px;
  align-items: start;
}

body.app-shell #assignmentsStep .assignment-table-shell {
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #assignmentsStep .assignment-table th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-header);
  color: var(--color-text-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.app-shell #assignmentsStep .assignment-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line-row);
  vertical-align: middle;
}

body.app-shell #assignmentsStep .assignment-table-row.is-locked {
  box-shadow: inset 2px 0 0 var(--color-primary);
}

body.app-shell #assignmentsStep .assignment-player-cell {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
}

body.app-shell #assignmentsStep .assignment-count-badge,
body.app-shell #assignmentsStep .assignment-plan-status,
body.app-shell #assignmentsStep .assignment-source-badge {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-soft);
  font-size: 14px;
  font-weight: 400;
}

body.app-shell #assignmentsStep .assignment-coach-select {
  width: 190px;
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
}

body.app-shell #assignmentsStep .assignment-lock {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #b6b0a7;
  cursor: pointer;
}

body.app-shell #assignmentsStep .assignment-lock input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body.app-shell #assignmentsStep .assignment-lock:has(input:checked) {
  color: var(--color-primary);
}

body.app-shell #assignmentsStep .assignment-lock:has(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

body.app-shell #assignmentsStep .assignment-lock-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

body.app-shell #assignmentsStep .assignment-lock-icon svg {
  display: block;
}

body.app-shell #assignmentsStep .assignment-lock-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.app-shell #assignmentsStep .assignment-sidebar {
  display: grid;
  gap: 16px;
}

body.app-shell #assignmentsStep .assignment-side-card {
  padding: 20px;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell #assignmentsStep .assignment-side-card .field-label,
body.app-shell #assignmentsStep .assignment-side-head strong {
  color: var(--color-text-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

body.app-shell #assignmentsStep .assignment-side-details.has-issues {
  border-color: rgba(180, 67, 42, 0.35);
  background: var(--color-warning-soft);
}

body.app-shell #assignmentsStep .assignment-conflict-item {
  border-radius: 0;
  background: transparent;
  color: var(--color-warning-text);
  box-shadow: none;
}

body.app-shell #assignmentsStep .assignment-save-actions {
  display: flex;
  justify-content: flex-end;
  max-width: 820px;
  margin-top: 24px;
}

body.app-shell #assignmentsStep .assignment-save-actions button {
  min-height: 48px;
}

body.app-shell #planStep .plan-view-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

body.app-shell #planStep .tabs {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  background: var(--color-surface);
}

body.app-shell #planStep .tab {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
}

body.app-shell #planStep .tab.active {
  background: var(--color-text);
  color: var(--color-text-inverse);
}

body.app-shell #planStep .table-shell {
  margin-top: 20px;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  box-shadow: none;
}

body.app-shell #planStep .schedule-time-group-cell {
  padding: 0;
  background: var(--color-text);
}

body.app-shell #planStep .schedule-time-group-button {
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  background: var(--color-text);
  color: var(--color-text-inverse);
}

body.app-shell #planStep .schedule-time-group-button:hover,
body.app-shell #planStep .schedule-time-group-button:focus-visible {
  background: var(--color-text);
}

body.app-shell #planStep .schedule-time-group-count {
  color: var(--color-sidebar-tertiary);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app-shell #planStep .schedule-time-group-count {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #planStep .schedule-game-cell {
  padding: 16px 22px;
}

body.app-shell #planStep .schedule-table .conflict .schedule-game-cell {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

body.app-shell #exportStep.plan-export-panel {
  gap: 24px;
  margin-top: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
}

body.app-shell #exportStep .section-head h2 {
  font-size: 40px;
}

body.app-shell #exportStep .export-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}

body.app-shell #exportStep .export-primary-card {
  grid-column: 1 / -1;
  grid-template-areas:
    "label ."
    "copy pdf"
    "copy quick";
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #exportStep .export-primary-copy strong {
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
}

body.app-shell #exportStep .export-primary-copy p {
  max-width: 64ch;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 400;
}

body.app-shell #exportStep .export-primary-card .action-group-label {
  grid-area: label;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 2px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

body.app-shell #exportStep .export-primary-card .recommended-export {
  grid-area: pdf;
  min-height: 60px;
  align-self: stretch;
  border-radius: 2px;
  font-size: 18px;
}

body.app-shell #exportStep .export-primary-copy {
  grid-area: copy;
}

body.app-shell #exportStep .export-quick-actions {
  grid-area: quick;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.app-shell #exportStep .export-quick-actions button {
  min-height: 44px;
  border-radius: 2px;
}

body.app-shell #exportStep .export-secondary-group {
  grid-column: 2;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #exportStep .export-secondary-group > summary {
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-row);
  border-radius: 0;
}

body.app-shell #exportStep .export-secondary-group > :not(summary) {
  margin-inline: 0;
}

@media (max-width: 900px) {
  body.app-shell #assignmentsStep .coach-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #exportStep .export-actions,
  body.app-shell #exportStep .export-primary-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #exportStep .export-primary-card .recommended-export,
  body.app-shell #exportStep .export-secondary-group {
    grid-column: auto;
    grid-row: auto;
  }

  body.app-shell #exportStep .export-primary-card {
    grid-template-areas:
      "label"
      "copy"
      "pdf"
      "quick";
  }
}

@media (max-width: 640px) {
  body.app-shell #assignmentsStep .assignment-action-line,
  body.app-shell #planStep .plan-view-switch {
    align-items: stretch;
    flex-direction: column;
  }

  body.app-shell #assignmentsStep .assignment-auto-options > summary {
    padding-inline: 0;
  }

  body.app-shell #assignmentsStep .assignment-auto-options-body {
    position: static;
    width: 100%;
    margin-top: 4px;
  }

  body.app-shell #assignmentsStep .assignment-coach-select {
    width: 100%;
  }

  body.app-shell #planStep .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  body.app-shell #planStep .tab {
    padding-inline: 6px;
    font-size: 13px;
  }

  body.app-shell #exportStep .section-head h2,
  body.app-shell #exportStep .export-primary-copy strong {
    font-size: 32px;
  }
}

@media (forced-colors: active) {
  body.app-shell #planStep :is(#planToolbar .tab[aria-selected="true"], #planDayTabs .plan-day-tab[aria-pressed="true"]) {
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

body.app-shell #trainersStep .trainer-pool-layout {
  max-width: 820px;
}

body.app-shell #trainersStep [data-trainer-management] {
  display: none !important;
}

body.app-shell #trainersStep .trainer-selection-menu {
  display: block;
  border: 0;
  background: transparent;
}

body.app-shell #trainersStep .trainer-selection-menu > summary {
  display: none;
}

body.app-shell #trainersStep .tournament-trainers h3 {
  margin: 0 0 16px;
  color: var(--color-text-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.app-shell #trainersStep .tournament-trainer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.app-shell #trainersStep .tournament-trainer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: none;
  cursor: pointer;
}

body.app-shell #trainersStep .tournament-trainer-item.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

body.app-shell #trainersStep .tournament-trainer-item > input {
  position: static;
  inline-size: 20px;
  block-size: 20px;
  min-height: 20px;
  margin: 0;
  opacity: 1;
  accent-color: var(--color-primary);
}

body.app-shell #trainersStep .tournament-trainer-item:has(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

body.app-shell #trainersStep .trainer-summary {
  display: grid;
  gap: 2px;
}

body.app-shell #trainersStep .trainer-summary strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #trainersStep .tournament-trainer-item.selected .trainer-summary strong {
  color: var(--color-primary-hover);
}

body.app-shell #trainersStep .trainer-summary > span {
  color: var(--color-text-muted);
  font-size: 13px;
}

body.app-shell #trainersStep .trainer-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 600;
}

body.app-shell #trainersStep .tournament-trainer-item.selected .trainer-code-badge {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

body.app-shell #trainersStep .trainer-selection-hint {
  margin: 20px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

body.app-shell .utility-view {
  display: none;
  max-width: 960px;
  margin-inline: auto;
  padding: 48px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell.is-utility-view .step-accordion-list,
body.app-shell.is-utility-view .import-review,
body.app-shell.is-utility-view .welcome-banner,
body.app-shell.is-utility-view .quick-guide,
body.app-shell.is-utility-view .trust-section {
  display: none;
}

body.app-shell.is-utility-view .utility-view:not([hidden]) {
  display: block;
}

body.app-shell #trainerManagement [data-trainer-management] {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell #trainerManagement [data-trainer-management] > summary {
  display: none;
}

body.app-shell #trainerManagement .trainer-manager {
  max-width: none;
  padding: 0;
  gap: 20px;
}

body.app-shell #trainerManagement .trainer-manager h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 600;
}

body.app-shell #trainerManagement .trainer-form,
body.app-shell #trainerManagement .trainer-list-menu {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #trainerManagement .trainer-list-menu {
  margin-top: 4px;
  overflow: visible;
  border-top: 1px solid var(--color-border);
}

body.app-shell #trainerManagement .trainer-list-menu > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #trainerManagement .trainer-pool-list {
  padding: 0;
  gap: 12px;
}

body.app-shell #trainerManagement .trainer-form {
  gap: 12px;
}

body.app-shell #trainerManagement .trainer-item {
  grid-template-columns: 24px minmax(120px, 1fr) 80px minmax(120px, 1fr) auto auto;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

body.app-shell #trainerManagement .trainer-item.inactive {
  background: var(--color-surface-soft);
}

@media (max-width: 720px) {
  body.app-shell #playersStep .participant-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #playersStep .participant-selection-summary {
    align-items: stretch;
    flex-direction: column;
  }

  body.app-shell #playersStep .participant-selection-summary .actions button {
    width: 100%;
  }

  body.app-shell #trainersStep .tournament-trainer-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #trainersStep .tournament-trainer-item {
    width: 100%;
  }

  body.app-shell .utility-view {
    padding: 32px;
  }
}

body.app-shell .topbar,
body.app-shell .layout {
  grid-column: 2;
}

body.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text);
  box-shadow: none;
  backdrop-filter: none;
}

/* Im Plan scrollt der Kopf weg; Leisten rasten 6 px unter dem Rand ein (auch beim ersten Zeichnen). */
body.app-shell:not(.is-overview-view, .is-utility-view, .has-mobile-tabbar):has(#planStep.is-open) .topbar {
  position: relative;
}

body:not(.has-mobile-tabbar) #planStep :is(#planTableShell, #mobileSchedule) {
  --plan-sticky-top: 0px !important;
}

body.app-shell .topbar-title h1 {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.app-shell .topbar-tagline,
body.app-shell .topbar-eyebrow {
  color: var(--color-text-muted);
  font-size: 13px;
}

body.app-shell .topbar-save-status,
body.app-shell .status,
body.app-shell .topbar-save-retry {
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell .layout {
  width: min(100%, 1440px);
  gap: 24px;
  margin: 0;
  padding: 48px;
}

body.app-shell .project-return-notice,
body.app-shell .import-review,
body.app-shell .welcome-banner,
body.app-shell .quick-guide,
body.app-shell .trust-section {
  max-width: 1080px;
  margin-inline: auto;
}

body.app-shell .step-accordion-list {
  display: block;
  max-width: 1080px;
  margin-inline: auto;
}

body.app-shell .step-accordion-list > .workflow-step-panel,
body.app-shell .step-accordion-list > #planStep.workflow-step-panel {
  display: none;
  padding: 48px;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-bottom: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell .step-accordion-list > .workflow-step-panel.is-open,
body.app-shell .step-accordion-list > #planStep.workflow-step-panel.is-open {
  display: block;
}

body.app-shell .step-accordion-list > .workflow-step-panel > .workflow-accordion-header {
  display: none;
}

body.app-shell .workflow-step-panel .section-head {
  margin-bottom: 32px;
}

body.app-shell .workflow-step-panel .section-head h2 {
  font-family: var(--font-family-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.app-shell .workflow-step-panel .section-head p,
body.app-shell .workflow-step-panel .section-head .step-number {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell .step-guidance {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 32px -48px -48px;
  padding: 16px 48px;
  border-top: 1px solid var(--line-header);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

body.app-shell .step-guidance-copy strong,
body.app-shell .step-guidance-copy span {
  color: var(--color-text);
  font-size: 13px;
}

body.app-shell .step-guidance-copy span {
  color: var(--color-text-muted);
}

body.app-shell :is(.panel, .toolbar, .table-shell, .source-card, .association-card, .participant-picker, .trainer-menu, .assignment-table-shell, .assignment-side-card, .action-group, .export-status-card, .plan-status-line) {
  border-radius: 0;
  box-shadow: none;
}

body.app-shell :is(.field label, .field-label, .label, .table-filters label, .step-number, .action-group-label) {
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.app-shell {
    display: block;
  }

  body.app-shell .app-sidebar {
    inset: 8px auto 8px 8px;
    width: min(320px, calc(100vw - 36px));
    height: calc(100dvh - 16px);
    padding: 24px 16px;
    border: 0;
    background: var(--color-text);
  }

  body.app-shell .sidebar-collapse {
    display: none;
  }

  body.app-shell .topbar {
    position: sticky;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 72px;
    padding: 12px 16px;
  }

  body.app-shell .topbar-menu {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  body.app-shell .project-mobile-actions-toggle {
    display: inline-flex;
  }

  body.app-shell .project-actions {
    display: none;
  }

  body.app-shell .project-actions.is-mobile-open {
    display: grid;
  }

  body.app-shell .layout {
    width: 100%;
    padding: 32px;
  }
}

@media (max-width: 640px) {
  body.app-shell .layout {
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
  }

  body.app-shell .topbar-title h1 {
    font-size: 24px;
  }

  body.app-shell .topbar-tagline {
    display: none;
  }

  body.app-shell .step-accordion-list > .workflow-step-panel,
  body.app-shell .step-accordion-list > #planStep.workflow-step-panel {
    padding: 32px;
  }

  body.app-shell .workflow-step-panel .section-head h2 {
    font-size: 30px;
  }

  body.app-shell .step-guidance {
    align-items: stretch;
    flex-direction: column;
    margin: 24px -32px -32px;
    padding: 16px 32px calc(16px + env(safe-area-inset-bottom));
  }

  body.app-shell .step-guidance-action {
    width: 100%;
  }
}

/* Redesign, Paket 6: Hallenansicht für schmale Mobilgeräte. */
body.app-shell .mobile-bottom-nav {
  display: none;
}

@media (max-width: 480px) {
  body.app-shell {
    overflow-x: hidden;
  }

  body.app-shell .layout {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body.app-shell .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-header);
    background: var(--color-surface);
  }

  body.app-shell .mobile-bottom-nav button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
  }

  body.app-shell .mobile-bottom-nav button svg {
    width: 20px;
    height: 20px;
  }

  body.app-shell .mobile-bottom-nav button.is-active {
    color: var(--color-primary);
    font-weight: 600;
  }

  body.app-shell .mobile-bottom-nav button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  body.app-shell .status {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  body.app-shell .site-footer {
    margin-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  body.app-shell #planStep .mobile-schedule {
    gap: 12px;
  }

  body.app-shell #planStep .mobile-schedule-list {
    gap: 10px;
  }

  body.app-shell #planStep .mobile-schedule-card {
    gap: 10px;
    padding: 16px 18px;
    border: 0;
    border-top: 1px solid var(--line-header);
    border-bottom: 1px solid var(--line-header);
    border-radius: 0;
    background: var(--color-surface);
    box-shadow: none;
  }

  body.app-shell #planStep .mobile-schedule-card.conflict {
    border-left: 0;
    box-shadow: inset 4px 0 0 var(--color-warning);
    background: var(--color-warning-soft);
  }

  body.app-shell #planStep .mobile-schedule-competition {
    color: var(--color-text-soft);
    font-size: 14px;
    font-weight: 400;
  }

  body.app-shell #planStep .mobile-match-coach-display {
    min-height: 28px;
    padding: 5px 8px;
    border: 0;
    border-radius: 2px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: 14px;
    font-weight: 600;
  }

}

@media (forced-colors: active) and (max-width: 480px) {

  body.app-shell .mobile-bottom-nav button.is-active {
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* Visual fidelity correction
   The workflow keeps its established IDs and handlers. These final rules
   deliberately win over the older dashboard layers above and map the shell
   back to the handoff's quiet, editorial planning surface. */
body.app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
}

body.app-shell:has(#appShellToggle:checked) {
  grid-template-columns: 264px minmax(0, 1fr);
}

body.app-shell :is(button, .btn):active {
  transform: none;
}

body.app-shell .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  box-sizing: border-box;
  width: 264px;
  height: 100dvh;
  padding: 26px;
  background: #16171a;
  overflow: clip;
}

body.app-shell .sidebar-head {
  padding: 0 0 22px;
}

body.app-shell .sidebar-brand,
body.app-shell .sidebar-brand:hover {
  gap: 0;
  color: #fff;
  font-size: 22px;
  letter-spacing: -0.01em;
}

body.app-shell .sidebar-link[data-sidebar-step="overview"] {
  display: none;
}

body.app-shell .sidebar-nav {
  gap: 0;
  margin-top: 22px;
}

body.app-shell .sidebar-nav-title {
  display: block;
  padding: 0 6px 12px;
  color: var(--color-sidebar-label);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.app-shell .sidebar-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 6px;
  gap: 14px;
  overflow: visible;
}

body.app-shell .sidebar-link .sidebar-mark,
body.app-shell .sidebar-link .sidebar-step-status {
  display: none;
}

body.app-shell .sidebar-link .sidebar-label {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

body.app-shell .sidebar-link[data-sidebar-step] .sidebar-label::before {
  flex: 0 0 12px;
  color: #6e6f73;
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
}

body.app-shell .sidebar-link[data-sidebar-step="source"] .sidebar-label::before { content: "1"; }
body.app-shell .sidebar-link[data-sidebar-step="federation"] .sidebar-label::before { content: "2"; }
body.app-shell .sidebar-link[data-sidebar-step="players"] .sidebar-label::before { content: "3"; }
body.app-shell .sidebar-link[data-sidebar-step="trainers"] .sidebar-label::before { content: "4"; }
body.app-shell .sidebar-link[data-sidebar-step="assignments"] .sidebar-label::before { content: "5"; }
body.app-shell .sidebar-link[data-sidebar-step="plan"] .sidebar-label::before { content: "6"; }

body.app-shell .sidebar-link.is-active,
body.app-shell .sidebar-link.is-step-active {
  background: transparent;
  color: #fff;
  font-weight: 600;
}

body.app-shell .sidebar-link.is-active .sidebar-label::before,
body.app-shell .sidebar-link.is-step-active .sidebar-label::before {
  color: var(--color-accent-on-dark);
}

body.app-shell .sidebar-link:hover:not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.06);
}

body.app-shell .sidebar-link.is-locked,
body.app-shell .sidebar-link[aria-disabled="true"] {
  color: var(--color-sidebar-disabled);
}

body.app-shell .sidebar-nav-secondary {
  margin-top: 20px;
  padding-top: 16px;
}

body.app-shell .sidebar-nav-secondary .sidebar-link {
  min-height: 44px;
  padding-block: 7px;
}

body.app-shell .sidebar-nav-secondary .sidebar-mark {
  display: none;
}

body.app-shell .sidebar-nav-secondary .sidebar-label {
  font-size: 14px;
}

body.app-shell .sidebar-status,
body.app-shell .project-bar {
  margin-top: 14px;
  padding: 14px 0 0;
}

body.app-shell .sidebar-status span,
body.app-shell .sidebar-status strong,
body.app-shell .project-current span,
body.app-shell .project-switch label {
  color: var(--color-sidebar-label);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.app-shell .project-current strong {
  display: block;
  width: 100%;
  min-width: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The project controls must remain inside the fixed 264px column.  Earlier
   dashboard grids gave their children a desktop-sized minimum width. */
body.app-shell .app-sidebar > .sidebar-head {
  order: 0;
}

body.app-shell .app-sidebar > .project-bar {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 18px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line-on-dark);
}

body.app-shell .project-controls,
body.app-shell .project-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.app-shell .project-switch select {
  min-width: 0;
  max-width: 100%;
}

body.app-shell .project-mobile-actions-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
}

body.app-shell .project-actions {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
}

body.app-shell .project-actions.is-mobile-open {
  display: grid;
}

body.app-shell .project-actions > button,
body.app-shell .project-actions > * {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}

@media (min-width: 1101px) {
  body.app-shell .project-switch select {
    font-size: 16px;
  }

  body.app-shell .project-mobile-actions-toggle {
    display: inline-flex;
  }

  body.app-shell .project-actions {
    display: none;
  }

  body.app-shell .project-actions.is-mobile-open {
    display: grid;
  }
}

body.app-shell .app-sidebar > .sidebar-nav:not(.sidebar-nav-secondary) {
  order: 2;
}

body.app-shell .app-sidebar > .sidebar-nav-secondary {
  order: 3;
}

body.app-shell .app-sidebar > .sidebar-status {
  order: 4;
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

body.app-shell .app-sidebar > .site-footer {
  order: 5;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-on-dark);
}

body.app-shell .app-sidebar > .site-footer .version,
body.app-shell .app-sidebar > .site-footer .live-pill {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a3a4a8;
  font-size: 13px;
}

body.app-shell .app-sidebar > .site-footer .live-pill.offline {
  color: var(--color-signal-on-dark);
}

body.app-shell .sidebar-status .topbar-save-status,
body.app-shell .sidebar-status .topbar-save-retry,
body.app-shell .sidebar-status .status {
  display: none;
  width: 100%;
  min-height: 0;
  margin-top: 8px;
  padding: 0;
  color: var(--color-sidebar-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.app-shell .sidebar-status .topbar-save-status {
  display: block;
}

body.app-shell .sidebar-status .topbar-save-retry:not([hidden]),
body.app-shell .sidebar-status .status.is-visible {
  display: block;
}

body.app-shell .sidebar-status .status.error {
  color: var(--color-signal-on-dark);
}

body.app-shell .topbar {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 0;
  padding: 34px 44px 30px;
  background: #fff;
}

body.app-shell .topbar-menu {
  display: none;
}

body.app-shell .topbar-title {
  display: grid;
  gap: 0;
  min-width: 0;
}

body.app-shell .topbar-eyebrow {
  margin: 0 0 8px;
  color: var(--color-text-soft);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.app-shell .topbar-title h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

body.app-shell .topbar-tagline {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

body.app-shell .topbar-save-status,
body.app-shell .status,
body.app-shell .topbar-save-retry {
  min-height: 44px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 400;
}

body.app-shell .layout {
  width: 100%;
  max-width: none;
  gap: 24px;
  padding: 36px 44px 176px;
}

body.app-shell .project-return-notice,
body.app-shell .import-review,
body.app-shell .welcome-banner,
body.app-shell .quick-guide,
body.app-shell .trust-section,
body.app-shell .step-accordion-list {
  max-width: 1080px;
  margin-inline: 0;
}

body.app-shell.is-overview-view .step-accordion-list,
body.app-shell:not(.is-overview-view):not(.is-utility-view) .import-review {
  display: none;
}

body.app-shell:not(.is-overview-view):not(.is-utility-view) .welcome-banner {
  display: none;
}

body.app-shell.is-overview-view .workflow-footer,
body.app-shell.is-utility-view .workflow-footer {
  display: none !important;
}

body.app-shell .step-accordion-list > .workflow-step-panel,
body.app-shell .step-accordion-list > #planStep.workflow-step-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .step-accordion-list > :is(#associationStep, #playersStep, #trainersStep).workflow-step-panel {
  justify-self: start !important;
  width: 100% !important;
  max-width: 820px !important;
}

body.app-shell #associationStep .association-layout,
body.app-shell #associationStep .association-picker-card {
  width: 100%;
}

body.app-shell .workflow-step-panel .section-head {
  margin-bottom: 28px;
}

body.app-shell .workflow-step-panel .section-head h2 {
  font-size: 40px;
  letter-spacing: -0.01em;
}

body.app-shell .workflow-step-panel .section-head p {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

body.app-shell .workflow-step-panel .section-head .step-number {
  color: var(--color-text-soft);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

body.app-shell .import-review {
  padding: 32px;
}

body.app-shell .import-review > .section-head {
  display: block !important;
  margin-bottom: 24px;
}

body.app-shell .import-review > .section-head h2 {
  margin: 4px 0 8px;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.app-shell .import-review > .section-head p {
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: 17px;
}

body.app-shell .overview-next-action {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

body.app-shell .overview-next-action strong {
  margin-top: 4px;
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 26px;
  font-weight: 400;
}

body.app-shell .overview-next-action span:not(.overview-next-label) {
  color: var(--color-text-muted);
  font-size: 15px;
}

body.app-shell .overview-next-action .primary {
  align-self: center;
  min-width: 180px;
}

body.app-shell .overview-status-grid {
  display: none;
}

body.app-shell .overview-status-card {
  min-height: 116px;
  padding: 18px 16px;
  border: 0;
  border-right: 1px solid var(--line-row);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .overview-status-card:last-child {
  border-right: 0;
}

body.app-shell .overview-todo,
body.app-shell .overview-control-details {
  margin-top: 20px;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .overview-control-details > summary {
  min-height: 48px;
  padding: 14px 0;
}

body.app-shell .control-overview {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell .summary-metric {
  min-height: 104px;
  padding: 16px;
  border: 0;
  border-right: 1px solid var(--line-row);
  border-bottom: 1px solid var(--line-row);
  border-radius: 0;
  background: transparent;
}

body.app-shell .summary-metric .metric {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 400;
}

body.app-shell .summary-metric .label {
  color: var(--color-text-soft);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.app-shell .workflow-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 264px;
  z-index: 30;
  display: block;
  padding: 20px 44px;
  border-top: 1px solid var(--line-header);
  background: var(--color-surface);
}

body.app-shell:has(#appShellToggle:checked) .workflow-footer {
  left: 264px;
}

body.app-shell .workflow-footer[hidden] {
  display: none !important;
}

body.app-shell .workflow-footer .step-guidance {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  max-width: 1080px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell .workflow-footer .step-guidance-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.app-shell .workflow-footer .step-guidance-copy strong,
body.app-shell .workflow-footer .step-guidance-copy span {
  font-size: 15px;
  line-height: 1.45;
}

body.app-shell .workflow-footer .step-guidance-copy span {
  color: var(--color-text-muted);
}

body.app-shell .workflow-footer .step-guidance-action {
  min-width: 220px;
  min-height: 48px;
}

body.app-shell .workflow-footer .step-guidance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body.app-shell .workflow-footer .step-guidance-back {
  min-width: 96px;
}

body.app-shell :is(.utility-view, #sourceStep, #associationStep, #playersStep, #trainersStep, #assignmentsStep, #planStep, #exportStep, #exportArea) {
  scroll-margin-top: 120px;
}

/* A workflow view has one vertical reading direction.  The player and
   assignment lists stay part of the page on desktop instead of creating a
   second scroll surface below the fixed next-step bar. */
body.app-shell #playersStep .participant-list,
body.app-shell #assignmentsStep .assignment-list {
  max-height: none;
  overflow: visible;
}

body.app-shell #playersStep .participant-table-shell {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* Compact the fixed navigation on shallow desktop windows. It must not enter
   the page grid: doing so would make the header row one viewport tall and
   push the active workflow step below the fold. */
@media (min-width: 1101px) and (max-height: 920px) {
  body.app-shell .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100dvh;
    min-height: 0;
    padding-block: 18px;
    overflow: clip;
  }

  body.app-shell .sidebar-head {
    padding-bottom: 14px;
  }

  body.app-shell .app-sidebar > .project-bar {
    padding-block: 12px;
  }

  body.app-shell .sidebar-nav {
    margin-top: 12px;
  }

  body.app-shell .sidebar-nav-title {
    padding-bottom: 6px;
  }

  body.app-shell .sidebar-link {
    padding-block: 7px;
  }

  body.app-shell .sidebar-nav-secondary {
    margin-top: 10px;
    padding-top: 8px;
  }

  body.app-shell .app-sidebar > .sidebar-status {
    margin-top: 8px;
    padding-top: 8px;
  }

  body.app-shell .sidebar-status .topbar-save-status {
    margin-top: 4px;
    line-height: 1.3;
  }

  body.app-shell .app-sidebar > .site-footer {
    margin-top: 4px;
    padding-top: 4px;
  }
}

@media (max-width: 480px) {

  body.app-shell .mobile-bottom-nav {
    border-top: 0;
    background: var(--color-surface-muted);
  }
}

/* At tablet widths the six-column participant table would require a second
   horizontal scroll surface. Reuse the existing card renderer so the page
   keeps one reading and scrolling direction. */
@media (max-width: 900px) {
  body.app-shell #playersStep .participant-table-shell {
    display: none;
  }

  body.app-shell #playersStep .participant-mobile-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* Step 5 uses the handoff's focused three-part assignment row. Competition
   and source remain available in the plan; duplicating them here created a
   six-column table and an avoidable horizontal scroll surface. */
body.app-shell #assignmentsStep .assignment-selected-trainers {
  display: none;
}

body.app-shell #assignmentsStep .assignment-table-shell {
  min-width: 0;
  overflow: visible;
}

body.app-shell #assignmentsStep .assignment-list {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #assignmentsStep .assignment-table {
  display: block;
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

body.app-shell #assignmentsStep .assignment-table thead {
  display: none;
}

body.app-shell #assignmentsStep .assignment-table tbody {
  display: grid;
}

body.app-shell #assignmentsStep .assignment-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px) 44px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 16px;
  width: 100%;
  min-width: 0;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-row);
}

body.app-shell #assignmentsStep .assignment-table td {
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
}

body.app-shell #assignmentsStep .assignment-player-cell {
  grid-column: 1;
  grid-row: 1;
}

body.app-shell #assignmentsStep .assignment-count-cell {
  grid-column: 1;
  grid-row: 2;
}

body.app-shell #assignmentsStep .assignment-plan-cell,
body.app-shell #assignmentsStep .assignment-source-cell {
  display: none;
}

body.app-shell #assignmentsStep .assignment-coach-cell {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body.app-shell #assignmentsStep .assignment-coach-select {
  width: 100%;
  max-width: 240px;
}

body.app-shell #assignmentsStep .assignment-lock-cell {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media (min-width: 901px) and (max-width: 1300px) {
  body.app-shell #assignmentsStep .coach-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body.app-shell #assignmentsStep .assignment-table {
    display: none;
  }

  body.app-shell #assignmentsStep .assignment-mobile-list {
    display: grid;
    gap: 12px;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  }

  body.app-shell #assignmentsStep .assignment-mobile-card {
    border: 0;
    border-top: 1px solid var(--line-row);
    border-bottom: 1px solid var(--line-row);
    border-radius: 0;
    padding: 16px 0;
  }
}

/* Step 6 keeps source context and its actions in separate rows.  The legacy
   five-column grid squeezed the source state between controls on wide Safari
   windows even though the panel itself had sufficient width. */
@media (min-width: 1101px) {
  body.app-shell #planStep .action-group-plan {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(156px, 1fr));
    grid-template-areas:
      "label source source source"
      "link pdf manual manual";
    align-items: start;
    gap: 12px;
  }

  body.app-shell #planStep .action-group-plan .action-group-label {
    grid-area: label;
    align-self: center;
  }

  body.app-shell #planStep .action-group-plan .plan-source-status {
    grid-area: source;
    width: auto;
    min-width: 0;
    justify-self: start;
    white-space: normal;
  }

  body.app-shell #planStep .action-group-plan .action-with-subtext {
    grid-area: link;
  }

  body.app-shell #planStep .action-group-plan > #pdfQuickCreatePlanBtn {
    grid-area: pdf;
    width: 100%;
  }

  body.app-shell #planStep .action-group-plan .compact-action-grid {
    grid-area: manual;
  }

  body.app-shell #planStep .action-group-plan .action-with-subtext > button,
  body.app-shell #planStep .action-group-plan .compact-action-grid > button {
    width: 100%;
  }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  body.app-shell #planStep .action-group-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "label source"
      "link pdf"
      "manual manual";
  }
}

/* Step 3 has one breathable primary row. Association, competition and the
   selected-only switch are supporting filters, not competing columns. */
body.app-shell #playersStep .participant-tools {
  display: grid;
  grid-template-columns: minmax(0, 300px) max-content minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  max-width: 820px;
}

body.app-shell #playersStep .participant-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

body.app-shell #playersStep .participant-toolbar-actions button {
  min-width: 0;
}

body.app-shell #playersStep .participant-selection-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
  min-width: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

body.app-shell #playersStep .participant-selection-count strong {
  overflow-wrap: anywhere;
}

body.app-shell #playersStep .participant-more-filters {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  border-top: 1px solid var(--line-row);
  border-bottom: 1px solid var(--line-row);
}

body.app-shell #playersStep .participant-more-filters > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #playersStep .participant-more-filter-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 0 0 16px;
}

body.app-shell #playersStep .participant-more-filter-fields .participant-selected-toggle {
  min-width: 0;
  min-height: 44px;
}

body.app-shell #playersStep .participant-list .empty-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 48px;
  text-align: center;
}

body.app-shell #playersStep .participant-list .empty-state strong {
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: 26px;
  font-weight: 400;
}

body.app-shell #playersStep .participant-list .empty-state span {
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: 15px;
}

body.app-shell #playersStep .participant-list .empty-state button {
  min-height: 48px;
}

/* The page title and lead live in the fixed header.  The first source screen
   is intentionally one compact panel, not a panel inside a dashboard card. */
body.app-shell:not(.is-overview-view):not(.is-utility-view) .workflow-step-panel > .section-head {
  display: none;
}

body.app-shell .step-accordion-list > #sourceStep.workflow-step-panel {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 660px !important;
}

body.app-shell #sourceStep .source-grid {
  max-width: none;
}

body.app-shell #sourceStep #onlineSourceDetails {
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell #sourceStep #onlineSourceDetails .actions {
  align-items: center;
  margin-top: 24px;
}

body.app-shell #sourceStep #loadParticipantsBtn {
  min-width: 220px;
}

body.app-shell #sourceStep #loadParticipantsBtn.loading {
  color: #fff !important;
}

body.app-shell #sourceStep #refreshDataBtn {
  display: inline-flex;
}

body.app-shell #sourceStep .refresh-status {
  display: block;
}

body.app-shell #sourceStep .mktt-url-list .empty-state {
  display: none;
}

body.app-shell #sourceStep .source-import-preview:not(.has-source-result):not(.is-loading):not(.has-issues) {
  display: none;
}

body.app-shell #sourceStep .source-status-details {
  margin-top: 24px;
}

body.app-shell #sourceStep .source-status-details > summary {
  min-height: 44px;
}

body.app-shell #sourceStep .step-guidance.is-warning {
  border-color: var(--line-header);
  background: var(--color-surface);
}

body.app-shell:not(.is-overview-view):not(.is-utility-view) .quick-guide {
  display: none;
}

body.app-shell:not(.is-overview-view):not(.is-utility-view) .trust-section {
  display: none;
}

@media (max-width: 900px) {
  body.app-shell #playersStep .participant-tools {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }

  body.app-shell #playersStep .participant-selection-count {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
  }

  body.app-shell #playersStep .participant-more-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.app-shell .step-accordion-list > #sourceStep.workflow-step-panel {
    max-width: none;
  }

  body.app-shell #sourceStep #loadParticipantsBtn {
    width: 100%;
  }

  body.app-shell #playersStep .participant-tools,
  body.app-shell #playersStep .participant-more-filter-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell #playersStep .participant-toolbar-actions {
    flex-wrap: wrap;
  }

  body.app-shell #playersStep .participant-toolbar-actions button {
    flex: 1 1 180px;
  }
}

@media (max-width: 1100px) {
  body.app-shell .app-sidebar {
    position: fixed;
    inset: 8px auto 8px 8px;
    width: min(320px, calc(100vw - 36px));
    height: calc(100dvh - 16px);
    /* margin statt transform: Ein transform machte die Leiste zum Bezugsrahmen des festen #status. */
    margin-left: -340px;
    padding: 26px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.app-shell .topbar {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 0;
    padding: 18px 20px;
  }

  body.app-shell .topbar-menu {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  body.app-shell .topbar-title h1 {
    font-size: 32px;
  }

  body.app-shell .layout {
    padding: 28px 32px 164px;
  }

  body.app-shell .workflow-footer {
    left: 0;
    padding: 16px 20px;
  }

  body.app-shell .sidebar-status .status.is-visible {
    position: fixed;
    right: 12px;
    bottom: calc(max(var(--fixed-bottom-reserve, 0px), env(safe-area-inset-bottom, 0px)) + 12px);
    left: 12px;
    z-index: 900;
    width: auto;
    max-width: 560px;
    margin-inline: auto;
    padding: 10px 14px;
    border-radius: 8px;
    background: #16171a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    visibility: visible;
  }
}

@media (max-width: 640px) {
  body.app-shell .topbar {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
  }

  body.app-shell .topbar-eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  body.app-shell .topbar-title h1 {
    font-size: 28px;
  }

  body.app-shell .topbar-tagline {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
  }

  body.app-shell .layout {
    padding: 24px 16px calc(244px + env(safe-area-inset-bottom));
  }

  body.app-shell .import-review,
  body.app-shell .step-accordion-list > .workflow-step-panel,
  body.app-shell .step-accordion-list > #planStep.workflow-step-panel {
    padding: 24px 16px;
  }

  body.app-shell .import-review > .section-head h2,
  body.app-shell .workflow-step-panel .section-head h2 {
    font-size: 32px;
  }

  body.app-shell .import-review > .section-head p,
  body.app-shell .workflow-step-panel .section-head p {
    font-size: 15px;
  }

  body.app-shell .overview-next-action {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0;
  }

  body.app-shell .overview-next-action .primary {
    width: 100%;
  }

  body.app-shell .overview-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
  }

  body.app-shell .overview-status-card {
    min-height: 94px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--line-row);
  }

  body.app-shell .overview-status-card:nth-child(3n) {
    border-right: 0;
  }

  body.app-shell .summary-metric {
    min-height: 86px;
    padding: 12px;
  }

  body.app-shell .workflow-footer {
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding: 16px;
  }

  body.app-shell .workflow-footer .step-guidance {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.app-shell .workflow-footer .step-guidance-action {
    width: 100%;
    min-width: 0;
  }

  body.app-shell .workflow-footer .step-guidance-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }
}

@media (max-width: 480px) {
  body.app-shell .welcome-banner {
    display: none !important;
  }

  body.app-shell.is-mobile-plan-empty #planStep #exportStep,
  body.app-shell.is-mobile-plan-empty #planStep .step-guidance {
    display: none;
  }

  body.app-shell.is-mobile-hall-view .site-footer {
    display: none;
  }
}

/* The viewport must not stretch the header row and push short workflow steps
   towards the middle of the screen. Controls use one gentle radius so primary,
   secondary and compact actions feel like the same interaction family. */
body.app-shell {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-control: 8px;
  --radius-pill: 999px;
}

body.app-shell :is(
  button,
  .btn,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  #associationStep .association-edit-details > summary
) {
  border-radius: var(--radius-control) !important;
}

@media (max-width: 640px) {
  body.app-shell #planStep .mobile-schedule-card,
  body.app-shell #assignmentsStep .assignment-mobile-card {
    border: 1px solid var(--line-header);
    border-radius: 12px;
  }
}

/* Unified workspace surface
   Top-level sections are chapters of one workflow, not white windows inside
   a grey dashboard. Spacing and type provide hierarchy; borders remain only
   on interactive controls and on data objects that need their own boundary. */
body.app-shell,
body.app-shell .topbar,
body.app-shell .layout {
  background: var(--color-surface);
}

body.app-shell .topbar {
  border-bottom: 0;
}

body.app-shell .layout {
  gap: 32px;
}

body.app-shell :is(
  .import-review,
  .welcome-banner,
  .quick-guide,
  .trust-section,
  .utility-view,
  .step-accordion-list > .workflow-step-panel,
  .step-accordion-list > #planStep.workflow-step-panel
) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell :is(
  .overview-todo,
  .overview-control-details,
  #associationStep .association-picker-card
) {
  border: 0;
  background: transparent;
}

body.app-shell .overview-next-action {
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary-soft);
}

body.app-shell .overview-control-details > summary {
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--color-surface-muted);
}

body.app-shell #sourceStep .source-status-details {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell #sourceStep .source-status-details > summary {
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--color-surface-muted);
}

body.app-shell .welcome-banner .step-number {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

body.app-shell #associationStep .association-picker-card {
  padding-inline: 0;
}

body.app-shell .workflow-footer {
  border-top: 0;
  background: var(--color-surface-muted);
}

body.app-shell :is(
  .sidebar-head,
  .app-sidebar > .project-bar,
  .sidebar-nav-secondary,
  .app-sidebar > .sidebar-status,
  .app-sidebar > .site-footer
) {
  border: 0;
}

@media (min-width: 1101px) and (max-height: 920px) {
  body.app-shell .sidebar-status .status.is-visible:not(.error) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The fixed sidebar is its own stacking context; lift it above the
     topbar (20) and footer (30) so the error toast is not painted behind. */
  body.app-shell .app-sidebar:has(.status.is-visible.error) {
    z-index: 40;
  }

  body.app-shell .sidebar-status .status.is-visible.error {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: 360px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: #7f2d28;
    color: #fff;
    box-shadow: none;
  }
}

/* Screenshot QA: real tournament data exposed a handful of layout states
   that the small synthetic fixture did not cover. These rules keep the same
   visual language while removing empty shells, nested cards and squeezed
   helper text. */

body.app-shell #playersStep .participant-more-filters > summary {
  width: max-content;
  max-width: 100%;
  margin-left: -4px;
  padding-inline: 4px;
}

body.app-shell #playersStep .participant-more-filters[open] > .participant-more-filter-fields {
  padding-top: 12px;
}

body.app-shell #playersStep .participant-more-filters > summary:focus-visible,
body.app-shell #assignmentsStep .assignment-side-details > summary:focus-visible,
body.app-shell #assignmentsStep button.assignment-conflict-item:focus-visible,
body.app-shell #planStep .plan-secondary-sources > summary:focus-visible {
  outline: 0 !important;
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary) !important;
}

body.app-shell .sidebar-link:focus-visible {
  outline: 0 !important;
  background: #252a3b;
  color: #fff;
  box-shadow: inset 3px 0 0 #8fa0ff !important;
}

@media (min-width: 641px) {
  body.app-shell #playersStep .participant-selection-summary {
    display: none;
  }

  body.app-shell #playersStep .participant-selection-summary:has(.selection-undo:not([hidden])) {
    display: flex;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 640px) {
  body.app-shell #playersStep .participant-selection-summary {
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 340px) {
  body.app-shell #participantSearch {
    padding-inline: 8px;
  }
}

@media (min-width: 901px) and (max-width: 1100px), (min-width: 1200px) {
  body.app-shell #assignmentsStep .coach-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(260px, 320px);
  }
}

@media (min-width: 1101px) and (max-width: 1199px) {
  body.app-shell #assignmentsStep .coach-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

body.app-shell #assignmentsStep .assignment-action-line,
body.app-shell #assignmentsStep .assignment-guidance,
body.app-shell #assignmentsStep .assignment-save-actions {
  max-width: none;
}

body.app-shell #assignmentsStep .assignment-guidance {
  padding: 12px 16px;
  border: 0;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-soft);
}

body.app-shell #assignmentsStep .assignment-guidance[data-tone="error"] {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

body.app-shell #assignmentsStep .assignment-guidance[data-tone="success"] {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

body.app-shell #assignmentsStep .assignment-table-row:has(.assignment-manual-note) .assignment-coach-cell {
  grid-row: 1;
}

body.app-shell #assignmentsStep .assignment-table-row:has(.assignment-manual-note) .assignment-lock-cell {
  grid-column: 2;
  grid-row: 2;
}

body.app-shell #assignmentsStep .assignment-manual-note {
  width: 100%;
  max-width: 240px;
  color: var(--color-success-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

body.app-shell #assignmentsStep .assignment-side-card {
  gap: 12px;
  padding: 32px;
  border-right: 0;
  border-left: 0;
}

body.app-shell #assignmentsStep .assignment-side-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  gap: 8px;
  padding: 0;
  list-style: none;
}

body.app-shell #assignmentsStep .assignment-side-details > summary::-webkit-details-marker {
  display: none;
}

body.app-shell #assignmentsStep .assignment-side-details > summary::after {
  content: "";
  align-self: center;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

body.app-shell #assignmentsStep .assignment-side-details[open] > summary::after {
  transform: rotate(225deg);
}

body.app-shell #assignmentsStep .assignment-side-details[open] > summary {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

body.app-shell #assignmentsStep .assignment-side-details:not([open]) {
  padding-block: 0;
}

body.app-shell #assignmentsStep .assignment-load-item,
body.app-shell #assignmentsStep .assignment-conflict-item,
body.app-shell #assignmentsStep .assignment-side-empty {
  border: 0;
  border-bottom: 1px solid var(--line-row);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-shell #assignmentsStep .assignment-load-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

body.app-shell #assignmentsStep .assignment-load-item span {
  text-align: right;
}

body.app-shell #assignmentsStep button.assignment-conflict-item,
body.app-shell #assignmentsStep div.assignment-conflict-item {
  width: 100%;
  padding: 12px 0;
  border-radius: 0 !important;
}

body.app-shell #assignmentsStep :is(.assignment-load-item, .assignment-conflict-item):last-child,
body.app-shell #assignmentsStep .assignment-side-empty:last-child {
  border-bottom: 0;
}

body.app-shell #planStep .action-group-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell #planStep .plan-source-copy {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.app-shell #planStep .action-group-plan > .action-with-subtext {
  flex: 0 1 300px;
}

body.app-shell #planStep .action-group-plan > .action-with-subtext > button {
  width: 100%;
}

body.app-shell #planStep .plan-secondary-sources {
  flex: 1 1 100%;
}

body.app-shell #planStep .plan-secondary-sources > summary {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #planStep .plan-secondary-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 12px;
  padding-top: 8px;
}

body.app-shell #planStep .plan-secondary-source-actions > .action-with-subtext {
  grid-area: auto;
  grid-template-columns: minmax(0, 1fr);
}

body.app-shell #planStep .plan-secondary-source-actions button {
  width: 100%;
}

body.app-shell #planStep .plan-followup-actions {
  margin-top: 4px;
}

body.app-shell.is-plan-empty #planStep :is(
  .plan-status-line,
  .plan-followup-actions,
  .table-filters,
  .plan-view-switch,
  .plan-view-summary,
  #planTableShell,
  #mobileSchedule,
  #exportStep
) {
  display: none !important;
}

body.app-shell #exportStep.plan-export-panel {
  overflow: visible;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #exportStep .export-status-card {
  padding: 16px 18px;
  border: 0;
  border-left: 3px solid var(--color-warning);
  border-radius: 0;
}

body.app-shell #exportStep .export-status-card[data-tone="success"] {
  border-left-color: var(--color-success);
}

@media (max-width: 900px) {
  body.app-shell #planStep .plan-secondary-source-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final geometry QA: secondary workflows stay folded into their owning area,
   and every visible control keeps enough space for its full label. */
body.app-shell .sidebar-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body.app-shell #projectActions .project-backup-actions {
  min-width: 0;
  color: var(--color-sidebar-text);
}

body.app-shell #projectActions .project-backup-actions > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}

body.app-shell #projectActions .project-backup-actions > summary::-webkit-details-marker {
  display: none;
}

body.app-shell #projectActions .project-backup-actions:not([open]) > :not(summary),
body.app-shell #exportStep .export-history-details:not([open]) > :not(summary),
body.app-shell #planStep .plan-work-actions:not([open]) > :not(summary) {
  display: none !important;
}

body.app-shell #projectActions .project-backup-actions[open] > summary {
  margin-bottom: 8px;
}

body.app-shell #projectActions .compact-action-grid {
  grid-template-columns: minmax(0, 1fr);
}

body.app-shell #projectActions .action-helper,
body.app-shell #projectActions .auto-backup-title span {
  color: var(--color-sidebar-label);
  font-size: 13px;
  line-height: 1.45;
}

body.app-shell #projectActions .auto-backup-panel {
  margin-top: 12px;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #planStep .plan-work-actions {
  display: block;
  margin: 0 0 24px;
}

body.app-shell #planStep .plan-work-actions > summary {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #planStep .plan-work-actions[open] > summary {
  margin-bottom: 16px;
}

body.app-shell.is-plan-empty #planStep .plan-work-actions {
  margin-top: 0;
}

body.app-shell.is-plan-empty #planStep .plan-work-actions > summary {
  display: none;
}

body.app-shell #exportStep .export-history-details {
  margin-top: 20px;
}

body.app-shell #exportStep .export-history-details > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

body.app-shell #exportStep .export-history {
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #planStep .schedule-game-cell > *,
body.app-shell #planStep .schedule-actions-col > * {
  max-height: 160px;
}

body.app-shell #planStep :is(
  .schedule-player-input,
  .schedule-meta-input,
  .schedule-table-input,
  .schedule-note-input,
  .schedule-coach-select
) {
  min-height: 44px;
  font-size: 16px;
}

body.app-shell #planStep .schedule-player-input {
  min-height: 52px;
}

body.app-shell #planStep .schedule-coach-display {
  min-height: 44px;
}

body.app-shell #planStep .schedule-actions-col {
  width: 52px;
  padding-right: 4px;
}

body.app-shell #planStep .schedule-delete-button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

body.app-shell .export-actions button {
  min-height: 44px;
}

body.app-shell .export-actions .recommended-export {
  min-height: 52px;
}

@media (forced-colors: active) {
  body.app-shell #playersStep .participant-table-row[aria-selected="true"] td:first-child {
    border-left: 2px solid Highlight;
  }

  body.app-shell :is(
    #playersStep .participant-more-filters > summary,
    #assignmentsStep .assignment-side-details > summary,
    #assignmentsStep button.assignment-conflict-item,
    #planStep .plan-secondary-sources > summary,
    #planStep .plan-work-actions > summary,
    .sidebar-link
  ):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}

@media (min-width: 1101px) and (max-height: 920px) {
  body.app-shell .app-sidebar {
    padding-block: 10px;
  }

  body.app-shell .sidebar-nav {
    margin-top: 8px;
  }

  body.app-shell .sidebar-nav-secondary {
    margin-top: 6px;
    padding-top: 4px;
  }
}

/* Final hierarchy and geometry pass: secondary functions stay available
   without competing with the primary workflow or creating nested panels. */
body.app-shell #sourceStep .source-refresh-tools {
  display: grid;
  gap: 10px;
  padding: 16px 0 20px;
}

body.app-shell #sourceStep .source-refresh-tools #refreshDataBtn {
  width: max-content;
  min-height: 44px;
}

body.app-shell #sourceStep .source-alternative-grid > .source-card {
  padding: 32px;
}

body.app-shell #planStep .plan-primary-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 16px;
}

body.app-shell #planStep .plan-primary-toolbar .plan-view-switch {
  flex: 0 1 auto;
  margin: 0;
}

body.app-shell.is-plan-empty #planStep .plan-primary-toolbar {
  display: none !important;
}

body.app-shell #exportStep.plan-export-panel {
  display: block;
  padding: 32px;
  background: var(--color-surface);
}

body.app-shell #exportStep .export-status-card {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-warning-soft);
}

body.app-shell #exportStep .export-status-card[data-tone="success"] {
  display: none;
}

body.app-shell #recommendedExportTitle {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.06;
}

body.app-shell #trainersStep .tournament-trainer-item > input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

body.app-shell #assignmentsStep .assignment-load-item {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
}

body.app-shell #assignmentsStep .assignment-load-code {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
}

body.app-shell #assignmentsStep .assignment-load-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

body.app-shell #assignmentsStep .assignment-load-copy > :is(strong, span) {
  text-align: left;
}

body.app-shell #assignmentsStep .assignment-load-count {
  color: var(--color-text-muted);
  white-space: nowrap;
}

body.app-shell :is(
  #playersStep .participant-more-filters > summary,
  #assignmentsStep .assignment-side-details > summary,
  #assignmentsStep button.assignment-conflict-item,
  #planStep .plan-secondary-sources > summary,
  #planStep .plan-work-actions > summary,
  .sidebar-link,
  .sidebar-nav-secondary .project-backup-actions > summary
):focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

body.app-shell .sidebar-nav-secondary .project-backup-actions {
  position: relative;
  min-width: 0;
  color: var(--color-sidebar-muted);
}

body.app-shell .sidebar-nav-secondary .project-backup-actions > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

body.app-shell .sidebar-nav-secondary .project-backup-actions > summary::-webkit-details-marker {
  display: none;
}

body.app-shell .sidebar-nav-secondary .project-backup-actions:not([open]) > :not(summary) {
  display: none !important;
}

body.app-shell .sidebar-nav-secondary .project-backup-panel {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
}

body.app-shell .sidebar-nav-secondary .project-backup-panel .compact-action-grid {
  grid-template-columns: minmax(0, 1fr);
}

body.app-shell .sidebar-nav-secondary .project-backup-panel .action-helper,
body.app-shell .sidebar-nav-secondary .project-backup-panel .auto-backup-title span {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.app-shell .sidebar-nav-secondary .project-backup-panel .auto-backup-panel {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line-header);
  border-radius: 0;
}

@media (min-width: 1101px) {
  /* Das feste Menü bleibt im Stacking-Kontext der Sidebar: auch diesen
     über Planleisten, Topbar (20) und Workflow-Footer (30) anheben. */
  body.app-shell .app-sidebar:has(.sidebar-nav-secondary .project-backup-actions[open]) {
    z-index: 40;
  }

  body.app-shell .sidebar-nav-secondary .project-backup-panel {
    position: fixed;
    z-index: 100;
    bottom: 24px;
    left: 276px;
    width: min(420px, calc(100vw - 300px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
  }
}

@media (max-width: 1100px) {
  body.app-shell .sidebar-nav-secondary .project-backup-panel {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  body.app-shell .layout {
    padding-bottom: calc(260px + env(safe-area-inset-bottom));
  }
}

body.app-shell #participantSearch,
body.app-shell #planStep :is(
  .schedule-player-input,
  .schedule-meta-input,
  .schedule-table-input,
  .schedule-note-input,
  .schedule-coach-select
) {
  min-height: 44px !important;
  font-size: 16px !important;
}

body.app-shell #planStep .schedule-table-input {
  min-width: 52px;
}

@media (min-width: 1101px) and (max-height: 920px) {
  body.app-shell .app-sidebar {
    padding-block: 2px;
  }

  body.app-shell .sidebar-nav {
    margin-top: 6px;
  }

  body.app-shell .sidebar-nav-secondary {
    margin-top: 2px;
    padding-top: 2px;
  }

  body.app-shell .app-sidebar > .sidebar-status {
    margin-top: 4px;
    padding-top: 4px;
  }

  body.app-shell .app-sidebar > .site-footer {
    margin-top: 0;
    padding-top: 0;
  }
}

/* Real-data viewport refinement. The visual system stays unchanged; these
   rules only let the workflow use the available canvas and let long labels
   reserve their actual height instead of painting across the next row. */
body.app-shell #sourceStep :is(
  .source-grid,
  .source-alternatives,
  .source-import-preview,
  .source-status-details
) {
  width: 100%;
  max-width: none;
}

body.app-shell #sourceStep .ettu-import-scope {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #sourceStep .source-import-preview.has-source-result {
  border: 0;
  background: var(--color-success-soft);
}

body.app-shell #sourceStep .source-preview-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
}

body.app-shell #sourceStep .source-preview-metric {
  min-height: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.app-shell #sourceStep .source-preview-metric:first-child {
  padding-left: 0;
}

body.app-shell #sourceStep .source-import-protocol {
  margin-top: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

body.app-shell #assignmentsStep .assignment-guidance,
body.app-shell #assignmentsStep .assignment-guidance[data-tone="error"],
body.app-shell #assignmentsStep .assignment-guidance[data-tone="success"] {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.app-shell #assignmentsStep .assignment-guidance[data-tone="error"] {
  color: var(--color-warning-text);
}

body.app-shell #assignmentsStep .assignment-guidance[data-tone="success"] {
  color: var(--color-success-text);
}

body.app-shell #assignmentsStep .assignment-conflict-suggestion {
  margin-top: 4px;
  color: var(--color-success-text) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

body.app-shell #planStep .schedule-game-cell > *,
body.app-shell #planStep .schedule-actions-col > * {
  max-height: none;
}

body.app-shell #planStep .schedule-game-content {
  width: 100%;
  max-width: 1220px;
  padding-inline: 10px;
}

body.app-shell #planStep :is(.schedule-competition-input, .schedule-round-input, .schedule-note-input) {
  box-sizing: border-box;
  min-height: 52px !important;
  padding: 10px 8px;
  overflow: hidden;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
}

@media (min-width: 901px) {
  body.app-shell .step-accordion-list > :is(
    #sourceStep,
    #associationStep,
    #playersStep,
    #trainersStep
  ).workflow-step-panel {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-shell #associationStep .association-layout,
  body.app-shell #playersStep :is(.participant-tools, .participant-picker) {
    width: 100%;
    max-width: none;
  }

  body.app-shell #associationStep .association-picker-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 440px);
    align-items: start;
    gap: clamp(40px, 7vw, 96px);
  }

  body.app-shell #associationStep .association-edit-details {
    justify-self: end;
    width: min(440px, 100%);
  }

  body.app-shell #associationStep .association-edit-details:not([open]),
  body.app-shell #associationStep .association-edit-details > summary {
    width: max-content !important;
    max-width: 100%;
  }
}

@media (min-width: 1440px) {
  body.app-shell .step-accordion-list,
  body.app-shell .workflow-footer .step-guidance {
    max-width: 1280px;
  }
}

@media (min-width: 901px) and (max-width: 1439px) {

  body.app-shell #planStep .schedule-note-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  body.app-shell #sourceStep .source-preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.app-shell #sourceStep .source-preview-metric {
    padding: 0;
  }
}