body {
  background:
    linear-gradient(110deg, color-mix(in oklab, var(--edge-accent) 9%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 2% 0%, color-mix(in oklab, var(--edge-surface) 64%, #dbe9ff 36%) 0, var(--edge-bg) 43%, color-mix(in oklab, var(--edge-bg) 72%, #d4e5ff 28%) 100%);
  color: var(--edge-text);
  font-family: var(--edge-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: color-mix(in oklab, var(--edge-text) 90%, #22395b 10%);
}

.text-muted {
  color: var(--edge-muted) !important;
}

.navbar.bg-dark {
  background: linear-gradient(90deg, color-mix(in oklab, var(--edge-nav) 94%, #0f1e32 6%), color-mix(in oklab, var(--edge-nav) 74%, #284975 26%)) !important;
  box-shadow: 0 8px 20px rgba(10, 24, 46, 0.18);
  border-bottom: 1px solid color-mix(in oklab, var(--edge-accent) 30%, transparent);
}

.navbar-brand {
  font-family: var(--edge-font-heading);
  font-weight: 700;
  letter-spacing: var(--edge-tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.navbar .nav-link {
  color: var(--edge-nav-link) !important;
  position: relative;
  letter-spacing: 0.01em;
}

.navbar .nav-link.active {
  color: var(--edge-nav-link-active) !important;
  font-weight: 600;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.15rem;
  height: 2px;
  background: color-mix(in oklab, var(--edge-accent) 65%, white 35%);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.navbar .navbar-toggler {
  border-color: rgba(220, 231, 251, 0.45);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 231, 251, 0.22);
}

.navbar-actions {
  align-items: center;
}

/* Contrast pack for index/admin pages (structure-preserving) */
.container.my-4,
.container.my-5 {
  position: relative;
}

.container.my-4 > h1.h4,
.container.my-4 > .d-flex > h1.h4,
.container.my-5 > h1.h4 {
  font-size: var(--text-xl);
  letter-spacing: var(--edge-tracking-tight);
  margin-bottom: 0.5rem;
}

.container.my-4 > .d-flex,
.container.my-4 > .ui-page-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.container.my-4 > .d-flex .text-muted,
.container.my-4 > .ui-page-header .text-muted {
  font-size: var(--text-sm);
}

.btn-primary,
.btn-warning {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-warning {
  background: linear-gradient(180deg, color-mix(in oklab, var(--edge-accent-warm) 70%, white 30%), var(--edge-accent-warm));
  border-color: color-mix(in oklab, var(--edge-accent-warm) 80%, #8f6a21 20%);
  color: #2f2410;
  box-shadow: 0 8px 16px rgba(127, 95, 33, 0.2);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: color-mix(in oklab, var(--edge-accent-warm) 82%, #996f1f 18%) !important;
  border-color: color-mix(in oklab, var(--edge-accent-warm) 72%, #7c5e1e 28%) !important;
  color: #2b1f09 !important;
  transform: translateY(-1px);
}

.card {
  overflow: hidden;
  border: 1px solid var(--edge-border);
  border-radius: var(--edge-radius);
  box-shadow: var(--edge-shadow);
  background: var(--edge-surface);
}

.card-header,
.card-footer {
  background: color-mix(in oklab, var(--edge-surface-alt) 78%, #eaf2ff 22%);
  border-color: var(--edge-border);
}

.card-header {
  box-shadow: inset 0 2px 0 color-mix(in oklab, var(--edge-accent) 35%, transparent);
}

.card .table {
  margin-bottom: 0;
}

.card-body:not(.p-0) > .table,
.card-body:not(.p-0) > .table-responsive {
  margin-left: -1rem;
  margin-right: -1rem;
}

.card-body:not(.p-0) > .table {
  width: calc(100% + 2rem);
}

.card-body:not(.p-0) > .table-responsive {
  width: calc(100% + 2rem);
}

.card-body:not(.p-0) > .table-responsive > .table {
  margin-bottom: 0;
}

.table {
  --bs-table-striped-bg: color-mix(in oklab, var(--edge-surface-alt) 70%, #ebf3ff 30%);
  --bs-table-hover-bg: color-mix(in oklab, var(--edge-surface-alt) 42%, #deebff 58%);
  font-size: var(--text-sm);
}

.table td,
.table th {
  vertical-align: middle;
  border-color: var(--edge-border);
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

.table > thead th {
  background: color-mix(in oklab, var(--edge-surface-alt) 38%, #dfebff 62%);
  color: color-mix(in oklab, var(--edge-text) 78%, #486d9c 22%);
  border-bottom-width: 1px;
  border-bottom-color: var(--edge-border-strong);
  font-weight: 700;
  letter-spacing: var(--edge-tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.table > :not(caption) > * > :first-child {
  padding-left: 0.9rem;
}

.table > :not(caption) > * > :last-child {
  padding-right: 0.9rem;
}

.num-col {
  text-align: center;
  white-space: nowrap;
}

.mid-col {
  text-align: center;
  white-space: nowrap;
}

.form-control,
.form-select {
  border-color: var(--edge-border-strong);
  border-radius: var(--edge-control-radius);
  background: var(--edge-surface);
  min-height: var(--edge-control-height);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in oklab, var(--edge-primary) 70%, white 30%);
  box-shadow: var(--edge-focus-ring);
}

.btn {
  border-radius: var(--edge-control-radius);
  min-height: var(--edge-control-height);
  vertical-align: middle;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.form-control-sm,
.form-select-sm,
.btn-sm {
  min-height: var(--edge-control-height-sm);
}

.ui-center-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--edge-primary) 84%, white 16%), var(--edge-primary));
  border-color: color-mix(in oklab, var(--edge-primary) 84%, #234772 16%);
  box-shadow: 0 8px 16px rgba(31, 66, 110, 0.18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--edge-primary-hover) !important;
  border-color: var(--edge-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(28, 62, 105, 0.2);
}

.btn-outline-primary {
  border-color: color-mix(in oklab, var(--edge-primary) 56%, white 44%);
  color: color-mix(in oklab, var(--edge-primary) 74%, #2d4d7b 26%);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: color-mix(in oklab, var(--edge-primary) 13%, var(--edge-surface) 87%) !important;
  border-color: color-mix(in oklab, var(--edge-primary) 72%, white 28%) !important;
  color: color-mix(in oklab, var(--edge-primary) 84%, #1f3f68 16%) !important;
}

.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
  background: color-mix(in oklab, var(--edge-primary) 18%, var(--edge-surface) 82%) !important;
  border-color: color-mix(in oklab, var(--edge-primary) 75%, white 25%) !important;
  color: color-mix(in oklab, var(--edge-primary) 86%, #1f3f68 14%) !important;
}

.btn-outline-secondary {
  border-color: color-mix(in oklab, var(--edge-border-strong) 82%, #a1b6d2 18%);
  color: color-mix(in oklab, var(--edge-muted) 88%, #465a78 12%);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background: color-mix(in oklab, var(--edge-surface-alt) 65%, #e3edff 35%) !important;
  border-color: color-mix(in oklab, var(--edge-border-strong) 70%, #95afd0 30%) !important;
  color: color-mix(in oklab, var(--edge-text) 62%, #455a79 38%) !important;
}

.btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary {
  background: color-mix(in oklab, var(--edge-surface-alt) 48%, #d6e6ff 52%) !important;
  border-color: color-mix(in oklab, var(--edge-border-strong) 62%, #8aa8cf 38%) !important;
  color: color-mix(in oklab, var(--edge-text) 56%, #3f5577 44%) !important;
}

.format-tabs .btn-group {
  gap: 0.4rem;
}

.format-tabs .btn {
  border-radius: 999px;
}

.participants-manage-card,
.participants-manage-card .card-body {
  overflow: visible;
}

.participants-manage-card .ts-dropdown {
  z-index: 1200;
}

.ajax-notice-stack {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.ajax-notice-stack .ajax-notice {
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 12px 28px rgba(20, 38, 66, 0.18);
}

.container a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link) {
  color: color-mix(in oklab, var(--edge-primary) 82%, #2a466a 18%);
  text-decoration: none;
  font-weight: 500;
  text-underline-offset: 0.16em;
  transition: color 0.15s ease;
}

.container a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):hover,
.container a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):focus {
  color: color-mix(in oklab, var(--edge-primary-hover) 88%, #213c62 12%);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--edge-primary) 72%, white 28%);
  outline-offset: 2px;
}

.ui-content-link {
  display: inline-block;
  position: relative;
  padding-right: 0.75em;
}

.ui-content-link::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-content-link:hover::after,
.ui-content-link:focus::after {
  opacity: 1;
  transform: translateY(-50%) translateX(1px);
}

.alert {
  border-radius: var(--edge-radius);
  border-width: 1px;
  box-shadow: var(--edge-shadow-soft);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.2rem 0.56rem;
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-pill--draft {
  background: color-mix(in oklab, var(--edge-surface-alt) 88%, #e6ecf7 12%);
  border-color: color-mix(in oklab, var(--edge-border) 76%, #cbd5e5 24%);
  color: color-mix(in oklab, var(--edge-muted) 88%, #495f7c 12%);
}

.status-pill--active {
  background: color-mix(in oklab, var(--edge-primary) 14%, var(--edge-surface) 86%);
  border-color: color-mix(in oklab, var(--edge-primary) 38%, white 62%);
  color: color-mix(in oklab, var(--edge-primary) 84%, #204369 16%);
}

.status-pill--finished,
.status-pill--success {
  background: color-mix(in oklab, #59b083 18%, var(--edge-surface) 82%);
  border-color: color-mix(in oklab, #59b083 34%, white 66%);
  color: #2a6647;
}

.status-pill--info {
  background: color-mix(in oklab, var(--edge-primary) 11%, var(--edge-surface) 89%);
  border-color: color-mix(in oklab, var(--edge-primary) 31%, white 69%);
  color: color-mix(in oklab, var(--edge-primary-hover) 74%, #315982 26%);
}

.status-pill--neutral {
  background: color-mix(in oklab, var(--edge-surface-alt) 90%, #e7ebf1 10%);
  border-color: color-mix(in oklab, var(--edge-border) 82%, #d2dbe7 18%);
  color: color-mix(in oklab, var(--edge-muted) 85%, #4d607b 15%);
}

.match-result-cell {
  white-space: nowrap;
}

.match-score {
  font-weight: 700;
}

.match-status {
  margin-left: 0.35rem;
}

.modal-content {
  border: 1px solid var(--edge-border);
  border-radius: var(--edge-radius-lg);
  box-shadow: var(--edge-modal-shadow);
}

.modal-header,
.modal-footer {
  border-color: var(--edge-border);
}

.nav-pills .nav-link {
  border-radius: var(--edge-control-radius);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: color-mix(in oklab, var(--edge-primary) 16%, var(--edge-surface) 84%);
  color: color-mix(in oklab, var(--edge-primary) 82%, #26466d 18%);
}

.mana-symbols {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.table td .mana-symbols {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mana-symbol {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.mana-btn {
  height: calc(1.5em + 0.75rem + 2px);
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.mana-btn.btn-outline-secondary {
  border-color: var(--edge-border-strong);
  color: color-mix(in oklab, var(--edge-muted) 92%, #526580 8%);
  background-color: color-mix(in oklab, var(--edge-surface-alt) 80%, white 20%);
}

.mana-btn.btn-outline-secondary:hover {
  border-color: color-mix(in oklab, var(--edge-border-strong) 62%, #8aa8cf 38%);
  background-color: color-mix(in oklab, var(--edge-surface-alt) 55%, #dbe9ff 45%);
}

.mana-btn.active {
  border-color: var(--edge-primary);
  box-shadow: inset 0 0 0 1px var(--edge-primary);
  background: color-mix(in oklab, var(--edge-primary) 14%, var(--edge-surface) 86%);
}

.ajax-notice {
  position: sticky;
  top: 8px;
  z-index: 1080;
}

.home-final-meta {
  padding-left: 0.9rem;
}

.archetype-cover-frame {
  height: 182px;
  overflow: hidden;
  background: #1f2936;
  border-top-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
  border-top-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
}

.archetype-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 27%;
  transform: scale(1.28);
  transform-origin: center;
  background: #1f2936;
}

.archetype-cover-placeholder {
  background: linear-gradient(135deg, #f1f3f5, #e9ecef);
}

.archetype-list-image-cell {
  width: 92px;
}

.archetype-list-image {
  width: 72px;
  height: 40px;
  object-fit: cover;
  object-position: 50% 28%;
  transform: scale(1.15);
  transform-origin: center;
  background: #1f2936;
  border-radius: 6px;
  border: 1px solid var(--edge-border);
}

.ts-control,
.ts-dropdown {
  border-color: var(--edge-border-strong) !important;
  border-radius: 10px !important;
}

.ts-control {
  min-height: var(--edge-control-height-sm) !important;
  box-shadow: none !important;
}

.ts-dropdown {
  z-index: 3000 !important;
}

.ts-control.focus {
  border-color: color-mix(in oklab, var(--edge-primary) 70%, white 30%) !important;
  box-shadow: 0 0 0 0.2rem rgba(30, 122, 229, 0.16) !important;
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav {
    margin-top: 0.6rem;
    gap: 0.2rem;
  }

  .navbar .nav-link {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-actions {
    margin-top: 0.75rem;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .table-responsive > .table {
    min-width: 640px;
  }
}