/* admin page styles */

/* ==========================================================================
   Admin Dashboard
   ========================================================================== */

.admin-layout {
  max-width: 70rem;
}

.admin-government-assignment {
  align-items: end;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-government-assignment label {
  color: var(--muted);
  display: grid;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.35rem;
}

.admin-government-assignment select {
  min-height: 2.75rem;
}

.admin-government-assignment > button,
.admin-government-conflict-panel > button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0.68rem 1.05rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}

#adminPanelGovernment > .section-heading .admin-actions button,
#adminPanelGovernment > .section-heading .admin-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-right: 1rem;
  padding-left: 1rem;
}

.admin-government-jurisdiction-filter,
.admin-government-history-filter {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.admin-government-jurisdiction-filter::after,
.admin-government-history-filter::after {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--muted);
  content: "";
  pointer-events: none;
  position: absolute;
  right: 1rem;
  transform: translateY(-0.15rem) rotate(45deg);
}

.admin-government-jurisdiction-filter select,
.admin-government-history-filter select {
  appearance: none;
  box-sizing: border-box;
  height: 2.35rem;
  min-height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0 2.35rem 0 1rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.admin-government-jurisdiction-filter select:hover,
.admin-government-history-filter select:hover {
  border-color: var(--muted);
  background: var(--card);
}

.admin-government-jurisdiction-filter select:focus-visible,
.admin-government-history-filter select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-government-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 52%, transparent);
}

.admin-government-view-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.admin-government-view-tabs button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.admin-government-view-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-government-view-tabs button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-government-view-count {
  display: inline-flex;
  min-width: 1.45rem;
  min-height: 1.45rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 30%, var(--border));
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  line-height: 1;
}

.admin-government-view-count[hidden],
.admin-government-view-panel[hidden] {
  display: none;
}

.admin-government-view-panel {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.admin-government-history-order {
  padding: 0;
  overflow: hidden;
}

.admin-government-history-disclosure {
  min-width: 0;
}

.admin-government-history-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.25rem;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.admin-government-history-summary::-webkit-details-marker {
  display: none;
}

.admin-government-history-summary:hover {
  background: var(--surface-soft);
}

.admin-government-history-summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.admin-government-history-summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-government-history-body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.admin-government-history-footer {
  padding-top: 0.15rem;
}

.admin-government-history-pagination-actions {
  display: flex;
  gap: 0.5rem;
}

.admin-government-conflict-panel {
  background: color-mix(in srgb, var(--warn) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
  border-radius: 10px;
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
}

.admin-government-conflict-heading,
.admin-government-conflict-panel article,
.admin-government-activity {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.admin-government-conflict-heading span,
.admin-government-conflict-panel article span,
.admin-government-activity span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
}

.admin-government-activity-list {
  display: grid;
  gap: 0.6rem;
}

.admin-government-activity {
  border-bottom: 1px solid var(--border);
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0;
}

.admin-government-activity:last-child {
  border-bottom: 0;
}

.admin-government-activity-avatar {
  display: grid !important;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  overflow: hidden;
}

.admin-government-activity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-government-activity-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.admin-government-activity-copy > strong {
  width: fit-content;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-government-activity-copy > p {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  #adminPanelGovernment > .section-heading .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    width: 100%;
  }

  #adminPanelGovernment > .section-heading .admin-actions > *,
  .admin-government-jurisdiction-filter select {
    width: 100%;
  }

  #adminPanelGovernment > .section-heading .admin-actions > button {
    grid-column: 2;
    grid-row: 1;
  }

  #adminPanelGovernment > .section-heading .admin-actions .admin-government-jurisdiction-filter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .admin-government-history-filter,
  .admin-government-history-filter select {
    width: 100%;
  }

  .admin-government-history-pagination-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-government-view-tabs {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .admin-government-view-tabs button {
    min-height: 3.2rem;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.4rem 0.25rem;
    font-size: 0.67rem;
    line-height: 1.05;
  }

  .admin-government-view-tabs button i {
    font-size: 0.95rem;
  }

  .admin-government-view-count {
    position: absolute;
    top: 0.28rem;
    right: 0.35rem;
  }

  .admin-government-assignment {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-government-conflict-panel article,
  .admin-government-activity {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-tab-stack {
  display: grid;
  gap: 0.75rem;
}

.admin-orders-overview-card {
  gap: 0.8rem;
}

.admin-order-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-order-review-card {
  --admin-card-accent: var(--primary);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 7.4rem;
  gap: 0.28rem;
  padding: 0.82rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--card));
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.admin-order-review-card {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-order-review-card[data-admin-order-review="upcoming"] {
  --admin-card-accent: var(--good);
}

button.admin-order-review-card::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.68rem;
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  content: "→";
  font-family: var(--font-ui);
  font-size: 0.72rem;
  opacity: 0;
  transform: translateX(-0.18rem);
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

button.admin-order-review-card:hover:not(:disabled),
button.admin-order-review-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
  transform: translateY(-0.08rem);
}

button.admin-order-review-card:hover:not(:disabled)::after,
button.admin-order-review-card:focus-visible::after {
  color: var(--primary);
  opacity: 1;
  transform: translateX(0);
}

button.admin-order-review-card:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.admin-order-review-grid span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-order-review-grid span::before {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-card-accent);
  box-shadow: 0 0 0 0.2rem color-mix(
    in srgb,
    var(--admin-card-accent) 13%,
    transparent
  );
  content: "";
}

.admin-order-review-grid strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: 1;
}

.admin-order-review-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.28;
}

.admin-tabs {
  position: sticky;
  top: 0.75rem;
  z-index: 7;
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow:
    0 14px 40px var(--shadow),
    inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  backdrop-filter: saturate(1.15) blur(14px);
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tabs button {
  position: relative;
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-tab-attention-dot {
  position: absolute;
  top: 0.32rem;
  right: 0.42rem;
  z-index: 1;
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--degraded);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--degraded) 18%, transparent);
  pointer-events: none;
}

.admin-tab-attention-dot[hidden] {
  display: none;
}

.admin-tab-count {
  display: inline-flex;
  min-width: 1.45rem;
  min-height: 1.45rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.12rem;
  padding: 0 0.4rem;
  border: 1px solid color-mix(in srgb, var(--stale) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1;
}

.admin-tab-count[hidden] {
  display: none;
}

.admin-tabs button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.admin-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-tabs button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

[data-admin-tab-panel][hidden] {
  display: none;
}

.admin-command-card .section-heading {
  align-items: center;
}

.admin-command-card .section-heading > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.admin-command-card h3 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-command-card p,
.admin-metric-card p,
.admin-pipeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

#adminSocialImageGeneratorButton,
#adminSocialHistoryButton,
#adminSocialSettingsButton {
  gap: 0.42rem;
}

.admin-profile-image-panel {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-profile-image-panel > img,
.admin-profile-image-preview {
  display: block;
  width: 5.75rem;
  height: 5.75rem;
  border: 3px solid var(--card);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--border),
    0 10px 24px color-mix(in srgb, var(--shadow) 70%, transparent);
  object-fit: cover;
}

.admin-profile-image-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 1.55rem;
}

.admin-profile-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-profile-image-copy {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.admin-profile-image-copy strong,
.admin-account-section-heading h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 950;
}

.admin-profile-image-copy p,
.admin-profile-image-copy span,
.admin-account-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.4;
}

.admin-profile-image-copy span {
  margin-top: 0.18rem;
  color: var(--primary);
}

.admin-profile-image-actions {
  display: grid;
  gap: 0.45rem;
  min-width: 9.5rem;
}

.admin-profile-image-file-control,
.admin-profile-image-actions button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.78rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.admin-profile-image-file-control {
  position: relative;
  overflow: hidden;
}

.admin-profile-image-file-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.admin-profile-image-file-control:hover,
.admin-profile-image-file-control:focus-within,
.admin-profile-image-actions button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.admin-profile-image-file-control:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-profile-image-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-account-section-heading {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.15rem;
}

.admin-browser-alert-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-browser-alert-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
}

.admin-browser-alert-icon i.ph,
.admin-browser-alert-icon i.ph-duotone {
  font-size: 1.3rem;
}

.admin-browser-alert-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.admin-browser-alert-copy strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-browser-alert-copy p,
.admin-browser-alert-copy span {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.4;
}

.admin-browser-alert-copy span {
  color: var(--primary);
}

.admin-browser-alert-panel > button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.8rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    opacity 150ms ease;
}

.admin-browser-alert-panel[data-enabled="true"] > button {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}

.admin-browser-alert-panel > button:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.admin-browser-alert-panel > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .admin-profile-image-file-control,
  .admin-profile-image-actions button,
  .admin-browser-alert-panel > button {
    transition: none;
  }

  .admin-profile-image-file-control:hover,
  .admin-profile-image-file-control:focus-within,
  .admin-profile-image-actions button:hover:not(:disabled),
  .admin-browser-alert-panel > button:hover:not(:disabled) {
    transform: none;
  }
}

/* Pipeline workspace refinements */
.admin-pipeline-control-bar {
  grid-template-columns: minmax(16rem, 1.2fr) minmax(28rem, 2fr) auto;
  align-items: end;
}

.admin-pipeline-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.admin-pipeline-filters label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.admin-pipeline-filters label > span,
.admin-pipeline-search > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-filters select {
  width: 100%;
  min-width: 0;
  min-height: 2.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-pipeline-action-cluster {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-pipeline-more-menu,
.admin-pipeline-card-menu {
  position: relative;
}

.admin-pipeline-more-menu > summary,
.admin-pipeline-card-menu > summary {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-pipeline-more-menu > summary::-webkit-details-marker,
.admin-pipeline-card-menu > summary::-webkit-details-marker {
  display: none;
}

.admin-pipeline-more-menu > summary::marker,
.admin-pipeline-card-menu > summary::marker {
  content: "";
}

.admin-pipeline-more-menu > summary:hover,
.admin-pipeline-card-menu > summary:hover {
  border-color: var(--muted);
  background: var(--card);
  color: var(--text);
  transform: translateY(-1px);
}

.admin-pipeline-more-menu[open] > summary,
.admin-pipeline-card-menu[open] > summary {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-pipeline-more-menu > summary:focus-visible,
.admin-pipeline-card-menu > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-more-menu > summary .ph-bold,
.admin-pipeline-card-menu > summary .ph-bold {
  font-size: 1rem;
  line-height: 1;
}

.admin-pipeline-more-panel,
.admin-pipeline-card-menu-panel {
  position: absolute;
  z-index: 80;
  right: 0;
  bottom: calc(100% + 0.45rem);
  display: grid;
  width: min(15rem, 70vw);
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 14px 34px var(--shadow);
  transform-origin: bottom right;
  animation: admin-dev-menu-enter 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-pipeline-more-panel {
  top: calc(100% + 0.45rem);
  bottom: auto;
  transform-origin: top right;
}

.admin-pipeline-more-panel button,
.admin-pipeline-card-menu-panel > button,
.admin-pipeline-card-menu-panel > a {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.admin-pipeline-more-panel button > strong {
  margin-left: auto;
}

.admin-actions .admin-pipeline-more-panel > button,
.admin-pipeline-actions .admin-pipeline-card-menu-panel > button,
.admin-pipeline-actions .admin-pipeline-card-menu-panel > a {
  width: 100%;
  min-height: 2.35rem;
  justify-content: flex-start;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-actions .admin-pipeline-more-panel > button:hover:not(:disabled),
.admin-pipeline-actions .admin-pipeline-card-menu-panel > button:hover:not(:disabled),
.admin-pipeline-actions .admin-pipeline-card-menu-panel > a:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--primary);
}

.admin-pipeline-more-panel > button > i {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.admin-pipeline-more-panel button:hover:not(:disabled),
.admin-pipeline-card-menu-panel > button:hover:not(:disabled),
.admin-pipeline-card-menu-panel > a:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: var(--surface-soft);
  color: var(--primary);
  transform: translateX(1px);
}

.admin-pipeline-more-panel button:focus-visible,
.admin-pipeline-card-menu-panel > button:focus-visible,
.admin-pipeline-card-menu-panel > a:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-pipeline-more-panel hr {
  width: 100%;
  margin: 0.25rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.admin-pipeline-more-panel .admin-danger-button,
.admin-pipeline-card-menu-panel .admin-danger-button {
  border-top-color: color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0 0 6px 6px;
  color: var(--degraded);
}

.admin-actions .admin-pipeline-more-panel > .admin-danger-button,
.admin-pipeline-actions .admin-pipeline-card-menu-panel > .admin-danger-button {
  border-top-color: color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0 0 6px 6px;
  color: var(--degraded);
}

.admin-pipeline-more-panel .admin-danger-button:hover:not(:disabled),
.admin-pipeline-card-menu-panel .admin-danger-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-pipeline-actions {
  justify-content: flex-end;
}

.admin-pipeline-actions .admin-icon-button,
.admin-pipeline-card-menu > summary {
  display: inline-flex;
  width: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .admin-pipeline-more-menu > summary,
  .admin-pipeline-card-menu > summary,
  .admin-pipeline-more-panel button,
  .admin-pipeline-card-menu-panel > button,
  .admin-pipeline-card-menu-panel > a {
    transition: none;
  }

  .admin-pipeline-more-panel,
  .admin-pipeline-card-menu-panel {
    animation: none;
  }

  .admin-pipeline-more-menu > summary:hover,
  .admin-pipeline-card-menu > summary:hover,
  .admin-pipeline-more-panel button:hover:not(:disabled),
  .admin-pipeline-card-menu-panel > button:hover:not(:disabled),
  .admin-pipeline-card-menu-panel > a:hover {
    transform: none;
  }
}

.admin-pipeline-select-control::after,
.admin-pipeline-actions .admin-icon-button::after,
.admin-pipeline-heading-select::after,
.admin-pipeline-bulk-button::after {
  display: none !important;
}

.admin-pipeline-official-badge {
  display: inline-grid;
  min-width: 1.55rem;
  min-height: 1.55rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--half-staff, #9b6518) 45%, var(--border));
  border-radius: 999px;
  color: var(--half-staff, #9b6518);
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-sparkline path[data-area] {
  fill: color-mix(in srgb, var(--primary) 10%, transparent);
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-sparkline path[data-line] {
  stroke: color-mix(in srgb, var(--primary) 68%, var(--muted));
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-dot {
  color: color-mix(in srgb, var(--primary) 68%, var(--muted));
}

.admin-pipeline-runtime-delta[data-trend="increase"],
.admin-pipeline-runtime-trend[data-trend="increase"] {
  color: var(--stale);
  border-color: color-mix(in srgb, var(--stale) 42%, var(--border));
  background: color-mix(in srgb, var(--stale) 8%, var(--card));
}

.admin-pipeline-health[data-status="unavailable"] {
  display: block;
  padding: 0.6rem 0.7rem;
}

.admin-pipeline-health-unavailable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-pipeline-health-unavailable p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-pipeline-health-unavailable-actions {
  display: flex;
  gap: 0.4rem;
}

.admin-pipeline-health-unavailable-actions button {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
}

@media (max-width: 78rem) {
  .admin-pipeline-control-bar {
    grid-template-columns: 1fr auto;
  }

  .admin-pipeline-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 42rem) {
  .admin-pipeline-control-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .admin-pipeline-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pipeline-filters select,
  .admin-pipeline-search input,
  .admin-pipeline-bulk-button,
  .admin-pipeline-heading-select {
    min-height: 2.75rem;
  }

  .admin-pipeline-bulk-actions {
    width: auto;
  }

  .admin-pipeline-action-cluster {
    display: flex;
    width: auto;
  }

  .admin-pipeline-actions {
    display: flex;
  }

  .admin-pipeline-actions .admin-icon-button,
  .admin-pipeline-card-menu > summary {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .admin-pipeline-health-unavailable {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mobile data tables */
@media (max-width: 760px) {
  .admin-orders-table-controls,
  .admin-event-table-controls,
  .admin-subscription-filters,
  .admin-dev-filters {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .admin-orders-table-controls label,
  .admin-event-table-controls label,
  .admin-subscription-filters label,
  .admin-dev-filters label,
  .admin-orders-table-controls input,
  .admin-orders-table-controls select,
  .admin-event-table-controls input,
  .admin-event-table-controls select,
  .admin-subscription-filters input,
  .admin-subscription-filters select,
  .admin-dev-filters input,
  .admin-dev-filters select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .admin-orders-table-wrap,
  .admin-event-table-wrap,
  .admin-directory-table-wrap,
  .admin-social-history-table-wrap,
  .admin-dev-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .admin-orders-table,
  .admin-event-table,
  .admin-directory-table,
  .admin-social-history-table,
  .admin-subscription-table,
  .admin-email-delivery-table,
  .admin-dev-table,
  .admin-api-request-table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
    border: 0;
    background: transparent;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 5%, transparent);
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(5.75rem, 0.34fr) minmax(0, 0.66fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.68rem 0.75rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td:last-child {
    border-bottom: 0;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td::before {
    align-self: start;
    color: var(--muted);
    content: var(--admin-mobile-label, "Details");
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td[colspan] {
    display: block;
    padding: 1rem;
    text-align: center;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td[colspan]::before,
  .admin-skeleton-table-row td::before {
    content: none;
  }

  .admin-orders-table td:nth-child(1) { --admin-mobile-label: "Order"; }
  .admin-orders-table td:nth-child(2) { --admin-mobile-label: "Location"; }
  .admin-orders-table td:nth-child(3) { --admin-mobile-label: "Status"; }
  .admin-orders-table td:nth-child(4) { --admin-mobile-label: "Starts"; }
  .admin-orders-table td:nth-child(5) { --admin-mobile-label: "Ends"; }
  .admin-orders-table td:nth-child(6) { --admin-mobile-label: "Source"; }
  .admin-orders-table td:nth-child(7) { --admin-mobile-label: "Actions"; }

  .admin-event-table td:nth-child(1) { --admin-mobile-label: "Time"; }
  .admin-event-table td:nth-child(2) { --admin-mobile-label: "Type"; }
  .admin-event-table td:nth-child(3) { --admin-mobile-label: "Severity"; }
  .admin-event-table td:nth-child(4) { --admin-mobile-label: "Pipeline"; }
  .admin-event-table td:nth-child(5) { --admin-mobile-label: "Event"; }
  .admin-event-table td:nth-child(6) { --admin-mobile-label: "Dates"; }
  .admin-event-table td:nth-child(7) { --admin-mobile-label: "Details"; }

  .admin-social-history-table td:nth-child(1) { --admin-mobile-label: "Published"; }
  .admin-social-history-table td:nth-child(2) { --admin-mobile-label: "Status"; }
  .admin-social-history-table td:nth-child(3) { --admin-mobile-label: "Post"; }
  .admin-social-history-table td:nth-child(4) { --admin-mobile-label: "Destination"; }
  .admin-social-history-table td:nth-child(5) { --admin-mobile-label: "Trigger"; }
  .admin-social-history-table td:nth-child(6) { --admin-mobile-label: "Result"; }

  .admin-subscription-table td:nth-child(1) { --admin-mobile-label: "Subscriber"; }
  .admin-subscription-table td:nth-child(2) { --admin-mobile-label: "Channel"; }
  .admin-subscription-table td:nth-child(3) { --admin-mobile-label: "Location"; }
  .admin-subscription-table td:nth-child(4) { --admin-mobile-label: "Alerts"; }
  .admin-subscription-table td:nth-child(5) { --admin-mobile-label: "Last alert"; }
  .admin-subscription-table td:nth-child(6) { --admin-mobile-label: "Updated"; }
  .admin-subscription-table td:nth-child(7) { --admin-mobile-label: "Actions"; }

  .admin-email-delivery-table td:nth-child(1) { --admin-mobile-label: "Email"; }
  .admin-email-delivery-table td:nth-child(2) { --admin-mobile-label: "Recipient"; }
  .admin-email-delivery-table td:nth-child(3) { --admin-mobile-label: "Status"; }
  .admin-email-delivery-table td:nth-child(4) { --admin-mobile-label: "Sent"; }
  .admin-email-delivery-table td:nth-child(5) { --admin-mobile-label: "Engagement"; }

  .admin-dev-table td:nth-child(1) { --admin-mobile-label: "Developer"; }
  .admin-dev-table td:nth-child(2) { --admin-mobile-label: "Status"; }
  .admin-dev-table td:nth-child(3) { --admin-mobile-label: "Tier"; }
  .admin-dev-table td:nth-child(4) { --admin-mobile-label: "Usage"; }
  .admin-dev-table td:nth-child(5) { --admin-mobile-label: "Last login"; }
  .admin-dev-table td:nth-child(6) { --admin-mobile-label: "Actions"; }

  .admin-api-request-table td:nth-child(1) { --admin-mobile-label: "Time"; }
  .admin-api-request-table td:nth-child(2) { --admin-mobile-label: "Method"; }
  .admin-api-request-table td:nth-child(3) { --admin-mobile-label: "Path"; }
  .admin-api-request-table td:nth-child(4) { --admin-mobile-label: "Key"; }
  .admin-api-request-table td:nth-child(5) { --admin-mobile-label: "Details"; }

  .admin-directory-table-actions,
  .admin-orders-table-actions,
  .admin-orders-table-actions-cell,
  .admin-directory-table-select {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
}

.admin-schedule-progress {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.admin-schedule-progress[hidden] {
  display: none;
}

.admin-schedule-progress-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  align-items: baseline;
  justify-content: space-between;
}

.admin-schedule-progress-heading strong {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1rem;
}

.admin-schedule-progress-heading span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.admin-schedule-progress-track {
  position: relative;
  display: flex;
  align-items: end;
  gap: 0;
  min-width: 0;
}

.admin-schedule-progress-track::before,
.admin-schedule-progress-track::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  height: 2px;
  transform: translateY(-50%);
}

.admin-schedule-progress-track::before {
  left: var(--schedule-line-start, 0%);
  right: calc(100% - var(--schedule-line-end, 100%));
  z-index: 0;
  background: var(--border);
}

.admin-schedule-progress-fill {
  position: absolute;
  top: 1.45rem;
  left: var(--schedule-line-start, 0%);
  z-index: 1;
  width: var(--schedule-progress-width, 0%);
  height: 2px;
  background: var(--primary);
  transform: translateY(-50%);
  transition: width 180ms ease;
  pointer-events: none;
}

.admin-schedule-progress-track::after {
  left: var(--schedule-line-start, 0%);
  z-index: 2;
  width: var(--schedule-complete-width, 0%);
  background: var(--good);
  transition: width 180ms ease;
}

.admin-schedule-progress-run {
  position: relative;
  z-index: 3;
  flex: 1 1 0;
  min-width: 2.7rem;
  height: 2.15rem;
}

.admin-schedule-progress-time {
  position: absolute;
  top: 0;
  left: 50%;
  max-width: 4.2rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
  z-index: 3;
}

.admin-schedule-progress-run::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 50%;
  z-index: 2;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 0.18rem var(--card);
  transform: translate(-50%, -50%);
}

.admin-schedule-progress-run[data-status="complete"]::after {
  border-color: var(--good);
  background-color: var(--good);
  box-shadow:
    0 0 0 0.18rem var(--card),
    0 0 0 0.28rem color-mix(in srgb, var(--good) 22%, transparent);
}

.admin-schedule-progress-run[data-status="complete"] .admin-schedule-progress-time {
  color: var(--good);
}

.admin-schedule-progress-run[data-status="running"]::after {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  background: var(--card);
  box-shadow:
    0 0 0 0.18rem var(--card),
    0 0 0 0.36rem color-mix(in srgb, var(--primary) 24%, transparent);
  animation: admin-schedule-running-spin 760ms linear infinite;
}

.admin-schedule-progress-run[data-status="running"] .admin-schedule-progress-time {
  color: var(--primary);
}

.admin-schedule-progress-run[data-status="missed"]::after {
  border-color: var(--stale);
  background: var(--card);
}

.admin-schedule-progress-run[data-status="missed"] .admin-schedule-progress-time {
  color: var(--stale);
}

@keyframes admin-schedule-running-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-schedule-progress-fill,
  .admin-schedule-progress-track::after {
    transition: none;
  }

  .admin-schedule-progress-run[data-status="running"]::after {
    animation: none;
  }
}

.admin-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--good);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.admin-live-badge > span[aria-hidden="true"] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0.8rem color-mix(in srgb, currentColor 42%, transparent);
}

.section-heading .admin-live-badge > span {
  color: currentColor;
}

.admin-live-badge[data-state="connecting"] {
  color: var(--primary);
}

.admin-live-badge[data-state="stale"] {
  color: var(--muted);
  opacity: 0.64;
}

.admin-live-badge[data-state="live"] {
  color: var(--good);
  opacity: 1;
}

.admin-live-badge[data-state="live"] > span[aria-hidden="true"] {
  animation: admin-live-pulse 1.8s ease-out infinite;
}

@keyframes admin-live-pulse {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--good) 34%, transparent),
      0 0 0.8rem color-mix(in srgb, var(--good) 42%, transparent);
  }

  78%,
  100% {
    box-shadow:
      0 0 0 0.45rem transparent,
      0 0 0.8rem color-mix(in srgb, var(--good) 24%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-live-badge[data-state="live"] > span[aria-hidden="true"] {
    animation: none;
  }
}

.admin-pipeline-select-shell {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
}

#adminPipelineSummary {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.admin-pipeline-bulk-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  justify-content: stretch;
  min-width: 0;
  margin-top: 0;
}

.admin-pipeline-action-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-pipeline-bulk-button {
  position: relative;
  width: 2.45rem;
  min-width: 2.45rem;
  min-height: 2.45rem;
  padding: 0;
}

.admin-pipeline-heading-select::after,
.admin-pipeline-bulk-button::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 12;
  right: 50%;
  bottom: calc(100% + 0.48rem);
  width: max-content;
  max-width: 13rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 12px 30px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 0.18rem);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.admin-pipeline-heading-select:hover::after,
.admin-pipeline-heading-select:focus-visible::after,
.admin-pipeline-bulk-button:hover::after,
.admin-pipeline-bulk-button:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}

.admin-pipeline-refresh-button.is-running {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
}

.admin-pipeline-refresh-button.is-running i + i {
  display: none;
}

.admin-pipeline-refresh-button.is-running:hover,
.admin-pipeline-refresh-button.is-running:focus-visible {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-pipeline-refresh-button.is-running:hover i:first-child,
.admin-pipeline-refresh-button.is-running:focus-visible i:first-child {
  display: none;
}

.admin-pipeline-refresh-button.is-running:hover i + i,
.admin-pipeline-refresh-button.is-running:focus-visible i + i {
  display: inline;
}

.admin-actions button,
.admin-actions a,
.admin-manual-event-form button,
.admin-manual-event-actions button,
.admin-dev-form button,
.admin-dev-actions button,
.admin-subscription-actions button,
.admin-pipeline-actions button,
.admin-pipeline-actions a {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.admin-actions button:hover:not(:disabled),
.admin-actions a:hover,
.admin-manual-event-form button:hover:not(:disabled),
.admin-manual-event-actions button:hover:not(:disabled),
.admin-dev-form button:hover:not(:disabled),
.admin-dev-actions button:hover:not(:disabled),
.admin-subscription-actions button:hover:not(:disabled),
.admin-pipeline-actions button:hover:not(:disabled),
.admin-pipeline-actions a:hover {
  border-color: var(--muted);
  background: var(--card);
  color: var(--text);
}

.admin-actions .admin-pipeline-bulk-button {
  width: 2.45rem;
  min-width: 2.45rem;
  min-height: 2.45rem;
  padding: 0;
}

.admin-actions .admin-pipeline-bulk-button i {
  font-size: 0.95rem;
  line-height: 1;
}

.admin-actions .admin-pipeline-run-history-button {
  width: auto;
  min-width: 3.25rem;
  gap: 0.32rem;
  padding-inline: 0.6rem;
}

.admin-actions .admin-pipeline-run-history-button strong {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  place-items: center;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.admin-manual-event-form button[type="submit"],
.admin-manual-event-actions button[type="submit"],
.admin-dev-form button[type="submit"] {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.admin-manual-event-form button[type="submit"]:hover:not(:disabled),
.admin-manual-event-actions button[type="submit"]:hover:not(:disabled),
.admin-dev-form button[type="submit"]:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #ffffff;
}

.admin-actions .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  color: var(--degraded);
}

.admin-actions .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-actions button:disabled,
.admin-manual-event-form button:disabled,
.admin-manual-event-actions button:disabled,
.admin-dev-form button:disabled,
.admin-dev-actions button:disabled,
.admin-subscription-actions button:disabled,
.admin-pipeline-actions button:disabled {
  opacity: 0.62;
  cursor: progress;
}

.admin-icon-button[data-refresh-button-state="checked"]:disabled,
.admin-pipeline-actions button[data-refresh-button-state="checked"]:disabled,
button[data-refresh-button-state="checked"]:disabled {
  border-color: color-mix(in srgb, var(--good) 46%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  color: var(--good);
  cursor: default;
  opacity: 1;
}

.admin-actions button[data-security-state="enabled"]:disabled {
  cursor: not-allowed;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.admin-metric-card {
  display: grid;
  gap: 0.3rem;
}

.admin-metric-card > span,
.dev-usage-card-title > span:first-child,
.admin-chart-card .section-heading > span,
.admin-pipeline-card .section-heading > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-metric-card > strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  transform-origin: 50% 58%;
  will-change: transform, opacity;
}

.admin-metric-card > strong.admin-metric-value-flip {
  animation: admin-metric-number-flip 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-metric-card > strong.admin-value-change-flash,
.admin-hit-chart-bar > strong.admin-value-change-flash,
.admin-breakdown-row-head > span.admin-value-change-flash {
  animation: admin-value-change-flash 900ms ease-out;
}

.admin-metric-card > strong.admin-metric-value-flip.admin-value-change-flash {
  animation:
    admin-metric-number-flip 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    admin-value-change-flash 900ms ease-out;
}

@keyframes admin-metric-number-flip {
  0% {
    opacity: 0.58;
    transform: perspective(18rem) rotateX(-72deg) translateY(0.18rem);
  }

  54% {
    opacity: 1;
    transform: perspective(18rem) rotateX(11deg) translateY(-0.04rem);
  }

  100% {
    opacity: 1;
    transform: perspective(18rem) rotateX(0deg) translateY(0);
  }
}

@keyframes admin-value-change-flash {
  0%,
  18% {
    color: var(--good);
    text-shadow: 0 0 18px color-mix(in srgb, var(--good) 34%, transparent);
  }

  100% {
    color: var(--text);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-micro-stat {
    transition: none;
  }

  .admin-metric-card > strong.admin-metric-value-flip {
    animation: none;
  }

  .admin-metric-card > strong.admin-value-change-flash,
  .admin-metric-card > strong.admin-metric-value-flip.admin-value-change-flash,
  .admin-hit-chart-bar > strong.admin-value-change-flash,
  .admin-breakdown-row-head > span.admin-value-change-flash {
    animation: none;
  }

  button.admin-order-review-card,
  button.admin-order-review-card::after {
    transition: none;
  }

  button.admin-order-review-card:hover:not(:disabled),
  button.admin-order-review-card:focus-visible {
    transform: none;
  }

  .admin-line-chart-path,
  .admin-line-chart-dot,
  .admin-line-chart-marker,
  .admin-line-chart-tooltip {
    transition: none;
  }

  .admin-line-chart-marker:hover,
  .admin-line-chart-marker:focus-visible,
  .admin-line-chart-marker[aria-expanded="true"] {
    transform: translate(-50%, -50%);
  }
}

.admin-chart-range {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.admin-chart-range button {
  min-height: 1.8rem;
  padding: 0 0.7rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-chart-range button[aria-pressed="true"] {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.admin-metric-card[data-tone="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 6%, var(--card));
}

.admin-hit-chart {
  display: grid;
  gap: 0.55rem;
  min-height: 0;
  align-items: stretch;
  padding-top: 0.1rem;
}

.admin-line-chart-surface {
  position: relative;
  height: clamp(7.25rem, 14vw, 9rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 78%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent)),
    var(--surface-soft);
}

.admin-line-chart-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-line-chart-area {
  opacity: 0.72;
}

.admin-line-chart-path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.35rem 0.5rem color-mix(in srgb, var(--primary) 10%, transparent));
  transition: d 180ms ease;
  vector-effect: non-scaling-stroke;
}

.admin-line-chart-average {
  stroke: color-mix(in srgb, var(--muted) 44%, transparent);
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.admin-line-chart-dot {
  stroke: var(--card);
  stroke-width: 1.8;
  transition:
    r 160ms ease,
    opacity 160ms ease;
  vector-effect: non-scaling-stroke;
}

.admin-line-chart-dot:hover {
  r: 4;
}

.admin-line-chart-marker {
  appearance: none;
  position: absolute;
  z-index: 1;
  width: 0.58rem;
  height: 0.58rem;
  margin: 0;
  padding: 0;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition:
    left 220ms ease,
    top 220ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.admin-line-chart-marker:hover,
.admin-line-chart-marker:focus-visible,
.admin-line-chart-marker[aria-expanded="true"] {
  border-color: var(--card);
  box-shadow:
    0 0 0 0.22rem color-mix(in srgb, var(--primary) 14%, transparent),
    0 0.35rem 0.8rem rgba(15, 23, 42, 0.16);
  transform: translate(-50%, -50%) scale(1.18);
}

.admin-line-chart-marker:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 54%, white);
  outline-offset: 3px;
}

.admin-line-chart-tooltip {
  position: absolute;
  z-index: 3;
  left: clamp(4.35rem, var(--chart-tooltip-x, 50%), calc(100% - 4.35rem));
  top: var(--chart-tooltip-y, 50%);
  display: grid;
  gap: 0.12rem;
  min-width: max-content;
  max-width: min(12rem, calc(100% - 1rem));
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 0.55rem 1.25rem rgba(15, 23, 42, 0.26);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.65rem));
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.admin-line-chart-tooltip[data-placement="below"] {
  transform: translate(-50%, 0.65rem);
}

.admin-line-chart-tooltip[hidden] {
  display: none;
}

.admin-line-chart-tooltip span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
}

.admin-line-chart-tooltip strong {
  color: #ffffff;
  font-size: inherit;
}

.admin-line-chart-path.is-api {
  stroke: var(--primary);
}

.admin-line-chart-area.is-api {
  fill: color-mix(in srgb, var(--primary) 14%, transparent);
}

.admin-line-chart-dot.is-api {
  fill: var(--primary);
}

.admin-line-chart-marker.is-api {
  background: var(--primary);
}

.admin-line-chart-legend i.is-api {
  background: var(--primary);
}

.admin-line-chart-path.is-visitors {
  stroke: var(--good);
}

.admin-line-chart-area.is-visitors {
  fill: color-mix(in srgb, var(--good) 13%, transparent);
}

.admin-line-chart-dot.is-visitors {
  fill: var(--good);
}

.admin-line-chart-marker.is-visitors {
  background: var(--good);
}

.admin-line-chart-legend i.is-visitors {
  background: var(--good);
}

.admin-line-chart-path.is-ai {
  stroke: color-mix(in srgb, #a855f7 68%, var(--primary));
}

.admin-line-chart-area.is-ai {
  fill: color-mix(in srgb, #a855f7 13%, transparent);
}

.admin-line-chart-dot.is-ai {
  fill: color-mix(in srgb, #a855f7 68%, var(--primary));
}

.admin-line-chart-marker.is-ai {
  background: color-mix(in srgb, #a855f7 68%, var(--primary));
}

.admin-line-chart-legend i.is-ai {
  background: color-mix(in srgb, #a855f7 68%, var(--primary));
}

.admin-line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.admin-line-chart-legend span {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
}

.admin-line-chart-legend i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}

.admin-line-chart-legend i.admin-line-chart-average-swatch {
  width: 1.35rem;
  height: 0;
  border-radius: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--muted) 54%, transparent);
}

.admin-line-chart-legend strong {
  color: var(--muted);
  font-size: inherit;
  font-weight: inherit;
}

.admin-line-chart-legend-count {
  min-width: 1.45rem;
  padding: 0.12rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, var(--surface-soft));
  color: var(--text);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.admin-micro-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 1.65rem;
  margin-top: 0.1rem;
}

.admin-micro-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.4rem;
  padding: 0 0.5rem;
  color: var(--muted);
  cursor: help;
  line-height: 1;
  transition: color 150ms ease;
}

.admin-micro-stat:first-child {
  padding-left: 0;
}

.admin-micro-stat:last-child {
  padding-right: 0;
}

.admin-micro-stat + .admin-micro-stat {
  border-left: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.admin-micro-stat:hover {
  color: var(--text);
}

.admin-micro-stat i {
  display: inline-flex;
  width: 0.88rem;
  height: 0.88rem;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--accent) 68%, var(--muted));
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
}

.admin-micro-stat strong {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.admin-share-platform-empty {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-hit-chart-bar > small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.admin-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(15.5rem, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

.admin-breakdown-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  min-height: 20rem;
}

.admin-breakdown-card .section-heading {
  align-items: flex-start;
  min-height: 3.25rem;
  margin: 0;
}

.admin-audience-card {
  min-height: 0;
}

.admin-audience-card .section-heading {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.admin-audience-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.admin-audience-toggle button {
  width: 100%;
  min-width: 0;
  padding-inline: 0.38rem;
  font-size: 0.68rem;
  text-align: center;
}

.admin-audience-panels {
  display: grid;
  min-height: 0;
}

.admin-audience-panel {
  grid-area: 1 / 1;
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.84, 0.22, 1);
}

.admin-audience-panel.is-entering {
  opacity: 0;
  transform: translateY(0.35rem);
}

.admin-audience-panel.is-exiting {
  opacity: 0;
  transform: translateY(-0.25rem);
  pointer-events: none;
}

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

.admin-breakdown-list {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-height: 11.5rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  --admin-breakdown-color-1: color-mix(in srgb, var(--primary) 82%, #7c3aed);
  --admin-breakdown-color-2: color-mix(in srgb, #8b5cf6 86%, var(--primary));
  --admin-breakdown-color-3: color-mix(in srgb, var(--good) 72%, var(--primary));
  --admin-breakdown-color-4: color-mix(in srgb, #38bdf8 70%, var(--primary));
  --admin-breakdown-color-5: color-mix(in srgb, #ec4899 72%, var(--primary));
  --admin-breakdown-color-6: color-mix(in srgb, var(--muted) 42%, var(--border));
}

.admin-audience-card .admin-breakdown-list {
  min-height: 0;
  height: 100%;
}

.admin-breakdown-list .empty-state {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.admin-breakdown-donut-chart {
  display: grid;
  gap: 0.95rem;
  align-items: center;
}

.admin-breakdown-gauge-chart {
  grid-template-columns: 1fr;
}

.admin-breakdown-donut {
  position: relative;
  display: grid;
  width: min(100%, 16rem);
  aspect-ratio: 1.72;
  place-items: center;
  justify-self: center;
}

.admin-breakdown-gauge {
  align-items: end;
  padding-top: 0.2rem;
  border-radius: 18px;
  background: transparent;
}

.admin-breakdown-gauge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-breakdown-gauge-track,
.admin-breakdown-gauge-segment {
  fill: none;
  stroke-linecap: round;
}

.admin-breakdown-gauge-track {
  stroke-width: 20;
  stroke: color-mix(in srgb, var(--border) 58%, transparent);
}

.admin-breakdown-gauge-segment {
  stroke-width: 20;
  stroke: var(--slice-color);
  filter: drop-shadow(0 0.35rem 0.55rem color-mix(in srgb, var(--slice-color) 24%, transparent));
}

.admin-audience-panel:not([hidden]) .admin-breakdown-gauge-segment {
  animation: admin-breakdown-gauge-segment-in 360ms cubic-bezier(0.2, 0.84, 0.22, 1) both;
}

.admin-breakdown-donut-center {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  line-height: 1;
  align-self: end;
  margin-bottom: 1.1rem;
}

.admin-breakdown-donut-center strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 5vw, 2.55rem);
  letter-spacing: 0;
}

.admin-breakdown-donut-center span {
  margin-top: 0.05rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-breakdown-donut-legend {
  display: grid;
  gap: 0.62rem;
  min-width: 0;
}

.admin-breakdown-donut-legend-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4rem, auto);
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.admin-breakdown-donut-legend-item span {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
}

.admin-breakdown-donut-legend-item i {
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--slice-color);
  box-shadow: 0 0 0.65rem color-mix(in srgb, var(--slice-color) 36%, transparent);
}

.admin-breakdown-donut-legend-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: inherit;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-breakdown-donut-legend-item em {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(2.4rem, auto);
  gap: 0.58rem;
  align-items: center;
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.admin-breakdown-donut-legend-item em span:last-child {
  color: var(--text);
}

.admin-breakdown-row {
  display: grid;
  gap: 0.42rem;
  padding: 0.58rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--good) 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--shadow-color) 24%, transparent);
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-breakdown-row.is-new {
  animation: admin-breakdown-row-in 420ms cubic-bezier(0.2, 0.84, 0.22, 1) both;
  animation-delay: var(--row-delay, 0ms);
}

.admin-breakdown-row:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--good) 20%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

.admin-breakdown-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.admin-breakdown-row-head > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-breakdown-row-head > span {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-breakdown-bar {
  display: block;
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-breakdown-bar > span {
  display: block;
  height: 100%;
  min-width: 0.42rem;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--good) 58%, var(--primary) 18%), color-mix(in srgb, var(--primary) 52%, var(--good) 18%));
}

@keyframes admin-breakdown-row-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes admin-breakdown-gauge-segment-in {
  from {
    opacity: 0;
    stroke-dashoffset: 16;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-audience-panel,
  .admin-breakdown-row,
  .admin-breakdown-row.is-new {
    animation: none;
    transition: none;
  }

  .admin-breakdown-gauge-segment {
    animation: none !important;
  }
}

@keyframes admin-skeleton-pulse {
  0%,
  100% {
    opacity: 0.48;
  }

  50% {
    opacity: 1;
  }
}

.admin-layout[data-admin-loading="true"] .admin-metric-card > strong,
.admin-layout[data-admin-loading="true"] .admin-metric-card > p,
.admin-layout[data-admin-loading="true"] .admin-risk-card > strong,
.admin-layout[data-admin-loading="true"] .admin-risk-card > p,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > strong,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > p,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > strong,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > p,
.admin-layout[data-admin-loading="true"] .admin-order-review-card strong,
.admin-layout[data-admin-loading="true"] .admin-order-review-card p,
.admin-layout[data-admin-loading="true"] #adminRefreshMeta,
.admin-skeleton-line,
.admin-skeleton-bar,
.admin-skeleton-badge {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 50%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 50%, transparent)
    );
  color: transparent !important;
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.admin-layout[data-admin-loading="true"] .admin-metric-card > strong,
.admin-layout[data-admin-loading="true"] .admin-metric-card > p,
.admin-layout[data-admin-loading="true"] .admin-risk-card > strong,
.admin-layout[data-admin-loading="true"] .admin-risk-card > p,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > strong,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > p,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > strong,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > p,
.admin-layout[data-admin-loading="true"] .admin-order-review-card strong,
.admin-layout[data-admin-loading="true"] .admin-order-review-card p,
.admin-layout[data-admin-loading="true"] #adminRefreshMeta {
  display: block;
}

.admin-layout[data-admin-loading="true"] .admin-metric-card > strong,
.admin-layout[data-admin-loading="true"] .admin-risk-card > strong,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > strong,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > strong,
.admin-layout[data-admin-loading="true"] .admin-order-review-card strong {
  width: min(7rem, 70%);
  height: 2.6rem;
}

.admin-layout[data-admin-loading="true"] .admin-metric-card > p,
.admin-layout[data-admin-loading="true"] .admin-risk-card > p,
.admin-layout[data-admin-loading="true"] .admin-auth-status-card > p,
.admin-layout[data-admin-loading="true"] .admin-dev-summary-card > p,
.admin-layout[data-admin-loading="true"] .admin-order-review-card p,
.admin-layout[data-admin-loading="true"] #adminRefreshMeta {
  width: min(12rem, 90%);
  height: 1rem;
}

.admin-skeleton-line {
  display: block;
  width: 100%;
  height: 0.85rem;
}

.admin-skeleton-title {
  width: min(11rem, 80%);
  height: 1.1rem;
}

.admin-skeleton-short {
  width: min(7rem, 55%);
}

.admin-skeleton-value {
  width: 2.4rem;
  margin-inline: auto;
}

.admin-skeleton-label {
  width: 3.8rem;
  margin-inline: auto;
}

.admin-skeleton-bar {
  display: block;
  width: 100%;
  min-height: 0.5rem;
  border-radius: 7px 7px 3px 3px;
}

.admin-skeleton-badge {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
}

.admin-skeleton-dot {
  width: 0.58rem;
  height: 0.58rem;
}

.admin-skeleton-line-chart-surface {
  display: block;
}

.admin-skeleton-line-chart-path {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 28%, var(--border));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.admin-skeleton-line-chart-legend span {
  min-width: 4.2rem;
}

.admin-skeleton-donut {
  background:
    conic-gradient(
      color-mix(in srgb, var(--primary) 24%, var(--border)) 0% 22%,
      color-mix(in srgb, var(--good) 22%, var(--border)) 22% 52%,
      color-mix(in srgb, #8b5cf6 22%, var(--border)) 52% 74%,
      color-mix(in srgb, var(--stale) 24%, var(--border)) 74% 100%
    );
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.admin-skeleton-donut-value {
  width: 2.5rem;
  height: 1.05rem;
}

.admin-skeleton-donut-label {
  width: 3.2rem;
  height: 0.55rem;
  margin-top: 0.22rem;
}

.admin-skeleton-donut-legend-item .admin-skeleton-title {
  width: min(8rem, 78%);
}

.admin-skeleton-list-item {
  pointer-events: none;
}

.admin-skeleton-list-item .admin-skeleton-line + .admin-skeleton-line {
  margin-top: 0.2rem;
}

.admin-skeleton-table-row td {
  vertical-align: middle;
}

.admin-skeleton-table-row .admin-skeleton-line {
  min-width: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout[data-admin-loading="true"] .admin-metric-card > strong,
  .admin-layout[data-admin-loading="true"] .admin-metric-card > p,
  .admin-layout[data-admin-loading="true"] .admin-risk-card > strong,
  .admin-layout[data-admin-loading="true"] .admin-risk-card > p,
  .admin-layout[data-admin-loading="true"] .admin-order-review-card strong,
  .admin-layout[data-admin-loading="true"] .admin-order-review-card p,
  .admin-layout[data-admin-loading="true"] .admin-dev-summary-card > strong,
  .admin-layout[data-admin-loading="true"] .admin-dev-summary-card > p,
  .admin-layout[data-admin-loading="true"] #adminRefreshMeta,
  .admin-skeleton-line,
  .admin-skeleton-bar,
  .admin-skeleton-badge,
  .admin-skeleton-line-chart-path,
  .admin-skeleton-donut,
  .admin-pipeline-status-skeleton strong,
  .admin-pipeline-status-skeleton span::before,
  .dev-layout[data-dev-loading="true"] #devAccountTitle,
  .dev-layout[data-dev-loading="true"] #devAccountMeta,
  .dev-layout[data-dev-loading="true"] #devSubscriptionStatus,
  .dev-layout[data-dev-loading="true"] #devSubscriptionMeta,
  .dev-layout[data-dev-loading="true"] #devUsageStatus,
  .dev-layout[data-dev-loading="true"] #devUsageMeta,
  .dev-layout[data-dev-loading="true"] #devUsageHistoryMeta,
  .dev-layout[data-dev-loading="true"] #devPortalMeta,
  .dev-layout[data-dev-loading="true"] #devSecurityMeta,
  .dev-layout[data-dev-loading="true"] #devPasskeyMeta,
  .dev-layout[data-dev-loading="true"] .usage-progress,
  .dev-layout[data-dev-loading="true"] .dev-license-key-field,
  .dev-usage-history-skeleton strong,
  .dev-usage-history-skeleton small,
  .dev-usage-history-skeleton .dev-usage-history-track i {
    animation: none;
  }
}

.admin-event-log-card {
  display: grid;
  gap: 1rem;
}

.admin-orders-table-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.admin-inbound-email-card {
  gap: 0.75rem;
}

.admin-email-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.15rem 0;
}

.admin-email-section-heading h4,
.admin-email-section-heading p {
  margin: 0;
}

.admin-email-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
}

.admin-email-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.admin-email-view-tabs button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.admin-email-view-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-email-view-tabs button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-email-view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0 0.4rem;
  border: 1px solid color-mix(in srgb, var(--stale) 42%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--stale) 12%, var(--card));
  color: var(--stale);
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1;
}

.admin-email-view-count[hidden] {
  display: none;
}

.admin-inbound-email-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-inbound-email-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.admin-inbound-email-filter::after {
  position: absolute;
  right: 1rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid;
  border-bottom: 2px solid;
  color: var(--muted);
  content: "";
  pointer-events: none;
  transform: translateY(-0.15rem) rotate(45deg);
}

.admin-inbound-email-filter select {
  appearance: none;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0 2.35rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-inbound-email-filter select:hover {
  border-color: var(--muted);
  background: var(--card);
}

.admin-inbound-email-filter select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-email-view-panel {
  min-width: 0;
}

.admin-email-view-panel[hidden] {
  display: none;
}

.admin-email-delivery-meta {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-email-section-heading h4 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.admin-email-section-heading p {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-inbound-email-list {
  display: grid;
  gap: 0.6rem;
}

.admin-inbound-email-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.admin-inbound-classification-note {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, var(--border));
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-inbound-classification-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-inbound-incomplete-note {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, var(--card));
}

.admin-inbound-processing-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
}

.admin-inbound-processing-note > i {
  flex: none;
  color: var(--primary);
  font-size: 1.35rem;
}

.admin-inbound-processing-note > div {
  display: grid;
  gap: 0.16rem;
}

.admin-inbound-processing-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.status-chip .admin-inbound-processing-spinner {
  margin-right: 0.28rem;
}

.admin-inbound-processing-spinner {
  display: inline-block;
  animation: admin-inbound-processing-spin 0.8s linear infinite;
}

@keyframes admin-inbound-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-inbound-processing-spinner {
    animation: none;
  }
}

.admin-inbound-email-coverage {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-inbound-coverage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-inbound-coverage-heading span,
.admin-inbound-email-coverage > p {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-inbound-email-coverage > p {
  margin: 0;
}

.admin-inbound-coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-inbound-coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem 0.3rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-inbound-coverage-chip img {
  width: 1.75rem;
  height: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 3px;
  object-fit: cover;
}

.admin-inbound-email-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.admin-inbound-email-item[data-motion] {
  will-change: height;
}

.admin-inbound-email-item summary {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
}

.admin-inbound-email-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.admin-inbound-email-jurisdiction {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: 3.25rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1;
}

.admin-inbound-email-jurisdiction img {
  width: 2.5rem;
  height: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 4px;
  background: var(--card);
  object-fit: cover;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--shadow) 45%, transparent);
}

.admin-inbound-email-jurisdiction > i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 1rem;
}

.admin-inbound-email-item summary small {
  color: var(--muted);
}

.admin-inbound-email-statuses {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.admin-inbound-email-statuses .status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-strong);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.admin-inbound-email-statuses :is(.status-received, .status-processing) {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
}

.admin-inbound-email-statuses .status-incomplete_order {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
}

.admin-inbound-email-statuses .status-not_order {
  color: var(--muted-strong);
  border-color: color-mix(in srgb, var(--muted) 38%, var(--border));
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
}

.admin-inbound-email-statuses .status-failed {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 42%, var(--border));
  background: color-mix(in srgb, var(--bad) 9%, var(--card));
}

@media (max-width: 620px) {
  .admin-inbound-email-filters,
  .admin-inbound-email-filter,
  .admin-inbound-email-filter select {
    width: 100%;
  }

  .admin-inbound-email-item summary {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .admin-inbound-email-statuses {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.admin-inbound-email-statuses .review-pending {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
}

.admin-inbound-email-statuses .review-reviewed {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--card));
}

.admin-inbound-email-statuses :is(.review-duplicate, .review-dismissed) {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-soft);
}

.admin-inbound-email-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border-top: 1px solid var(--border);
}

.admin-inbound-retry-meta {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-inbound-email-body pre {
  max-height: 28rem;
  margin: 0;
  padding: 0.9rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.admin-inbound-duplicate-warning {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 9%, var(--card));
}

.admin-inbound-attachments {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-inbound-attachments ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-inbound-attachments li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.admin-inbound-attachments small {
  color: var(--muted);
  text-align: right;
}

.admin-inbound-duplicate-warning strong {
  color: var(--text);
}

.admin-inbound-duplicate-warning ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-inbound-duplicate-warning li {
  display: grid;
  gap: 0.1rem;
}

.admin-inbound-duplicate-warning small,
.admin-inbound-duplicate-warning p {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-inbound-duplicate-warning p {
  margin: 0;
}

.admin-orders-heading {
  align-items: center;
}

.admin-orders-heading .admin-actions button {
  gap: 0.42rem;
}

.admin-orders-table-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1.5fr) repeat(3, minmax(9rem, 0.75fr));
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--card));
}

.admin-orders-table-controls.admin-order-filters {
  grid-template-columns: minmax(14rem, 1.5fr) repeat(5, minmax(9rem, 0.75fr));
}

.admin-orders-table-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-orders-table-controls input,
.admin-orders-table-controls select {
  width: 100%;
  min-height: 2.38rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 0.72rem;
  text-transform: none;
}

.admin-orders-table-controls select {
  padding-right: 2.25rem;
}

.admin-orders-table-controls input:focus,
.admin-orders-table-controls select:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-orders-table-wrap {
  overflow: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background: var(--card);
}

.admin-orders-table {
  width: 100%;
  min-width: 66rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.admin-orders-table th,
.admin-orders-table td {
  padding: 0.78rem 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  text-align: left;
  vertical-align: middle;
}

.admin-orders-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-orders-table td {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 780;
  line-height: 1.35;
  background: color-mix(in srgb, var(--card) 90%, transparent);
}

.admin-orders-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-orders-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.admin-orders-table th:nth-child(1),
.admin-orders-table td:nth-child(1) {
  width: 22rem;
}

.admin-orders-table th:nth-child(2),
.admin-orders-table td:nth-child(2) {
  width: 10rem;
}

.admin-orders-table th:nth-child(3),
.admin-orders-table td:nth-child(3) {
  width: 7rem;
}

.admin-orders-table th:nth-child(4),
.admin-orders-table td:nth-child(4),
.admin-orders-table th:nth-child(5),
.admin-orders-table td:nth-child(5) {
  width: 10rem;
}

.admin-orders-table th:nth-child(6),
.admin-orders-table td:nth-child(6) {
  width: 4.5rem;
  text-align: center;
}

.admin-orders-table th:nth-child(7),
.admin-orders-table td:nth-child(7) {
  width: 6rem;
}

.admin-orders-table-order {
  display: grid;
  gap: 0.18rem;
}

.admin-order-duplicates {
  margin-top: .45rem;
  color: var(--muted);
  font-size: .72rem;
}

.admin-order-duplicates > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--primary);
  font-weight: 800;
}

.admin-order-duplicate-list {
  display: grid;
  gap: .45rem;
  margin-top: .5rem;
}

.admin-order-duplicate-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-order-duplicate-list span,
.admin-order-duplicate-list strong,
.admin-order-duplicate-list small {
  display: block;
  min-width: 0;
}

.admin-order-duplicate-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-duplicate-restore {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: underline transparent;
  text-underline-offset: .18em;
}

.admin-order-duplicate-restore:hover {
  text-decoration-color: currentColor;
}

.admin-order-duplicate-modal {
  width: min(36rem, calc(100vw - 2rem));
  height: max-content;
  grid-template-rows: minmax(0, 1fr);
}

.admin-order-duplicate-modal > form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.admin-order-duplicate-body {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.admin-order-duplicate-body > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-order-duplicate-body .admin-field {
  display: grid;
  gap: .45rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-order-duplicate-body select {
  width: 100%;
  min-height: 3rem;
  padding: 0 .9rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.admin-order-duplicate-body select:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--card);
}

.admin-order-duplicate-body select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-duplicate-modal .admin-event-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.admin-order-duplicate-modal .admin-event-modal-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 1.05rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.admin-order-duplicate-modal .admin-event-modal-footer button:hover:not(:disabled) {
  border-color: var(--muted);
  background: var(--surface-soft);
  color: var(--text);
}

.admin-order-duplicate-modal .admin-event-modal-footer .primary-action {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-order-duplicate-modal .admin-event-modal-footer .primary-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 82%, #000);
  background: color-mix(in srgb, var(--primary) 82%, #000);
  color: #fff;
  transform: translateY(-1px);
}

.admin-order-duplicate-modal .admin-event-modal-footer button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-duplicate-modal .admin-event-modal-footer button:disabled {
  cursor: progress;
  opacity: .65;
}

.admin-order-duplicate-status {
  min-height: 1.25rem;
  color: var(--warn);
  font-size: .78rem;
  font-weight: 750;
}

@media (max-width: 520px) {
  .admin-order-duplicate-modal .admin-event-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-order-duplicate-modal .admin-event-modal-footer button {
    width: 100%;
  }
}

.admin-orders-table-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.42rem;
}

.admin-orders-table-order strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-orders-official-badge {
  display: inline-grid;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--calendar-mark-text, #b7791f);
  place-items: center;
}

.admin-orders-official-badge i {
  font-size: 1.05rem;
  line-height: 1;
}

.admin-orders-image-badge {
  display: inline-grid;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--primary);
  place-items: center;
}

.admin-orders-image-badge i.ph-duotone {
  font-size: 0.92rem;
}

.admin-orders-table-order small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-orders-source-link {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--muted);
  place-items: center;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.admin-orders-source-link:hover,
.admin-orders-source-link:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  outline: none;
  transform: translateY(-1px);
}

.admin-orders-source-link:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.admin-orders-source-link .order-resource-favicon,
.admin-orders-source-link .order-resource-favicon img {
  width: 1.15rem;
  height: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .admin-orders-source-link {
    transition: none;
  }
}

.admin-orders-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
}

.admin-orders-table-actions-cell {
  text-align: right;
}

.admin-orders-suggestion-button {
  border-color: color-mix(in srgb, var(--stale) 42%, var(--border));
  background: color-mix(in srgb, var(--stale) 8%, var(--card));
  color: var(--stale);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--stale) 10%, transparent);
}

.admin-orders-suggestion-button:hover,
.admin-orders-suggestion-button:focus-visible {
  border-color: var(--stale);
  background: color-mix(in srgb, var(--stale) 14%, var(--card));
  color: var(--stale);
}

.admin-orders-table-empty {
  padding: 2rem 1rem !important;
  color: var(--muted) !important;
  text-align: center !important;
}

.admin-orders-table-footer {
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.admin-directory-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.admin-directory-table-wrap:has(.admin-dev-menu[open]) {
  overflow: visible;
}

.admin-directory-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.admin-directory-table th,
.admin-directory-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.admin-directory-table th {
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card));
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-directory-table td {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 750;
}

.admin-directory-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-directory-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 3.5%, var(--card));
}

.admin-directory-table-primary,
.admin-dev-heading {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.admin-directory-table-primary strong,
.admin-dev-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-directory-table-primary small,
.admin-dev-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-directory-table-badge {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-directory-table-date {
  color: var(--muted) !important;
  font-size: 0.76rem !important;
  white-space: nowrap;
}

.admin-directory-table-select {
  width: 100%;
  min-height: 2.25rem;
  appearance: none;
  padding: 0 2rem 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 0.9rem) 50% / 0.4rem 0.4rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.64rem) 50% / 0.4rem 0.4rem no-repeat,
    var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-directory-table-actions {
  position: sticky;
  z-index: 2;
  right: 0;
  background: var(--card);
  box-shadow: -0.5rem 0 0.8rem -0.75rem var(--shadow);
  text-align: right !important;
}

.admin-directory-table th:last-child {
  position: sticky;
  z-index: 3;
  right: 0;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card));
}

.admin-directory-table tbody tr:hover .admin-directory-table-actions {
  background: color-mix(in srgb, var(--primary) 3.5%, var(--card));
}

.admin-directory-table tbody tr:has(.admin-dev-menu[open]) td {
  position: relative;
  z-index: 4;
}

.admin-directory-table tbody tr:has(.admin-dev-menu[open]) .admin-directory-table-actions {
  z-index: 6;
}

.admin-directory-table-actions > button,
.admin-directory-table-actions > details {
  display: inline-block;
}

.admin-directory-table-action-group {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.admin-subscription-test-button {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
}

.admin-subscription-test-button.is-order-ready {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.admin-subscription-test-button.is-order-ready:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 82%, black);
  background: color-mix(in srgb, var(--primary) 88%, black);
  color: var(--primary-text);
}

.admin-audience-alert-drawer form {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto 1fr auto;
}

.admin-audience-alert-drawer .notable-days-header > div {
  display: grid;
  gap: 0.2rem;
}

.admin-audience-alert-drawer .notable-days-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.admin-audience-alert-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.admin-audience-alert-body > label {
  display: grid;
  gap: 0.42rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-audience-alert-body select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.admin-audience-alert-body label small,
.admin-audience-alert-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.admin-audience-alert-preview {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-soft));
}

.admin-audience-alert-preview strong {
  font-family: "Lora", Georgia, serif;
  font-size: 1.35rem;
}

.admin-audience-alert-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-audience-alert-drawer .admin-event-modal-footer .primary-action {
  display: inline-flex;
  min-height: 2.45rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 1.05rem;
  border-color: var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.admin-audience-alert-drawer .admin-event-modal-footer .primary-action:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: var(--primary-text);
  transform: translateY(-1px);
}

.admin-audience-alert-drawer .admin-event-modal-footer .primary-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-audience-alert-drawer .admin-event-modal-footer .primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.admin-directory-table-empty {
  padding: 2rem 1rem !important;
  color: var(--muted) !important;
  text-align: center !important;
}

.admin-subscription-table th:nth-child(1) { width: 19%; }
.admin-subscription-table th:nth-child(2) { width: 10%; }
.admin-subscription-table th:nth-child(3) { width: 15%; }
.admin-subscription-table th:nth-child(4) { width: 15%; }
.admin-subscription-table th:nth-child(5) { width: 12%; }
.admin-subscription-table th:nth-child(6) { width: 20%; }
.admin-subscription-table th:nth-child(7) { width: 9%; }

.admin-dev-table {
  min-width: 58rem;
}

.admin-dev-table th:nth-child(1) { width: 24%; }
.admin-dev-table th:nth-child(2) { width: 15%; }
.admin-dev-table th:nth-child(3) { width: 13%; }
.admin-dev-table th:nth-child(4) { width: 22%; }
.admin-dev-table th:nth-child(5) { width: 20%; }
.admin-dev-table th:nth-child(6) { width: 6%; }

.admin-dev-table .admin-dev-usage-top span {
  display: none;
}

.admin-event-modal.admin-order-tool-modal {
  width: min(54rem, calc(100vw - 2rem));
  height: auto;
  max-height: min(52rem, calc(100dvh - 2rem));
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-order-tool-modal-body {
  position: relative;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-order-images-modal-body {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.admin-order-images-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.admin-order-images-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.admin-order-images-controls input,
.admin-order-images-controls select {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.admin-order-images-upload {
  display: inline-flex !important;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem !important;
  padding: 0.58rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary) !important;
  cursor: pointer;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.admin-order-images-list {
  display: grid;
  gap: 0.6rem;
}

.admin-order-images-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.admin-order-images-preview {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
}

.admin-order-images-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--order-image-crop-x, 50%) var(--order-image-crop-y, 50%);
  transform: scale(var(--order-image-crop-zoom, 1));
  transform-origin: var(--order-image-crop-x, 50%) var(--order-image-crop-y, 50%);
}

.admin-order-images-preview > button {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.58rem;
  border: 1px solid color-mix(in srgb, white 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #0b1324 82%, transparent);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-order-images-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.admin-order-images-fields label {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.admin-order-images-fields label > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.admin-order-images-fields input {
  width: 100%;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
}

.admin-order-images-row-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.admin-order-images-row-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.admin-order-images-row-actions > button {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-order-images-row-actions > button:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.admin-order-images-row-actions > .danger-action {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--card));
  color: var(--danger);
}

.admin-order-images-empty {
  margin: 0;
  padding: 2rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.admin-order-tool-modal-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.admin-order-tool-modal-header-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

#adminManualEventAnalyzePopoverButton {
  anchor-name: --admin-manual-event-analyze;
}

.admin-manual-event-analyze-popover {
  position: fixed;
  z-index: 120;
  inset: 4.75rem 1rem auto auto;
  width: min(32rem, calc(100% - 2rem));
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  transform-origin: top right;
  animation: admin-analyze-popover-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-manual-event-analyze-popover:not(:popover-open) {
  display: none;
}

.admin-manual-event-analyze-popover::backdrop {
  background: transparent;
}

@supports (position-anchor: --admin-manual-event-analyze) {
  .admin-manual-event-analyze-popover {
    position-anchor: --admin-manual-event-analyze;
    inset: anchor(bottom) anchor(right) auto auto;
    margin-top: 0.55rem;
  }
}

.admin-manual-event-analyze-popover[data-state="closing"] {
  animation: admin-analyze-popover-out 140ms ease-in forwards;
}

.admin-order-tool-modal .admin-manual-event-analyze-popover .admin-manual-event-form {
  display: grid;
  grid-template-columns: minmax(9rem, 0.45fr) minmax(14rem, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-manual-event-analyze-popover .admin-manual-event-form button {
  min-height: 2.75rem;
  white-space: nowrap;
}

@keyframes admin-analyze-popover-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes admin-analyze-popover-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }
}

.admin-order-tool-modal .admin-manual-event-summary {
  padding: 0 0 0.85rem;
  cursor: default;
}

.admin-order-tool-modal .admin-manual-event-body {
  padding: 0;
  border-top: 0;
  background: transparent;
}

.admin-order-tool-modal .admin-manual-event-form {
  grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 0.5fr);
}

.admin-order-tool-modal .admin-manual-event-intake-actions {
  grid-column: 1 / -1;
}

.admin-order-tool-modal .admin-manual-event-review {
  max-width: none;
  gap: 1rem;
  padding: 1rem;
  border-color: var(--border);
  background: var(--card);
}

.admin-order-tool-modal .admin-manual-event-review > label {
  gap: 0.42rem;
}

.admin-order-tool-modal .admin-manual-event-review input,
.admin-order-tool-modal .admin-manual-event-review select,
.admin-order-tool-modal .admin-manual-event-review textarea {
  min-height: 2.75rem;
  border-color: var(--border);
  background: var(--surface-soft);
}

.admin-order-tool-modal .admin-manual-event-review textarea {
  min-height: 6.5rem;
}

.admin-manual-event-scope {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card));
}

.admin-manual-event-scope > label,
.admin-manual-event-scope-areas {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.admin-manual-event-scope small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.45;
  text-transform: none;
}

.admin-manual-event-scope-areas {
  padding-top: 0.1rem;
}

.admin-manual-event-scope-areas[hidden],
.admin-manual-event-scope > label[hidden] {
  display: none;
}

.admin-manual-event-scope-areas > span,
.admin-manual-event-scope > label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-manual-event-scope-entry {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-width: 0;
}

.admin-manual-event-scope-entry button {
  min-height: 2.75rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  background: var(--primary);
  color: var(--primary-text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-manual-event-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-manual-event-scope-chip,
.admin-manual-event-scope-overflow {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 999px;
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  background: var(--card);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 750;
}

.admin-manual-event-scope-chip button {
  display: grid;
  width: 1.35rem;
  min-height: 1.35rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.admin-manual-event-scope-overflow {
  padding-inline: 0.65rem;
  color: var(--primary);
  cursor: pointer;
}

.admin-order-composer-schedule {
  position: relative;
  gap: 1.5rem;
}

.admin-order-end-condition {
  width: 100%;
  margin-bottom: 0.9rem;
}

.admin-order-end-condition select {
  width: 100%;
}

.admin-order-composer-schedule::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border);
  content: "";
  transform: translateX(-0.5px);
}

.admin-order-composer-boundary {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.65rem;
}

.admin-order-composer-boundary h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.admin-order-daylight-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.admin-order-daylight-buttons button {
  min-height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 0.18rem 0.45rem;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-order-daylight-buttons button:hover,
.admin-order-daylight-buttons button:focus-visible,
.admin-order-daylight-buttons button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-order-daylight-buttons button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-daylight-buttons button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-event-log-card .section-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-orders-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-orders-workspace-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-orders-workspace-tabs button,
.admin-orders-event-log-button {
  min-height: 2.45rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 0.8rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-orders-workspace-tabs button[aria-selected="true"] {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.admin-orders-workspace-tabs button:hover,
.admin-orders-event-log-button:hover {
  color: var(--text);
}

.admin-orders-workspace-tabs button:focus-visible,
.admin-orders-event-log-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-orders-workspace-tabs i,
.admin-orders-event-log-button i {
  font-size: 1rem;
  line-height: 1;
}

.admin-orders-event-log-button {
  border-color: var(--border);
  background: var(--card);
}

.admin-orders-event-log-button strong {
  min-width: 1.45rem;
  min-height: 1.45rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  line-height: 1;
}

.admin-orders-workspace-panel[hidden] {
  display: none;
}

.admin-orders-workspace-panel .admin-manual-event-summary {
  cursor: default;
}

.admin-event-log-modal .admin-event-table-controls {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 1rem 1.25rem;
}

.admin-event-log-modal .admin-event-table-wrap {
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.admin-event-log-modal .admin-event-table-footer {
  border-top: 1px solid var(--border);
  padding: 0.8rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .admin-orders-workspace-tabs button,
  .admin-orders-event-log-button {
    transition: none;
  }
}

.admin-event-log-actions {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}

.admin-icon-button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 24px var(--shadow);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-icon-button:hover {
  border-color: var(--muted);
  background: var(--surface-soft);
  color: var(--text);
  transform: translateY(-1px);
}

.admin-icon-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-icon-button .ph-bold {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.admin-icon-button svg {
  display: block;
  width: 1.56rem;
  height: 1.56rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-event-log-list {
  display: grid;
  gap: 0.65rem;
  max-height: 32rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.admin-event-log-list > p {
  margin: 0;
  color: var(--muted);
}

.admin-event-log-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-event-log-item[data-severity="success"] {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
}

.admin-event-log-item[data-severity="warning"] {
  border-color: color-mix(in srgb, var(--stale) 42%, var(--border));
  background: color-mix(in srgb, var(--stale) 7%, var(--card));
}

.admin-event-log-item[data-severity="error"] {
  border-color: color-mix(in srgb, var(--degraded) 42%, var(--border));
  background: color-mix(in srgb, var(--degraded) 7%, var(--card));
}

.admin-event-log-marker {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 0.22rem var(--primary-soft);
}

.admin-event-log-item[data-severity="success"] .admin-event-log-marker {
  background: var(--good);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--good) 16%, transparent);
}

.admin-event-log-item[data-severity="warning"] .admin-event-log-marker {
  background: var(--stale);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--stale) 18%, transparent);
}

.admin-event-log-item[data-severity="error"] .admin-event-log-marker {
  background: var(--degraded);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--degraded) 18%, transparent);
}

.admin-event-log-content {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

.admin-event-log-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.admin-event-log-heading strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-event-log-heading span {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-event-log-item p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-event-log-item small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-manual-event-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.admin-manual-event-summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.82rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.admin-manual-event-summary::-webkit-details-marker {
  display: none;
}

.admin-manual-event-summary::marker {
  content: "";
}

.admin-manual-event-summary > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.admin-manual-event-summary h3,
.admin-manual-event-summary p {
  margin: 0;
}

.admin-manual-event-summary h3 {
  font-size: 1.05rem;
}

.admin-manual-event-summary p {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.32;
}

.admin-manual-event-summary > span {
  display: inline-flex;
  gap: 0.38rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-manual-event-card[open] .admin-manual-event-summary > span {
  color: var(--text);
}

.admin-manual-event-card[open] .admin-manual-event-summary > span > span {
  display: none;
}

.admin-manual-event-card[open] .admin-manual-event-summary > span::after {
  content: "Hide";
  font-size: 0.78rem;
}

.admin-manual-event-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-soft) 52%, transparent),
      transparent 6rem
    );
}

.admin-manual-event-form,
.admin-manual-event-review {
  display: grid;
  gap: 0.85rem;
}

.admin-manual-event-review[hidden] {
  display: none;
}

.admin-manual-event-form {
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.45fr) auto;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 74%, var(--surface-soft));
}

.admin-manual-event-intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.admin-manual-event-review {
  max-width: 52rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

.admin-manual-event-form label,
.admin-manual-event-review label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-manual-event-form input,
.admin-manual-event-form select,
.admin-manual-event-review input,
.admin-manual-event-review select,
.admin-manual-event-review textarea {
  width: 100%;
  min-height: 2.3rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.admin-manual-event-form input,
.admin-manual-event-form select,
.admin-manual-event-review input,
.admin-manual-event-review select {
  padding: 0 0.7rem;
}

.admin-manual-event-review textarea {
  min-height: 7rem;
  padding: 0.7rem;
  line-height: 1.4;
  resize: vertical;
}

.admin-manual-event-form select,
.admin-manual-event-review select {
  appearance: none;
  padding-right: 2rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 0.9rem) 50% / 0.4rem 0.4rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.64rem) 50% / 0.4rem 0.4rem no-repeat,
    var(--card);
}

.admin-manual-event-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-manual-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-start;
}

.admin-manual-event-form button,
.admin-manual-event-actions button {
  gap: 0.42rem;
}

.admin-congress-event-form {
  max-width: none;
}

.admin-congress-observance-directory {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.admin-congress-observance-directory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-congress-observance-directory-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.admin-congress-observance-directory-heading p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.admin-congress-observance-list {
  display: grid;
  gap: 0.42rem;
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.admin-congress-observance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, var(--card));
  color: var(--text);
  padding: 0.62rem 0.72rem;
  text-align: left;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.admin-congress-observance-row:hover,
.admin-congress-observance-row:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.admin-congress-observance-row:active {
  transform: translateY(1px);
}

.admin-congress-observance-row[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.admin-congress-observance-details {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.admin-congress-observance-details strong,
.admin-congress-observance-details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-congress-observance-details strong {
  font-size: 0.88rem;
}

.admin-congress-observance-details small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.admin-congress-observance-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}

.admin-congress-observance-row-actions > i.ph-bold {
  color: var(--primary);
  font-size: 1rem;
}

.admin-congress-observance-empty {
  margin: 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  padding: 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.admin-congress-event-form label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.admin-manual-event-review .admin-congress-event-confirmation {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

.admin-manual-event-review .admin-manual-event-ai-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

.admin-manual-event-review .admin-manual-event-ai-summary input {
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: var(--primary);
}

.admin-manual-event-review .admin-congress-event-confirmation input {
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: var(--primary);
}

.admin-congress-event-preview {
  min-height: 2.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  color: var(--muted);
  padding: 0.65rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.4;
}

.admin-social-section {
  display: grid;
  min-width: 0;
  gap: 0.95rem;
}

.admin-social-section > .section-heading {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-social-section > .section-heading > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.admin-social-section h3 {
  margin: 0;
}

.admin-social-section > .section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-social-form {
  max-width: none;
  gap: 0.8rem;
}

.admin-social-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.admin-social-publish-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.8rem;
}

.admin-social-platform-panel {
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-social-platforms {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-social-platforms legend {
  width: 100%;
  margin: 0 0 0.15rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-social-platforms label {
  position: relative;
  cursor: pointer;
}

.admin-social-platforms input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-social-platforms label > span {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-social-platforms input:checked + span {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-social-platforms input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-social-platforms label:hover > span {
  transform: translateY(-1px);
}

.admin-social-post-setup {
  grid-template-columns: repeat(2, minmax(0, 18rem));
}

.admin-social-platform-tab-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-social-platform-tab-groups > div {
  display: grid;
  gap: 0.35rem;
}

.admin-social-platform-tab-groups > div > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.admin-social-platform-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--shadow) 45%, transparent);
}

.admin-social-platform-tabs button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-social-platform-tabs button i {
  font-size: 1rem;
}

.admin-social-platform-tabs button:not(:disabled):hover {
  background: color-mix(in srgb, var(--card) 76%, var(--primary-soft));
  color: var(--text);
}

.admin-social-platform-tabs button:focus-visible {
  z-index: 1;
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-social-platform-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}

.admin-social-platform-tabs button:disabled {
  border-color: transparent;
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.42;
}

.admin-social-draft-panel {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 92%, var(--surface-soft));
}

.admin-social-draft-panel[hidden] {
  display: none;
}

.admin-social-draft-panel > label:not(.admin-social-text-field) {
  display: grid;
  max-width: 28rem;
  gap: 0.35rem;
}

.admin-social-draft-image {
  width: min(100%, 28rem);
  max-height: 24rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(45deg, var(--surface-soft) 25%, transparent 25%) 0 0 / 1rem 1rem,
    linear-gradient(-45deg, var(--surface-soft) 25%, transparent 25%) 0 0 / 1rem 1rem,
    linear-gradient(45deg, transparent 75%, var(--surface-soft) 75%) 0 0 / 1rem 1rem,
    linear-gradient(-45deg, transparent 75%, var(--surface-soft) 75%) 0 0 / 1rem 1rem,
    var(--card);
  object-fit: contain;
}

.admin-social-thread-replies {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-social-thread-replies-heading,
.admin-social-thread-reply-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-social-thread-replies-heading > div {
  display: grid;
  gap: 0.14rem;
}

.admin-social-thread-replies-heading strong,
.admin-social-thread-reply-heading > strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-social-thread-replies-heading span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-social-thread-replies-heading > button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0 0.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius: 7px;
  background: var(--card);
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-social-thread-replies-heading > button:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.admin-social-thread-replies-heading > button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-social-thread-replies-heading > button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-social-thread-reply-list {
  display: grid;
  gap: 0.6rem;
}

.admin-social-thread-reply {
  display: grid;
  grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--card));
}

.admin-social-thread-reply-heading {
  grid-column: 1 / -1;
}

.admin-social-thread-reply-actions {
  display: flex;
  gap: 0.2rem;
}

.admin-social-thread-reply-actions .admin-icon-button {
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 6px;
}

.admin-social-thread-reply-actions .admin-icon-button:last-child {
  color: var(--degraded);
}

.admin-social-thread-reply > label {
  align-content: start;
}

.admin-social-thread-reply .admin-social-text-field textarea {
  min-height: 7rem;
}

.admin-social-thread-reply-empty {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  text-align: center;
}

.admin-social-thread-replies[data-disabled="true"] {
  opacity: 0.55;
}

.admin-social-draft-panel[data-disabled="true"] {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .admin-social-platform-tabs button,
  .admin-social-thread-replies-heading > button {
    transition: none;
  }

  .admin-social-thread-replies-heading > button:hover:not(:disabled) {
    transform: none;
  }
}

.admin-social-history-platforms {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  isolation: isolate;
  outline: none;
}

.admin-social-history-platforms::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  max-width: min(18rem, 70vw);
  padding: 0.38rem 0.55rem;
  border-radius: 6px;
  background: var(--text);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 82%, transparent);
  color: var(--card);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 0.2rem);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  white-space: nowrap;
}

.admin-social-history-platforms:hover::after,
.admin-social-history-platforms:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.admin-social-history-platforms:focus-visible {
  border-radius: 999px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-social-controls label[data-disabled="true"] {
  opacity: 0.5;
}

.admin-social-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.65rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-social-controls label[hidden] {
  display: none;
}

.admin-social-form select,
.admin-social-form textarea {
  border-color: color-mix(in srgb, var(--text) 16%, var(--border));
  background-color: var(--card);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.admin-social-form select {
  min-height: 2.35rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 1rem) 50% / 0.42rem 0.42rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.72rem) 50% / 0.42rem 0.42rem no-repeat,
    var(--card);
}

.admin-social-text-field > span {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.admin-social-text-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  justify-content: flex-end;
}

.admin-social-text-field small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.admin-social-text-field small[data-warning="true"] {
  color: var(--stale);
}

.admin-social-text-field small[data-error="true"] {
  color: var(--degraded);
}

.admin-social-form textarea {
  min-height: 12rem;
  padding: 0.85rem;
  font-weight: 550;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.admin-social-form select:focus-visible,
.admin-social-form textarea:focus-visible {
  border-color: var(--primary);
  outline: 0;
  box-shadow:
    0 0 0 0.2rem var(--primary-soft),
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.admin-social-form .admin-manual-event-actions {
  justify-content: flex-end;
  padding-top: 0.15rem;
}

.admin-social-form .admin-manual-event-actions button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}

.admin-social-form .admin-manual-event-actions button:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: var(--primary-text);
}

.admin-social-form .admin-manual-event-actions #adminManualSocialPreviewButton {
  gap: 0.42rem;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.admin-social-form .admin-manual-event-actions #adminManualSocialPreviewButton:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-social-form .admin-manual-event-actions button:disabled {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--muted);
  box-shadow: none;
}

.admin-social-history-modal {
  width: min(72rem, calc(100vw - 2rem));
  height: min(48rem, calc(100vh - 2rem));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.admin-social-history-modal .admin-social-history-controls {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 1rem 1.25rem;
}

.admin-social-history-modal .admin-social-history-table-wrap {
  min-height: 0;
  margin: 1rem 1.25rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.admin-social-history-footer {
  justify-content: flex-end;
}

.admin-social-history-table {
  min-width: 64rem;
}

.admin-social-history-table th:nth-child(1),
.admin-social-history-table td:nth-child(1) {
  width: 12rem;
}

.admin-social-history-table th:nth-child(2),
.admin-social-history-table td:nth-child(2) {
  width: 8rem;
}

.admin-social-history-table th:nth-child(3),
.admin-social-history-table td:nth-child(3) {
  width: 19rem;
}

.admin-social-history-table th:nth-child(4),
.admin-social-history-table td:nth-child(4) {
  width: 7rem;
}

.admin-social-history-table th:nth-child(5),
.admin-social-history-table td:nth-child(5) {
  width: 10rem;
}

.admin-social-history-table th:nth-child(6),
.admin-social-history-table td:nth-child(6) {
  width: 11rem;
}

.admin-social-history-primary {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.admin-social-history-primary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-social-history-primary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.admin-social-history-status,
.admin-social-history-platform {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-social-history-status[data-status="success"] {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: var(--good);
}

.admin-social-history-status[data-status="failed"] {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 9%, var(--card));
  color: var(--degraded);
}

.admin-social-history-platform {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  justify-content: center;
  border-color: var(--card);
  background: var(--surface-soft);
  color: var(--text);
  padding: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 82%, transparent);
}

.admin-social-history-platform + .admin-social-history-platform,
.admin-social-history-platform-overflow {
  margin-left: -0.42rem;
}

.admin-social-history-platform i {
  color: var(--text);
  font-size: 1rem;
}

.admin-social-history-platform-overflow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--text);
  color: var(--card);
  font-size: 0.65rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .admin-social-history-platforms::after {
    transition: none;
  }
}

.admin-social-history-result {
  display: inline-flex;
  gap: 0.35rem;
  min-height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0 0.65rem;
  user-select: none;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.admin-social-history-result:hover,
.admin-social-history-result:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-social-history-result:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-social-history-popover {
  position: fixed;
  z-index: 120;
  display: grid;
  width: min(32rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 1.5rem));
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--shadow) 85%, transparent);
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.admin-social-history-popover[data-state="open"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.admin-social-history-popover[data-state="closing"] {
  opacity: 0;
  transform: translateY(4px) scale(0.985);
}

.admin-social-history-popover-header,
.admin-raw-body-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 0.75rem;
}

.admin-social-history-popover-header {
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.admin-social-history-raw-switcher {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.68rem 0.72rem 0;
}

.admin-social-history-raw-switcher button {
  display: inline-flex;
  min-height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0 0.72rem;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.admin-social-history-raw-switcher button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-social-history-raw-switcher button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-social-history-raw-switcher button:not(:disabled):hover,
.admin-social-history-raw-switcher button:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-social-history-raw-switcher button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-social-history-popover-header strong,
.admin-raw-body-header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-social-history-popover-header .admin-icon-button {
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
}

.admin-raw-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--card));
}

.admin-social-history-popover > .admin-raw-body {
  border: 0;
  border-radius: 0;
  overscroll-behavior: contain;
}

.admin-raw-body-header {
  padding: 0.62rem 0.72rem;
  border-bottom: 1px solid var(--border);
}

.admin-raw-body pre {
  min-height: 0;
  max-height: 17rem;
  overflow: auto;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 650 0.72rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
  padding: 0.72rem;
  white-space: pre-wrap;
  -webkit-overflow-scrolling: touch;
}

.admin-social-history-popover .admin-raw-body pre {
  max-height: 20rem;
  overscroll-behavior: contain;
}

.admin-raw-copy-button {
  display: inline-flex;
  min-height: 1.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0 0.58rem;
  white-space: nowrap;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.admin-raw-copy-button:hover,
.admin-raw-copy-button:focus-visible {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: var(--good);
}

.admin-raw-copy-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-raw-copy-button > * {
  color: inherit;
}

.admin-social-history-confirmed {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-subscriptions-card,
.admin-emails-card {
  display: grid;
  gap: 0.85rem;
}

.admin-subscriptions-card > .section-heading,
.admin-emails-card > .section-heading {
  align-items: start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
}

.admin-subscriptions-card > .section-heading .admin-actions button,
.admin-emails-card > .section-heading .admin-actions button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-inline: 0.72rem;
}

.admin-subscription-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-email-delivery-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-subscription-summary.admin-email-delivery-summary article:nth-child(3),
.admin-subscription-summary.admin-email-delivery-summary article:nth-child(4) {
  --admin-summary-accent: var(--primary);
}

.admin-subscription-summary.admin-email-delivery-summary article:nth-child(5) {
  --admin-summary-accent: var(--degraded);
}

.admin-email-delivery-table td:first-child {
  display: grid;
  gap: 0.22rem;
  min-width: 15rem;
}

.admin-email-delivery-table td:first-child small {
  color: var(--muted);
  text-transform: capitalize;
}

.admin-email-delivery-status {
  display: inline-flex;
  min-height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.65rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-email-delivery-status[data-status="sent"],
.admin-email-delivery-status[data-status="opened"],
.admin-email-delivery-status[data-status="clicked"] {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--primary);
}

.admin-email-delivery-status[data-status="delivered"] {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: var(--good);
}

.admin-email-delivery-status[data-status="delivery_delayed"] {
  border-color: color-mix(in srgb, var(--stale) 34%, var(--border));
  background: color-mix(in srgb, var(--stale) 9%, var(--card));
  color: var(--stale);
}

.admin-email-delivery-status[data-status="bounced"],
.admin-email-delivery-status[data-status="complained"],
.admin-email-delivery-status[data-status="failed"],
.admin-email-delivery-status[data-status="suppressed"] {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 9%, var(--card));
  color: var(--degraded);
}

.admin-subscription-summary article {
  --admin-summary-accent: var(--primary);
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-subscription-summary article:nth-child(2) {
  --admin-summary-accent: var(--good);
}

.admin-subscription-summary article:nth-child(3) {
  --admin-summary-accent: var(--stale);
}

.admin-subscription-summary article > span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.admin-subscription-summary article > span::before {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-summary-accent);
  box-shadow: 0 0 0 0.2rem color-mix(
    in srgb,
    var(--admin-summary-accent) 13%,
    transparent
  );
  content: "";
}

.admin-subscription-summary span,
.admin-subscription-filters label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-subscription-summary strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.admin-subscription-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.admin-subscription-filters {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(11rem, 0.35fr));
  gap: 0.75rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-subscription-filters label {
  display: grid;
  gap: 0.35rem;
}

.admin-subscription-filters input,
.admin-subscription-filters select {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
}

.admin-subscription-filters input {
  padding: 0 0.7rem;
}

.admin-subscription-filters select {
  appearance: none;
  padding: 0 2rem 0 0.7rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 0.9rem) 50% / 0.4rem 0.4rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.64rem) 50% / 0.4rem 0.4rem no-repeat,
    var(--card);
}

.admin-subscription-list {
  display: grid;
  gap: 0.65rem;
}

.admin-subscription-list > p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.admin-subscription-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--card));
}

.admin-subscription-item[data-channel="browser"] {
  border-left: 4px solid var(--primary);
}

.admin-subscription-item[data-channel="email"] {
  border-left: 4px solid var(--good);
}

.admin-subscription-item[data-channel="sms"] {
  border-left: 4px solid var(--stale);
}

.admin-subscription-body {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

.admin-subscription-heading {
  display: flex;
  min-width: 0;
  gap: 0.55rem;
  align-items: center;
}

.admin-subscription-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-subscription-heading span {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 76%, var(--surface-soft));
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-subscription-item p,
.admin-subscription-item small {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-subscription-item p {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-subscription-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-subscription-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-subscription-actions button {
  gap: 0.4rem;
}

.admin-modal-backdrop {
  position: fixed;
  z-index: 119;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.38);
  cursor: pointer;
  animation: admin-modal-backdrop-in 180ms ease-out;
}

.mast-confirm-backdrop {
  position: fixed;
  z-index: 10020;
  inset: 0;
  background: color-mix(in srgb, #020617 52%, transparent);
  backdrop-filter: blur(3px);
  animation: admin-modal-backdrop-in 140ms ease-out;
}

html[data-confirm-open="true"] {
  overflow: hidden;
}

.mast-confirm-backdrop[hidden],
.mast-confirm-modal[hidden] {
  display: none;
}

.mast-confirm-modal {
  position: fixed;
  z-index: 10021;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(30rem, calc(100vw - 2rem));
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  padding: 1.1rem;
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--shadow) 72%, transparent);
  transform: translate(-50%, -50%);
  animation: mast-confirm-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mast-confirm-modal > i {
  color: var(--primary);
  font-size: 1.65rem;
}

.mast-confirm-modal[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--degraded) 38%, var(--border));
}

.mast-confirm-modal[data-tone="danger"] > i {
  color: var(--degraded);
}

.mast-confirm-copy {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.mast-confirm-copy > strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
}

.mast-confirm-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-line;
}

.mast-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.mast-confirm-actions button {
  min-height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.mast-confirm-actions button:last-child {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.mast-confirm-modal[data-tone="danger"] .mast-confirm-actions button:last-child {
  border-color: var(--degraded);
  background: var(--degraded);
}

.mast-confirm-actions button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@keyframes mast-confirm-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mast-confirm-backdrop,
  .mast-confirm-modal {
    animation: none;
  }
}

html[data-theme="dark"] .admin-modal-backdrop {
  background: rgba(2, 6, 23, 0.64);
}

.admin-modal-backdrop[hidden] {
  display: none;
}

.admin-event-modal {
  position: fixed;
  z-index: 120;
  inset: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: min(78rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
  animation: admin-modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-event-modal[hidden] {
  display: none;
}

.admin-event-modal[data-state="closing"] {
  animation: admin-modal-out 160ms ease-in forwards;
}

.admin-pipeline-justification-modal {
  width: min(38rem, calc(100vw - 2rem));
  height: max-content;
  grid-template-rows: auto auto;
}

.admin-pipeline-justification-modal form {
  display: grid;
}

.admin-pipeline-justification-body {
  display: grid;
  gap: 0.55rem;
  padding: 1.25rem;
}

.admin-pipeline-justification-body label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-pipeline-justification-input-wrap {
  position: relative;
}

.admin-pipeline-justification-body textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  padding: 0.85rem 3.5rem 0.85rem 0.85rem;
}

.admin-pipeline-justification-body textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-pipeline-justification-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.admin-ai-polish-button {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color 140ms ease, transform 140ms ease;
}

.admin-ai-polish-button i {
  background: linear-gradient(135deg, #f97316, #db2777 52%, #7c3aed);
  background-clip: text;
  color: transparent;
  font-size: 1.25rem;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-ai-polish-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.admin-ai-polish-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-ai-polish-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.admin-pipeline-justification-tools > span,
.admin-pipeline-justification-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-pipeline-justification-status {
  min-height: 1.2em;
  margin: 0;
}

.admin-pipeline-justification-modal .admin-event-modal-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: flex-end;
}

.admin-pipeline-justification-modal .admin-event-modal-footer button {
  min-height: 2.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0 1rem;
}

.admin-pipeline-justification-modal .admin-event-modal-footer .admin-danger-button {
  border-color: var(--degraded);
  background: var(--degraded);
  color: #fff;
}

.admin-pipeline-justification-modal .admin-event-modal-footer .admin-danger-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 78%, #000);
  background: color-mix(in srgb, var(--degraded) 78%, #000);
  color: #fff;
}

.admin-modal-backdrop[data-state="closing"] {
  animation: admin-modal-backdrop-out 160ms ease-in forwards;
}

.admin-event-modal-header,
.admin-event-modal-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.25rem;
}

.admin-event-modal-header strong {
  display: block;
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 900;
}

.admin-event-modal-header p,
.admin-event-modal-footer span {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-event-modal-header button,
.admin-event-load-more {
  min-height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 0 0.95rem;
}

.admin-event-modal-header button:hover,
.admin-event-load-more:hover:not(:disabled) {
  border-color: var(--muted);
  background: var(--surface-soft);
  color: var(--text);
}

.admin-event-load-more:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-event-modal-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(10rem, 1fr));
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}

.admin-event-table-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(10rem, 1fr));
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--card));
}

.admin-event-modal-controls label,
.admin-event-table-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-event-modal-controls input,
.admin-event-modal-controls select,
.admin-event-table-controls input,
.admin-event-table-controls select {
  width: 100%;
  min-height: 2.38rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 0.75rem;
  text-transform: none;
}

.admin-event-modal-controls select,
.admin-event-table-controls select {
  padding-right: 2.35rem;
}

.admin-event-modal-controls input:focus,
.admin-event-modal-controls select:focus,
.admin-event-table-controls input:focus,
.admin-event-table-controls select:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-event-table-wrap {
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 44%, var(--card));
}

.admin-event-table {
  width: 100%;
  min-width: 60rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.admin-event-table th,
.admin-event-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  padding: 0.8rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.admin-event-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-event-table td {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

.admin-event-table td:nth-child(1),
.admin-event-table td:nth-child(6) {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-event-table td:nth-child(3) {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-event-table th:nth-child(1),
.admin-event-table td:nth-child(1) {
  width: 10rem;
}

.admin-event-table th:nth-child(2),
.admin-event-table td:nth-child(2) {
  width: 8.5rem;
}

.admin-event-table th:nth-child(3),
.admin-event-table td:nth-child(3) {
  width: 6.5rem;
}

.admin-event-table th:nth-child(4),
.admin-event-table td:nth-child(4) {
  width: 8rem;
}

.admin-event-table th:nth-child(5),
.admin-event-table td:nth-child(5) {
  width: 13rem;
}

.admin-event-table th:nth-child(6),
.admin-event-table td:nth-child(6) {
  width: 11rem;
}

.admin-event-table th:nth-child(7),
.admin-event-table td:nth-child(7) {
  width: 6rem;
}

.admin-event-table-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-api-request-modal {
  width: min(64rem, calc(100vw - 2rem));
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-api-request-path {
  overflow-wrap: anywhere;
}

.admin-api-request-agent {
  display: block;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dev-email-modal {
  width: min(38rem, calc(100vw - 2rem));
  height: auto;
  min-height: 0;
  max-height: min(36rem, calc(100vh - 2rem));
  grid-template-rows: auto;
}

.admin-dev-email-modal form {
  display: grid;
  min-height: 0;
  height: auto;
  max-height: inherit;
  grid-template-rows: auto auto auto;
  overflow: hidden;
}

.admin-dev-email-modal .admin-event-modal-header,
.admin-dev-email-modal .admin-event-modal-footer {
  padding: 1rem 1.1rem;
}

.admin-dev-email-fields {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem 1.15rem;
}

.admin-dev-email-fields label {
  display: grid;
  gap: 0.45rem;
}

.admin-dev-email-fields label > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-email-fields input,
.admin-dev-email-fields textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.72rem 0.8rem;
  text-transform: none;
}

.admin-dev-email-fields input::placeholder,
.admin-dev-email-fields textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.admin-dev-email-fields input {
  min-height: 2.7rem;
}

.admin-dev-email-fields textarea {
  min-height: 11rem;
  max-height: 36vh;
  line-height: 1.5;
  resize: vertical;
  padding-right: 3.5rem;
}

.admin-dev-email-fields .admin-pipeline-justification-input-wrap {
  display: block;
}

.admin-dev-email-fields input:focus,
.admin-dev-email-fields textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-dev-email-modal .admin-event-modal-footer button {
  min-height: 2.45rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0 1.05rem;
}

.admin-dev-email-modal .admin-event-modal-footer button:hover:not(:disabled) {
  background: var(--primary-strong);
}

.admin-dev-email-modal .admin-event-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.admin-dev-settings-modal {
  width: min(46rem, calc(100vw - 2rem));
  height: auto;
  min-height: 0;
  max-height: min(44rem, calc(100vh - 2rem));
  grid-template-rows: auto;
}

.admin-dev-limit-drawer {
  width: min(32rem, 100vw);
  grid-template-rows: minmax(0, 1fr);
}

.admin-dev-limit-drawer form {
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-dev-limit-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 1fr);
  gap: 0.85rem;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem;
  -webkit-overflow-scrolling: touch;
}

.admin-dev-limit-usage {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 0.85rem;
}

.admin-dev-limit-usage-ring {
  --progress-ring-size: 4.5rem;
  --progress-ring-thickness: 7;
}

.admin-dev-limit-usage-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.admin-dev-limit-usage-copy span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-limit-usage-copy strong {
  color: var(--text);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.admin-dev-limit-body label {
  display: grid;
  gap: 0.4rem;
}

.admin-dev-limit-body label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-limit-body input,
.admin-dev-limit-body select {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  padding: 0.65rem 0.75rem;
}

.admin-dev-limit-body input:focus,
.admin-dev-limit-body select:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-dev-limit-body p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-dev-limit-justification {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.45rem;
}

.admin-dev-limit-justification > label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-dev-limit-justification textarea {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  padding: 0.85rem 3.5rem 0.85rem 0.85rem;
}

.admin-dev-limit-justification textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-dev-limit-justification > p {
  min-height: 1.1rem;
}

.admin-dev-limit-drawer .admin-event-modal-footer button {
  min-height: 2.45rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0 1.05rem;
}

.admin-dev-limit-drawer .admin-event-modal-footer button:hover:not(:disabled) {
  background: var(--primary-strong);
}

.admin-dev-limit-drawer .admin-event-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 560px) {
  .admin-dev-limit-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-dev-settings-modal form {
  display: grid;
  min-height: 0;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-dev-settings-body {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem 1.15rem;
}

.admin-dev-settings-reset {
  display: grid;
  grid-template-columns: minmax(7rem, 0.55fr) minmax(8rem, 0.7fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 0.85rem;
}

.admin-dev-settings-reset label,
.admin-dev-settings-tier-row label {
  display: grid;
  gap: 0.4rem;
}

.admin-dev-settings-reset label > span,
.admin-dev-settings-tier-row label > span,
.admin-dev-settings-tier-heading > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-settings-reset p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.admin-dev-settings-reset input,
.admin-dev-settings-tier-row input {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.68rem 0.75rem;
}

.admin-dev-settings-reset input:focus,
.admin-dev-settings-tier-row input:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-dev-settings-tier-heading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.admin-dev-settings-tier-heading button {
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 0.4rem;
  padding: 0 0.8rem;
  display: inline-flex;
  align-items: center;
}

.admin-dev-settings-tier-heading button:hover {
  border-color: var(--primary);
  background: var(--surface-soft);
}

.admin-dev-settings-tier-list {
  display: grid;
  gap: 0.65rem;
}

.admin-dev-settings-tier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem) 2.65rem;
  gap: 0.65rem;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 0.72rem;
}

.admin-dev-settings-remove-tier {
  width: 2.65rem;
  min-height: 2.65rem;
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 7%, var(--card));
  color: var(--danger);
  cursor: pointer;
  font: inherit;
}

.admin-dev-settings-remove-tier:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 13%, var(--card));
}

.admin-dev-settings-remove-tier:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.admin-dev-settings-modal .admin-event-modal-footer button {
  min-height: 2.45rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0 1.05rem;
}

.admin-dev-settings-modal .admin-event-modal-footer button:hover:not(:disabled) {
  background: var(--primary-strong);
}

.admin-dev-settings-modal .admin-event-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.admin-social-settings-modal {
  width: min(48rem, calc(100vw - 2rem));
  height: auto;
  min-height: 0;
  max-height: min(44rem, calc(100vh - 2rem));
  grid-template-rows: auto;
}

.admin-social-image-generator-modal {
  width: min(76rem, calc(100vw - 2rem));
  height: min(52rem, calc(100vh - 2rem));
  grid-template-rows: auto;
}

.admin-social-image-generator-modal form {
  display: grid;
  width: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-social-image-generator-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(19rem, 0.86fr) minmax(22rem, 1.14fr);
  gap: 1rem;
  overflow: auto;
  padding: 1rem 1.1rem 1.2rem;
}

.admin-social-image-generator-fields,
.admin-social-image-generator-preview {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-social-image-generator-section-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-social-image-generator-section-heading > div {
  display: grid;
  gap: 0.18rem;
}

.admin-social-image-generator-section-heading strong {
  font-size: 0.92rem;
  font-weight: 950;
}

.admin-social-image-generator-section-heading span,
.admin-social-image-generator-fields label,
.admin-social-image-generator-options legend {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
}

.admin-social-image-generator-fields label {
  display: grid;
  gap: 0.4rem;
}

.admin-social-image-generator-fields textarea,
.admin-social-image-generator-fields input[type="text"],
.admin-social-image-generator-fields select {
  width: 100%;
  min-height: 2.6rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.65rem 0.75rem;
}

.admin-social-image-generator-fields textarea {
  resize: vertical;
}

.admin-social-image-generator-fields :is(textarea, input, select):focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-social-image-generator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-social-image-generator-options {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.admin-social-image-generator-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.admin-social-image-generator-options input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.admin-social-image-overlay-controls {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 3%, var(--card));
}

.admin-social-image-overlay-controls legend {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0 0.3rem;
}

.admin-social-image-overlay-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.5rem !important;
  color: var(--text) !important;
}

.admin-social-image-overlay-toggle input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.admin-social-image-overlay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
#adminSocialImageOverlayStatusText { color: var(--muted); font-size: 0.68rem; font-weight: 750; line-height: 1.4; }

.admin-social-image-preview-switch {
  display: inline-flex;
  width: fit-content;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.admin-social-image-preview-switch[hidden] { display: none; }
.admin-social-image-preview-switch button {
  min-height: 1.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0 0.7rem;
}
.admin-social-image-preview-switch button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgb(15 23 42 / 0.12); }
.admin-social-image-generator-canvas[data-composing="true"] { opacity: 0.72; transition: opacity 120ms ease; }

.admin-social-image-generator-canvas {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 2;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent), var(--card);
}

.admin-social-image-generator-canvas[data-composition="square"] { aspect-ratio: 1; }
.admin-social-image-generator-canvas[data-composition="portrait"] { width: min(70%, 25rem); aspect-ratio: 2 / 3; justify-self: center; }

.admin-social-image-generator-canvas > div {
  display: grid;
  max-width: 22rem;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.5rem;
  color: var(--muted);
  text-align: center;
}

.admin-social-image-generator-canvas > div[hidden] {
  display: none;
}

.admin-social-image-generator-canvas > div i { font-size: 2.4rem; color: color-mix(in srgb, var(--primary) 62%, var(--muted)); }
.admin-social-image-generator-canvas > div strong { color: var(--text); }
.admin-social-image-generator-canvas > div span { font-size: 0.76rem; line-height: 1.45; }
.admin-social-image-generator-canvas img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-social-image-generator-canvas img[hidden] { display: none; }

.admin-social-image-generator-canvas[data-loading="true"]::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, var(--primary) 16%, transparent) 45%, transparent 65%);
  background-size: 220% 100%;
  animation: admin-social-image-loading 1.3s linear infinite;
}

@keyframes admin-social-image-loading { to { background-position: -220% 0; } }

.admin-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid color-mix(in srgb, #c026d3 30%, var(--border));
  border-radius: 999px;
  background: linear-gradient(120deg, color-mix(in srgb, #f97316 12%, var(--card)), color-mix(in srgb, #c026d3 12%, var(--card)));
  color: color-mix(in srgb, #c026d3 72%, var(--text));
  font-size: 0.65rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-social-image-generator-prompt { border-top: 1px solid var(--border); padding-top: 0.7rem; }
.admin-social-image-generator-prompt summary { cursor: pointer; color: var(--muted); font-size: 0.72rem; font-weight: 850; }
.admin-social-image-generator-prompt pre { max-height: 10rem; overflow: auto; white-space: pre-wrap; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }

.admin-social-image-generator-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-social-image-generator-result-actions button,
.admin-social-image-generator-modal .admin-event-modal-footer button {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0 0.9rem;
}

.admin-social-image-generator-modal .admin-event-modal-footer button {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-social-image-generator-modal .admin-event-modal-footer button:hover:not(:disabled) {
  color: #fff;
}

.admin-social-image-generator-result-actions button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.admin-social-image-generator-result-actions button:disabled,
.admin-social-image-generator-modal .admin-event-modal-footer button:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 820px) {
  .admin-social-image-generator-body { grid-template-columns: minmax(0, 1fr); }
  .admin-social-image-generator-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-social-image-overlay-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-social-image-generator-canvas[data-loading="true"]::after { animation: none; }
}

.admin-social-settings-modal form {
  display: grid;
  min-height: 0;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-social-settings-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.1rem 1.15rem;
}

.admin-social-image-upload {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.admin-social-image-upload-copy {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.admin-social-image-upload-copy > i {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.5rem;
}

.admin-social-image-upload-copy > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.admin-social-image-upload-copy strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 950;
}

.admin-social-image-upload-copy span,
.admin-social-image-upload-preview span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.35;
}

.admin-social-image-upload-workspace {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(12rem, 0.72fr);
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-social-image-upload-actions {
  display: grid;
  align-content: center;
  gap: 0.5rem;
  min-width: 0;
}

.admin-social-image-upload-actions small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.admin-social-image-file-control {
  position: relative;
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.admin-social-image-file-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.admin-social-image-file-control:hover,
.admin-social-image-file-control:focus-within {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  color: var(--primary);
  transform: translateY(-1px);
}

.admin-social-image-file-control:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#adminSocialImageUploadButton {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.85rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

#adminSocialImageUploadButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-social-image-upload-preview {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.admin-social-image-upload-preview img,
.admin-social-image-upload-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1.91 / 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
}

.admin-social-image-upload-preview img {
  object-fit: cover;
}

.admin-social-image-upload-preview img[hidden],
.admin-social-image-upload-placeholder[hidden] {
  display: none;
}

.admin-social-image-upload-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  color: color-mix(in srgb, var(--muted) 74%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 58%),
    var(--card);
}

.admin-social-image-upload-placeholder > i {
  font-size: 1.8rem;
}

.admin-social-image-upload-placeholder > span {
  color: inherit;
  font-size: 0.68rem;
  font-weight: 850;
}

.admin-social-image-upload-preview > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .admin-social-image-file-control {
    transition: none;
  }

  .admin-social-image-file-control:hover,
  .admin-social-image-file-control:focus-within {
    transform: none;
  }
}

.admin-social-image-library {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: var(--card);
}

.admin-social-image-library-heading,
.admin-social-image-library-heading > div,
.admin-social-image-library-card-heading,
.admin-social-image-library-badges,
.admin-social-image-library-actions {
  display: flex;
  align-items: center;
}

.admin-social-image-library-heading {
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-social-image-library-heading > div {
  min-width: 0;
  gap: 0.65rem;
}

.admin-social-image-library-heading > div > i {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.5rem;
}

.admin-social-image-library-heading > div > div,
.admin-social-image-library-card-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.admin-social-image-library-heading strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.admin-social-image-library-heading span,
.admin-social-image-library-card-heading > span,
.admin-social-image-library-empty span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.admin-social-image-library-heading .admin-count-badge {
  display: inline-grid;
  min-width: 1.8rem;
  min-height: 1.55rem;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-social-image-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  min-width: 0;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-social-image-library-card {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.82fr) minmax(0, 1.18fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--card));
}

.admin-social-image-library-card > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 9.5rem;
  border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  object-fit: cover;
}

.admin-social-image-library-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
}

.admin-social-image-library-card-heading > strong {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.3;
}

.admin-social-image-library-card-heading > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-social-image-library-badges {
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.admin-social-image-library-badges span {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.42rem;
  border: 1px solid color-mix(in srgb, var(--good) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--good) 8%, var(--card));
  color: var(--good);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
}

.admin-social-image-library-badges span.is-available {
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background: var(--card);
  color: var(--muted);
}

.admin-social-image-library-actions {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-social-image-library-actions button {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0 0.52rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    opacity 150ms ease;
}

.admin-social-image-library-actions button:hover:not(:disabled),
.admin-social-image-library-actions button:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
  transform: translateY(-1px);
}

.admin-social-image-library-actions button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--primary);
}

.admin-social-image-library-actions .admin-social-image-library-delete {
  margin-left: auto;
  color: var(--degraded);
}

.admin-social-image-library-actions .admin-social-image-library-delete.is-confirming {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 10%, var(--card));
}

.admin-social-image-library-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.admin-social-image-library-empty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 8rem;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  color: var(--muted);
  text-align: center;
}

.admin-social-image-library-empty i {
  color: color-mix(in srgb, var(--muted) 65%, var(--border));
  font-size: 1.8rem;
}

.admin-social-image-library-empty strong {
  color: var(--text);
  font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
  .admin-social-image-library-actions button {
    transition: none;
  }

  .admin-social-image-library-actions button:hover:not(:disabled),
  .admin-social-image-library-actions button:focus-visible {
    transform: none;
  }
}

.admin-social-settings-panel {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-social-settings-panel label {
  display: grid;
  gap: 0.45rem;
}

.admin-social-settings-panel label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-social-settings-panel select {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 1rem) 50% / 0.42rem 0.42rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.72rem) 50% / 0.42rem 0.42rem no-repeat,
    var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 2.1rem 0 0.75rem;
  text-transform: none;
}

.admin-social-settings-panel select:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-social-settings-panel figure {
  display: grid;
  align-items: center;
  min-height: 10rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--border));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 55%),
    var(--card);
}

.admin-social-settings-panel img {
  display: block;
  width: 100%;
  aspect-ratio: 1.91 / 1;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--shadow-color) 12%, transparent);
}

.admin-social-settings-panel img[hidden] {
  display: none;
}

.admin-social-settings-modal .admin-event-modal-footer button {
  min-height: 2.45rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0 1.05rem;
}

.admin-social-settings-modal .admin-event-modal-footer button:hover:not(:disabled) {
  background: var(--primary-strong);
}

.admin-social-settings-modal .admin-event-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.admin-social-payload-modal {
  width: min(58rem, calc(100vw - 2rem));
  height: min(46rem, calc(100vh - 2rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-social-payload-body {
  min-height: 0;
  padding: 1rem 1.1rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card));
}

.admin-social-payload-body pre {
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 90%, var(--surface-soft));
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 1rem;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}

.admin-social-payload-modal .admin-event-modal-footer button {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  padding: 0 1rem;
}

.admin-social-payload-modal .admin-event-modal-footer button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.admin-social-payload-modal .admin-event-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-social-payload-modal .admin-event-modal-footer button > * {
  color: inherit;
}

.admin-pipeline-events-modal {
  width: min(72rem, calc(100vw - 2rem));
  grid-template-rows: auto minmax(0, 1fr);
}

.admin-nested-modal-backdrop {
  z-index: 121;
}

.admin-pipeline-event-edit-modal {
  z-index: 122;
  width: min(38rem, calc(100vw - 2rem));
  grid-template-rows: minmax(0, 1fr);
}

.admin-order-suggestion-modal {
  z-index: 122;
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100dvh - 2rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-order-suggestion-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.admin-order-suggestion-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--stale) 26%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--stale) 6%, var(--card));
  color: var(--muted);
}

.admin-order-suggestion-intro > i.ph-duotone {
  color: var(--stale);
  font-size: 1.35rem;
}

.admin-order-suggestion-intro > div {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.admin-order-suggestion-intro p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

.admin-order-suggestion-intro a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  color: var(--stale);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-order-suggestion-intro a:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-order-suggestion-intro a i {
  font-size: 0.9rem;
}

.admin-order-suggestion-list {
  display: grid;
  gap: 0.72rem;
}

.admin-order-suggestion-row {
  display: grid;
  gap: 0.48rem;
  padding-bottom: 0.72rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  transition: opacity 150ms ease;
}

.admin-order-suggestion-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-order-suggestion-choice {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.48rem;
  cursor: pointer;
}

.admin-order-suggestion-choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.admin-order-suggestion-choice span {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-order-suggestion-row:not(.is-selected) {
  opacity: 0.58;
}

.admin-order-suggestion-row:not(.is-selected)
  .admin-order-suggestion-comparison
  > div[data-version="suggested"] {
  border-color: var(--border);
  background: var(--surface-soft);
}

.admin-order-suggestion-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.admin-order-suggestion-comparison > div {
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-order-suggestion-comparison > div[data-version="suggested"] {
  border-color: color-mix(in srgb, var(--stale) 34%, var(--border));
  background: color-mix(in srgb, var(--stale) 7%, var(--card));
}

.admin-order-suggestion-comparison span {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-order-suggestion-comparison > div[data-version="suggested"] span {
  color: var(--stale);
}

.admin-order-suggestion-comparison p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-order-suggestion-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.admin-order-suggestion-footer > span {
  font-weight: 600;
}

.admin-order-suggestion-footer > div {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.admin-order-suggestion-footer button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 1rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.admin-order-suggestion-footer .danger-action {
  border: 1px solid color-mix(in srgb, var(--degraded) 45%, var(--border));
  background: color-mix(in srgb, var(--degraded) 6%, var(--card));
  color: var(--degraded);
}

.admin-order-suggestion-footer .primary-action {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.admin-order-suggestion-footer button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.admin-order-suggestion-footer .danger-action:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 12%, var(--card));
}

.admin-order-suggestion-footer .primary-action:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}

.admin-order-suggestion-footer button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-suggestion-footer button:disabled {
  cursor: progress;
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  .admin-order-suggestion-row,
  .admin-order-suggestion-footer button {
    transition: none;
  }

  .admin-order-suggestion-footer button:hover:not(:disabled) {
    transform: none;
  }
}

.admin-pipeline-event-edit-modal form {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-pipeline-event-edit-body {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.admin-pipeline-event-edit-intro {
  display: grid;
  gap: 0.65rem;
}

.admin-pipeline-event-edit-fields {
  display: grid;
  gap: 0.9rem;
}

.admin-pipeline-event-edit-body .admin-field {
  display: grid;
  gap: 0.4rem;
}

.admin-pipeline-event-edit-body .admin-field > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-event-edit-body input,
.admin-pipeline-event-edit-body select,
.admin-pipeline-event-edit-body textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0;
  padding: 0.65rem 0.8rem;
  text-transform: none;
}

.admin-pipeline-event-edit-body textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.45;
}

.admin-pipeline-event-edit-body .admin-manual-event-scope textarea {
  min-height: 5rem;
}

.admin-pipeline-event-ai-summary {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.admin-pipeline-event-edit-body .admin-pipeline-event-ai-summary input {
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

.admin-pipeline-event-ai-summary:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-order-image-editor {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-soft));
}

.admin-pipeline-event-edit-modal[data-editor-mode="image"] .admin-pipeline-event-edit-intro,
.admin-pipeline-event-edit-modal[data-editor-mode="image"] .admin-pipeline-event-edit-fields > :not(.admin-order-image-editor) {
  display: none;
}

.admin-order-image-editor-header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.admin-order-image-editor-header > i.ph-duotone {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.35rem;
}

.admin-order-image-editor-header > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.admin-order-image-editor-header strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 750;
}

.admin-order-image-editor-header small,
.admin-order-image-actions small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.admin-order-image-editor-workspace {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1rem;
  align-items: start;
}

.admin-order-image-preview {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--order-image-aspect-ratio, 5 / 6);
  justify-self: start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.admin-order-image-crop-overlay {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid color-mix(in srgb, white 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #0b1324 82%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 38%, transparent);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
  transition: background 160ms ease, transform 160ms ease;
}

.admin-order-image-crop-overlay:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 84%, #0b1324);
  transform: translateY(-1px);
}

.admin-order-image-crop-overlay:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-image-crop-overlay:disabled {
  display: none;
}

.admin-order-image-preview img,
.admin-order-image-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.admin-order-image-preview img {
  display: block;
  object-fit: cover;
  object-position: var(--order-image-crop-x, 50%) var(--order-image-crop-y, 50%);
  transform: scale(var(--order-image-crop-zoom, 1));
  transform-origin: var(--order-image-crop-x, 50%) var(--order-image-crop-y, 50%);
  transition: transform 160ms ease;
}

.admin-order-image-preview img[hidden],
.admin-order-image-placeholder[hidden] {
  display: none;
}

.admin-order-image-placeholder {
  display: grid;
  place-content: center;
  gap: 0.4rem;
  color: var(--muted);
  text-align: center;
}

.admin-order-image-placeholder > i.ph-duotone {
  color: color-mix(in srgb, var(--primary) 68%, var(--muted));
  font-size: 1.75rem;
}

.admin-order-image-placeholder span {
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-order-image-actions {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
  align-items: stretch;
}

.admin-order-image-actions small {
  padding: 0.15rem 0.1rem 0;
}

.admin-order-image-replace-heading {
  display: grid;
  gap: 0.12rem;
}

.admin-order-image-replace-heading strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.admin-order-image-replace-heading small {
  padding: 0;
}

.admin-order-image-replace-options {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.admin-order-image-choose {
  display: inline-flex;
  min-width: 0;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--primary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.admin-order-image-library {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.35rem 0 0.68rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  min-width: 0;
}

.admin-order-image-library > i {
  color: var(--primary);
  font-size: 0.95rem;
}

.admin-order-image-library select {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 2.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-order-image-library:has(select:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-image-library:has(select:disabled) {
  opacity: 0.55;
}

.admin-order-image-actions > button:not(.danger-action) {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 750;
  width: 100%;
}

.admin-order-image-actions > button:not(.danger-action):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.admin-order-image-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-order-image-choose:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  transform: translateY(-1px);
}

.admin-order-image-choose:has(+ input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-order-image-actions .danger-action {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 7%, var(--card));
  color: var(--danger);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  width: auto;
}

.admin-order-image-remove-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.admin-order-image-remove-row > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.admin-order-image-actions .danger-action:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, var(--card));
  transform: translateY(-1px);
}

.admin-order-image-actions .danger-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-order-image-crop-overlay,
  .admin-order-image-choose,
  .admin-order-image-actions .danger-action {
    transition: none;
  }

  .admin-order-image-crop-overlay:hover:not(:disabled),
  .admin-order-image-choose:hover,
  .admin-order-image-actions .danger-action:hover:not(:disabled) {
    transform: none;
  }
}

.admin-order-image-fields {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.admin-order-image-fields[hidden] {
  display: none;
}

.admin-order-crop-backdrop {
  z-index: 123;
}

.admin-order-crop-modal {
  z-index: 124;
  width: min(46rem, calc(100vw - 2rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-order-crop-body {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 1rem;
  padding: 1rem 1.25rem 1.2rem;
  overflow: auto;
}

.admin-order-crop-presets {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.85rem;
}

.admin-order-crop-preset-group {
  display: grid;
  min-width: 0;
  gap: 0.42rem;
}

.admin-order-crop-preset-group > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-order-crop-segments,
.admin-order-crop-ratios {
  display: grid;
  gap: 0.3rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, var(--card));
}

.admin-order-crop-segments {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-order-crop-ratios {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-order-crop-segments button,
.admin-order-crop-ratios button {
  display: inline-flex;
  min-width: 0;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.admin-order-crop-segments button[aria-pressed="true"],
.admin-order-crop-ratios button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
}

.admin-order-crop-ratios small {
  color: inherit;
  font-size: 0.62rem;
  font-weight: 650;
}

.admin-order-crop-stage {
  position: relative;
  width: min(100%, 42rem);
  aspect-ratio: 16 / 10;
  justify-self: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 8px;
  background: #0f172a;
  touch-action: manipulation;
}

.admin-order-crop-stage[data-dragging="true"] .admin-order-crop-selection {
  cursor: grabbing;
  transition: none;
}

.admin-order-crop-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.admin-order-crop-selection {
  position: absolute;
  z-index: 1;
  display: block;
  min-width: 2rem;
  min-height: 2rem;
  border: 2px solid rgb(255 255 255 / 94%);
  border-radius: 6px;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgb(255 255 255 / 28%) 33.333%, transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), rgb(255 255 255 / 28%) 66.666%, transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgb(255 255 255 / 28%) 33.333%, transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgb(255 255 255 / 28%) 66.666%, transparent calc(66.666% + 0.5px));
  box-shadow:
    0 0 0 1px rgb(7 13 24 / 58%),
    0 0 0 100vmax rgb(7 13 24 / 58%);
  cursor: move;
  touch-action: none;
  transition:
    left 100ms ease,
    top 100ms ease,
    width 100ms ease,
    height 100ms ease;
}

.admin-order-crop-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-order-crop-controls label {
  display: grid;
  min-width: 0;
  gap: 0.48rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-order-crop-controls label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-order-crop-controls output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.admin-order-crop-controls input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--primary);
}

.admin-order-crop-footer > div {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}

.admin-order-crop-footer button {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.58rem 0.82rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-order-crop-footer .primary-action {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast, #fff);
}

.admin-pipeline-event-edit-body input:disabled,
.admin-pipeline-event-edit-body select:disabled,
.admin-pipeline-event-edit-body textarea:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.admin-pipeline-event-edit-body input:focus,
.admin-pipeline-event-edit-body select:focus,
.admin-pipeline-event-edit-body textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-pipeline-event-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-pipeline-event-note-fields {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.admin-pipeline-event-note-fields .admin-pipeline-event-edit-grid {
  grid-template-columns: minmax(10rem, 14rem);
}

.admin-pipeline-event-note-fields textarea {
  min-height: 5.5rem;
}

.admin-pipeline-event-note-fields > small {
  margin-top: -0.35rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.admin-pipeline-event-edit-body .admin-switch-row {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  padding: 0.9rem 1rem;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-pipeline-event-edit-body .admin-switch-row:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  transform: translateY(-1px);
}

.admin-pipeline-event-edit-body .admin-switch-row > span:first-child {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.admin-pipeline-event-edit-body .admin-switch-row strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.admin-pipeline-event-edit-body .admin-switch-row small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.admin-pipeline-event-edit-body .admin-switch-row input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-switch-track {
  position: relative;
  width: 2.7rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: background 160ms ease, border-color 160ms ease;
}

.admin-switch-track::after {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.26);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.admin-switch-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.admin-switch-row:has(input:checked) .admin-switch-track {
  border-color: var(--primary);
  background: var(--primary);
}

.admin-switch-row:has(input:checked) .admin-switch-track::after {
  transform: translateX(1.18rem);
}

.admin-switch-row:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-event-edit-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.admin-pipeline-event-edit-footer > span {
  font-weight: 600;
}

.admin-pipeline-event-edit-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.admin-pipeline-event-edit-footer .danger-action {
  display: inline-flex;
  width: 2.4rem;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--degraded) 48%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--degraded) 6%, var(--card));
  color: var(--degraded);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.admin-pipeline-event-edit-footer .danger-action:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 12%, var(--card));
  transform: translateY(-1px);
}

.admin-pipeline-event-edit-footer .danger-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-event-edit-footer .primary-action {
  display: inline-flex;
  min-height: 2.4rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 1rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.admin-pipeline-event-edit-footer .primary-action span {
  margin: 0;
  color: inherit;
  font: inherit;
}

.admin-pipeline-event-edit-footer .primary-action:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.admin-pipeline-event-edit-footer .primary-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-event-edit-footer .primary-action:disabled {
  cursor: progress;
  opacity: 0.68;
}

.admin-pipeline-event-edit-footer .danger-action:disabled {
  cursor: progress;
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  .admin-pipeline-event-edit-footer .primary-action {
    transition: none;
  }

  .admin-pipeline-event-edit-footer .danger-action {
    transition: none;
  }

  .admin-pipeline-event-edit-footer .primary-action:hover:not(:disabled) {
    transform: none;
  }

  .admin-pipeline-event-edit-footer .danger-action:hover:not(:disabled) {
    transform: none;
  }
}

.admin-pipeline-events-modal-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.admin-event-modal-header .admin-pipeline-events-modal-actions button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
}

.admin-event-modal-header .admin-pipeline-events-modal-actions .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  color: var(--degraded);
}

.admin-event-modal-header .admin-pipeline-events-modal-actions .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-event-modal-header .admin-pipeline-events-modal-actions .admin-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-pipeline-events-review {
  min-height: 0;
  overflow: hidden;
  padding: 0.9rem;
}

.admin-pipeline-events-review-shell {
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(16rem, 0.62fr) minmax(28rem, 1.58fr);
  gap: 0.9rem;
}

.admin-pipeline-events-review-list,
.admin-pipeline-event-detail {
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--card));
}

.admin-pipeline-events-review-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.admin-pipeline-events-review-list-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 0.72rem 0.82rem;
}

.admin-pipeline-events-review-list-header strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-pipeline-events-review-list-header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-events-review-items {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-height: 0;
  overflow: auto;
  padding: 0.65rem;
}

.admin-pipeline-event-review-item {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.38rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  padding: 0.65rem 0.68rem;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-pipeline-event-review-item:hover,
.admin-pipeline-event-review-item:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent);
  outline: none;
}

.admin-pipeline-event-review-item[data-selected="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
}

.admin-pipeline-event-review-heading {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.admin-pipeline-event-review-heading strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.22;
}

.admin-pipeline-event-review-heading span,
.admin-pipeline-event-review-item small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.admin-pipeline-event-review-date {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pipeline-event-review-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
}

.admin-pipeline-event-review-footer > span:first-child {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pipeline-event-review-badges,
.admin-pipeline-event-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-pipeline-event-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--muted) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.28rem 0.46rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-pipeline-event-suggestion-chip {
  min-width: 1.7rem;
  min-height: 1.7rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: color-mix(in srgb, var(--stale) 42%, var(--border));
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
}

.admin-pipeline-event-suggestion-action {
  cursor: pointer;
}

.admin-pipeline-event-suggestion-action:hover,
.admin-pipeline-event-suggestion-action:focus-visible {
  border-color: var(--stale);
  background: color-mix(in srgb, var(--stale) 16%, var(--card));
  color: var(--stale);
  transform: translateY(-1px);
}

.admin-pipeline-event-suggestion-chip i {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1;
}

.admin-pipeline-event-pill[data-status="ai"] {
  border-color: color-mix(in srgb, #8b5cf6 34%, var(--border));
  background: color-mix(in srgb, #8b5cf6 10%, var(--card));
  color: color-mix(in srgb, #8b5cf6 74%, var(--primary));
}

.admin-pipeline-event-pill[data-status="official"] {
  gap: 0.28rem;
  border-color: color-mix(in srgb, var(--calendar-mark-text, #b7791f) 52%, var(--border));
  background: color-mix(in srgb, var(--calendar-mark-text, #b7791f) 14%, var(--card));
  color: var(--calendar-mark-text, #b7791f);
}

.admin-pipeline-event-pill[data-status="official"] i {
  font-size: 0.76rem;
}

.admin-pipeline-event-pill[data-status="override"],
.admin-pipeline-event-pill[data-status="new"] {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  color: color-mix(in srgb, var(--warn) 72%, var(--text));
}

.admin-pipeline-event-pill[data-status="manual"] {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: color-mix(in srgb, var(--brand) 76%, var(--text));
}

.admin-pipeline-event-pill[data-status="matched"] {
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: color-mix(in srgb, var(--good) 12%, var(--card));
  color: color-mix(in srgb, var(--good) 76%, var(--text));
}

.admin-pipeline-event-pill[data-status="localized"] {
  border-color: color-mix(in srgb, #0f766e 42%, var(--border));
  background: color-mix(in srgb, #0f766e 10%, var(--card));
  color: color-mix(in srgb, #0f766e 78%, var(--text));
}

.admin-pipeline-event-pill[data-status="observed"] {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  color: color-mix(in srgb, var(--warn) 76%, var(--text));
}

.admin-pipeline-event-pill[data-status="active"] {
  border-color: color-mix(in srgb, var(--good) 44%, var(--border));
  background: color-mix(in srgb, var(--good) 12%, var(--card));
  color: color-mix(in srgb, var(--good) 78%, var(--text));
}

.admin-pipeline-event-pill[data-status="upcoming"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
}

.admin-pipeline-event-pill[data-status="ended"],
.admin-pipeline-event-pill[data-status="unknown"] {
  border-color: color-mix(in srgb, var(--muted) 24%, var(--border));
  background: color-mix(in srgb, var(--muted) 7%, var(--card));
  color: var(--muted);
}

.admin-pipeline-event-detail {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  overflow: auto;
  padding: 0.9rem;
}

.admin-pipeline-event-detail-header {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-pipeline-event-detail-header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.admin-pipeline-event-detail-header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-event-detail h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.16;
}

.admin-pipeline-event-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.42rem;
  align-items: center;
}

.admin-pipeline-event-detail-summary {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

.admin-pipeline-event-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.55rem;
}

.admin-pipeline-event-fact-card {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 72%, var(--surface-soft));
}

.admin-pipeline-event-fact-card span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-pipeline-event-fact-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pipeline-event-fact-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-pipeline-event-detail-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 0.85rem;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.admin-pipeline-event-detail-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-event-detail-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-pipeline-event-detail-facts a {
  color: var(--primary);
  font-weight: 950;
}

.admin-pipeline-event-raw {
  min-width: 0;
}

.admin-pipeline-event-raw summary {
  cursor: pointer;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
  padding: 0.72rem 0.82rem;
}

.admin-pipeline-event-raw .admin-raw-body {
  margin-top: 0.55rem;
}

.admin-pipeline-event-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  padding: 1rem;
}

.admin-api-request-table {
  min-width: 48rem;
}

.admin-pipeline-event-edit-button {
  position: relative;
}

.admin-pipeline-event-edit-button[data-operator-override="true"]::after {
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  width: 0.42rem;
  height: 0.42rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--primary);
  content: "";
}

.admin-override-indicator {
  display: inline-flex;
  margin-left: 0.45rem;
  transform: translateY(-0.04rem);
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.18rem 0.36rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.admin-ai-summary-indicator {
  display: inline-flex;
  margin-right: 0.35rem;
  transform: translateY(-0.04rem);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  background-clip: padding-box;
  color: var(--primary);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.18rem 0.36rem;
  text-transform: uppercase;
  vertical-align: middle;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .admin-ai-summary-indicator span {
    background: linear-gradient(135deg, var(--primary), var(--good));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.admin-api-request-table th:nth-child(1),
.admin-api-request-table td:nth-child(1) {
  width: 10rem;
}

.admin-api-request-table th:nth-child(2),
.admin-api-request-table td:nth-child(2) {
  width: 5rem;
}

.admin-api-request-table th:nth-child(3),
.admin-api-request-table td:nth-child(3) {
  width: 9rem;
}

.admin-api-request-table th:nth-child(4),
.admin-api-request-table td:nth-child(4) {
  width: 7rem;
}

.admin-api-request-table th:nth-child(5),
.admin-api-request-table td:nth-child(5) {
  width: auto;
}

.admin-api-request-table td:nth-child(2),
.admin-api-request-table td:nth-child(4) {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-api-request-table small {
  display: block;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-event-severity-badge {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-event-table tr[data-severity="success"] .admin-event-severity-badge {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: var(--good);
}

.admin-event-table tr[data-severity="warning"] .admin-event-severity-badge {
  border-color: color-mix(in srgb, var(--stale) 34%, var(--border));
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
}

.admin-event-table tr[data-severity="error"] .admin-event-severity-badge {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 9%, var(--card));
  color: var(--degraded);
}

.admin-event-table tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.admin-event-row-details {
  position: relative;
}

.admin-event-row-details summary {
  display: inline-flex;
  gap: 0.35rem;
  min-height: 1.9rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 0.65rem;
  text-transform: uppercase;
  user-select: none;
}

.admin-event-row-details summary::marker,
.admin-event-row-details summary::-webkit-details-marker {
  display: none;
  content: "";
}

.admin-event-row-details[open] summary {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-event-row-details p {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(24rem, 68vw);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 12px 30px var(--shadow);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  padding: 0.75rem;
  text-transform: none;
  overflow-wrap: anywhere;
}

.admin-event-modal-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.admin-event-table-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.admin-event-table-footer > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-event-log-sentinel {
  min-height: 1px;
}

@keyframes admin-modal-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes admin-modal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(0.65rem) scale(0.985);
  }
}

@keyframes admin-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes admin-modal-backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-icon-button,
  .admin-event-modal,
  .admin-event-modal[data-state="closing"],
  .admin-manual-event-analyze-popover,
  .admin-manual-event-analyze-popover[data-state="closing"],
  .admin-modal-backdrop,
  .admin-modal-backdrop[data-state="closing"] {
    animation: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .admin-order-image-editor-workspace {
    grid-template-columns: 1fr;
  }

  .admin-order-image-preview {
    width: min(100%, 20rem);
    min-height: 0;
    justify-self: center;
  }

  .admin-order-image-replace-options {
    grid-template-columns: 1fr;
  }

  .admin-order-image-remove-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-order-image-actions .danger-action {
    width: 100%;
  }

  .admin-order-crop-stage {
    width: min(100%, 20rem);
    aspect-ratio: 1;
  }

  .admin-order-crop-presets {
    grid-template-columns: 1fr;
  }

  .admin-order-crop-ratios {
    grid-template-columns: repeat(5, minmax(3.1rem, 1fr));
    overflow-x: auto;
  }

  .admin-order-crop-controls {
    grid-template-columns: 1fr;
  }

  .admin-order-crop-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-order-crop-footer > div {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
  }

  .admin-order-crop-footer > button {
    width: 100%;
  }

  .admin-event-log-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-event-modal {
    inset: 0;
    width: 100vw;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .admin-social-payload-modal {
    height: 100dvh;
  }

  .admin-social-history-modal {
    height: 100dvh;
  }

  .admin-social-history-modal .admin-social-history-controls {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.85rem 1rem;
  }

  .admin-social-history-modal .admin-social-history-table-wrap {
    margin: 0.75rem 1rem;
  }

  .admin-social-payload-body {
    padding: 0.75rem;
  }

  .admin-social-payload-body pre {
    font-size: 0.72rem;
    padding: 0.8rem;
  }

  .admin-event-modal-header,
  .admin-event-modal-footer {
    padding-inline: 1rem;
  }

  .admin-event-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: 1rem;
  }

  .admin-event-modal-header > div:first-child {
    min-width: 0;
  }

  .admin-event-modal-header > button {
    flex: 0 0 auto;
  }

  .admin-event-modal-header:has(.admin-pipeline-events-modal-actions) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-pipeline-events-modal-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    justify-content: stretch;
  }

  .admin-pipeline-events-modal-actions button {
    width: 100%;
    min-width: 0;
  }

  .admin-event-modal-footer {
    padding-top: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .admin-dev-settings-reset,
  .admin-dev-settings-tier-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-social-settings-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.9rem 1rem 1rem;
  }

  .admin-social-image-upload-workspace {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .admin-social-image-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-social-image-library-card {
    grid-template-columns: minmax(7.5rem, 0.72fr) minmax(0, 1.28fr);
  }

  .admin-social-image-library-heading > div {
    align-items: flex-start;
  }

  #adminSocialImageUploadButton {
    width: 100%;
    min-height: 2.75rem;
  }

  .admin-social-image-upload-preview img {
    width: 100%;
    max-width: none;
  }

  .admin-social-settings-panel figure {
    min-height: 8.6rem;
  }

  .admin-dev-settings-remove-tier {
    justify-self: end;
  }

  .admin-event-modal-controls,
  .admin-event-table-controls {
    grid-template-columns: 1fr;
    padding: 0.9rem 1rem;
  }

  .admin-order-review-grid {
    grid-template-columns: 1fr;
  }

  .admin-order-review-card {
    min-height: 6.2rem;
  }

  .admin-event-table {
    min-width: 52rem;
  }

  .admin-pipeline-events-review {
    overflow: auto;
    padding: 0.75rem;
  }

  .admin-pipeline-events-review-shell {
    height: auto;
    grid-template-columns: 1fr;
  }

  .admin-pipeline-events-review-items {
    max-height: 18rem;
  }

  .admin-pipeline-event-review-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-pipeline-event-review-badges {
    min-width: 0;
  }

  .admin-pipeline-event-detail-header {
    display: grid;
  }

  .admin-pipeline-event-actions {
    justify-content: flex-start;
  }

  .admin-pipeline-event-insight-grid {
    grid-template-columns: 1fr;
  }

  .admin-pipeline-event-detail-facts {
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }

  .admin-event-table th,
  .admin-event-table td {
    padding: 0.72rem;
  }

  .admin-event-modal-footer,
  .admin-event-table-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-pipeline-event-edit-grid {
    grid-template-columns: 1fr;
  }

  .admin-pipeline-event-edit-footer .primary-action {
    width: 100%;
  }

  .admin-pipeline-event-edit-actions {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
  }

  .admin-pipeline-event-edit-footer .danger-action {
    width: 2.75rem;
  }

  .admin-event-load-more {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .admin-pipeline-events-modal-actions {
    grid-template-columns: 1fr;
  }
}

.admin-pipeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.admin-dev-card {
  display: grid;
  gap: 0.85rem;
}

.admin-dev-card > .section-heading {
  align-items: start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
}

.admin-dev-card > .section-heading .admin-actions {
  gap: 0.45rem;
}

.admin-dev-card > .section-heading .admin-actions button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-inline: 0.72rem;
}

.admin-dev-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-dev-summary-card {
  display: grid;
  min-width: 0;
  min-height: 5.85rem;
  gap: 0.2rem;
  padding: 0.75rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-dev-summary-card > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-dev-summary-card > strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.02;
}

.admin-dev-summary-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.28;
}

.admin-dev-filters,
.admin-dev-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) minmax(12rem, 1fr) minmax(9rem, 0.7fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.admin-dev-filters {
  grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(9rem, 0.45fr));
  align-items: end;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-dev-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-filters label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-form input,
.admin-dev-form select,
.admin-dev-filters input,
.admin-dev-filters select,
.admin-dev-actions select {
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.admin-dev-form input,
.admin-dev-form select,
.admin-dev-filters input,
.admin-dev-filters select {
  width: 100%;
  padding: 0 0.7rem;
}

.admin-dev-form select,
.admin-dev-filters select,
.admin-dev-actions select {
  appearance: none;
  padding-right: 2rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 0.9rem) 50% / 0.4rem 0.4rem no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 0.64rem) 50% / 0.4rem 0.4rem no-repeat,
    var(--surface-soft);
}

.admin-dev-temp {
  margin: 0;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-dev-list {
  display: grid;
  gap: 0.75rem;
}

.admin-dev-list > p {
  margin: 0;
  color: var(--muted);
}

.admin-dev-drawer {
  transform-origin: var(--mast-interaction-origin-x, 100%) var(--mast-interaction-origin-y, 0%);
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  width: min(26rem, 100vw);
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: 0 18px 48px var(--shadow);
  overscroll-behavior: contain;
  animation: drawer-slide-in 180ms ease-out;
}

.admin-dev-drawer[hidden] {
  display: none;
}

.admin-dev-drawer-form {
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

.admin-dev-item {
  display: grid;
  grid-template-columns: minmax(11rem, 0.52fr) minmax(13rem, 0.7fr) minmax(27rem, auto);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-dev-heading {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-dev-heading strong {
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.admin-dev-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.license-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.admin-license-key-field {
  margin-top: 0;
}

.dev-api-key-card {
  position: relative;
  gap: 1.15rem;
  min-height: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.dev-api-key-card::before {
  display: none;
}

.dev-api-key-card::after {
  display: none;
}

.dev-api-key-card > * {
  position: relative;
  z-index: 1;
}

.admin-dev-card.dev-api-key-card > .section-heading {
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
}

.dev-api-pass-heading {
  display: flex;
  gap: 0.82rem;
  align-items: center;
  min-width: 0;
}

.dev-api-pass-heading h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.42rem);
  line-height: 1.08;
}

.dev-api-pass-mark {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
}

.dev-api-pass-mark i {
  font-size: 1.98rem;
  line-height: 1;
}

.usage-progress {
  position: relative;
  height: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 38%, var(--card));
}

.usage-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  min-width: 0;
  border-radius: inherit;
  background: var(--good);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
  transition: width 240ms ease;
}

.usage-progress span[data-state="warning"] {
  background: var(--warn);
}

.usage-progress span[data-state="limit"] {
  background: var(--degraded);
}

.usage-progress span[data-state="blocked"] {
  background: var(--degraded);
}

.dev-usage-card {
  align-content: start;
  gap: 0;
}

.dev-usage-card[data-api-access-state="blocked"] {
  border-color: color-mix(in srgb, var(--degraded) 58%, var(--border));
  background: color-mix(in srgb, var(--degraded) 9%, var(--card));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--degraded) 18%, transparent),
    var(--shadow-soft);
}

.dev-usage-card[data-api-access-state="blocked"] .dev-usage-card-title > span:first-child,
.dev-usage-card[data-api-access-state="blocked"] #devUsageStatus {
  color: var(--degraded);
}

.dev-usage-card[data-api-access-state="blocked"] .usage-progress {
  border-color: color-mix(in srgb, var(--degraded) 52%, var(--border));
  background: color-mix(in srgb, var(--degraded) 14%, var(--card));
}

.dev-usage-card-heading {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.dev-usage-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.dev-usage-warning {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  place-items: center;
  color: var(--warn);
  border-radius: 50%;
  cursor: help;
}

.dev-usage-warning i {
  font-size: 1rem;
  line-height: 1;
}

.dev-usage-warning:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--warn) 72%, transparent);
  outline-offset: 2px;
}

.dev-usage-card #devUsageStatus {
  margin-bottom: 0.45rem;
}

.dev-usage-card .usage-progress {
  margin-bottom: 0.42rem;
}

.dev-usage-card #devUsageMeta {
  margin-top: 0;
  line-height: 1.3;
}

.dev-usage-card-heading button {
  min-height: 2.05rem;
  padding: 0 0.8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
  color: var(--primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.dev-usage-card-heading button:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary-hover);
  transform: translateY(-1px);
}

.dev-usage-card-heading button:disabled {
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--muted) 7%, var(--card));
  color: var(--muted);
  transform: none;
}

.dev-usage-history-card {
  gap: 0.85rem;
}

.dev-usage-history-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.34rem;
  align-items: end;
  min-height: 8.6rem;
  padding: 0.7rem 0.8rem 0.58rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  .dev-usage-history-chart {
    border-color: #d8dee8;
    background: #f8fafc;
  }
}

html[data-theme="dark"] .dev-usage-history-chart {
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  html[data-theme="dark"] .dev-usage-history-chart {
    border-color: #324155;
    background: #1e293b;
  }
}

.dev-usage-history-month {
  display: grid;
  grid-template-rows: auto 4.25rem auto;
  min-width: 0;
  gap: 0.34rem;
  align-items: end;
}

.dev-usage-history-month strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.dev-usage-history-track {
  position: relative;
  display: block;
  width: 100%;
  height: 4.25rem;
  min-height: 4.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.dev-usage-history-track i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--good);
  opacity: 0.7;
  box-shadow: 0 -0.2rem 0.7rem color-mix(in srgb, var(--good) 12%, transparent);
}

.dev-usage-history-month[data-current="true"] .dev-usage-history-track i {
  opacity: 0.95;
}

.dev-usage-history-month[data-state="warning"] .dev-usage-history-track i {
  background: var(--warn);
  box-shadow: 0 -0.2rem 0.7rem color-mix(in srgb, var(--warn) 14%, transparent);
}

.dev-usage-history-month[data-state="limit"] .dev-usage-history-track i {
  background: var(--degraded);
  box-shadow: 0 -0.2rem 0.7rem color-mix(in srgb, var(--degraded) 14%, transparent);
}

.dev-usage-history-month small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.dev-usage-history-chart .empty-state {
  grid-column: 1 / -1;
  margin: 0;
  align-self: center;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.dev-usage-history-skeleton strong,
.dev-usage-history-skeleton small,
.dev-usage-history-skeleton .dev-usage-history-track i {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 50%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 50%, transparent)
    );
  color: transparent !important;
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.dev-usage-history-skeleton strong {
  width: min(2.6rem, 80%);
  height: 0.78rem;
  justify-self: center;
}

.dev-usage-history-skeleton .dev-usage-history-track i {
  opacity: 0.82;
  box-shadow: none;
}

.dev-usage-history-skeleton small {
  width: min(3rem, 86%);
  height: 0.62rem;
  justify-self: center;
}

.admin-dev-usage {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.admin-dev-usage-top {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  justify-content: space-between;
}

.admin-dev-usage-top span,
.admin-dev-usage small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-dev-usage-top strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-dev-usage-count-group {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  justify-content: flex-end;
  min-width: 0;
}

.admin-dev-usage-warning {
  color: var(--warn);
  cursor: help;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  outline: none;
  position: relative;
}

.admin-dev-usage-warning::after {
  background: var(--text);
  border-radius: 6px;
  bottom: calc(100% + 0.5rem);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 82%, transparent);
  color: var(--card);
  content: attr(data-tooltip);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  left: 50%;
  line-height: 1.35;
  max-width: min(18rem, 70vw);
  opacity: 0;
  padding: 0.42rem 0.58rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-transform: none;
  transform: translate(-50%, 0.2rem);
  transition: opacity 140ms ease, transform 140ms ease;
  width: max-content;
  z-index: 20;
}

.admin-dev-usage-warning:hover::after,
.admin-dev-usage-warning:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.admin-dev-usage small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.admin-dev-usage-progress {
  height: 0.45rem;
}

.admin-dev-item code,
.dev-license-key,
.license-key-field code {
  display: block;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.dev-api-key-card .dev-license-key-field {
  gap: 0.78rem;
  align-items: center;
  margin-top: 0;
  padding: 0.76rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--card) 90%, transparent),
      color-mix(in srgb, var(--surface-soft) 78%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent),
    0 1.05rem 2.35rem color-mix(in srgb, var(--primary) 8%, transparent);
}

.dev-api-key-card .dev-license-key-field[hidden] {
  display: none;
}

.dev-license-key-title {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--primary) 74%, var(--muted));
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.dev-api-key-card .dev-license-key {
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.68rem 0.82rem;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--card) 92%, transparent),
      color-mix(in srgb, var(--surface-soft) 72%, transparent)
    );
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.license-key-reveal-button {
  display: inline-grid;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.license-key-reveal-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent);
  transform: translateY(-1px);
}

.license-key-reveal-button .ph-bold {
  font-size: 1rem;
  line-height: 1;
}

.dev-license-key-actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.dev-api-key-card .dev-license-key-actions {
  gap: 0.4rem;
  padding-left: 0.15rem;
}

.dev-api-key-card .license-key-reveal-button,
.dev-api-key-card .dev-license-key-actions .dev-api-copy-key,
.dev-api-key-card .dev-license-key-actions .dev-api-mail-key {
  width: 3rem;
  height: 3rem;
  min-height: 3rem;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--card) 90%, var(--surface-soft));
}

.dev-license-key-actions .dev-api-copy-key,
.dev-license-key-actions .dev-api-mail-key {
  display: inline-grid;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.dev-license-key-actions .dev-api-copy-key .ph-bold,
.dev-license-key-actions .dev-api-mail-key .ph-bold {
  font-size: 1rem;
  line-height: 1;
}

.dev-license-key-actions .dev-api-copy-key:hover:not(:disabled),
.dev-license-key-actions .dev-api-mail-key:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent);
  transform: translateY(-1px);
}

.dev-license-key-actions .dev-api-copy-key:disabled,
.dev-license-key-actions .dev-api-mail-key:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.58;
}

.admin-dev-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.65rem;
  align-items: center;
}

.admin-dev-actions select {
  width: 12rem;
  padding: 0 0.55rem;
  text-transform: capitalize;
}

.admin-dev-actions select[data-dev-plan] {
  width: 8.75rem;
}

.admin-dev-menu {
  position: relative;
}

.admin-dev-menu summary {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-dev-menu summary::-webkit-details-marker {
  display: none;
}

.admin-dev-menu summary::marker {
  content: "";
}

.admin-dev-menu summary:hover {
  border-color: var(--muted);
  background: var(--card);
  color: var(--text);
  transform: translateY(-1px);
}

.admin-dev-menu summary[data-policy-review="required"] {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
}

.admin-dev-menu summary[data-policy-review="required"]::after {
  content: "";
  position: absolute;
  top: 0.26rem;
  right: 0.26rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 999px;
  background: var(--degraded);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--degraded) 12%, transparent);
}

.admin-dev-menu[open] summary {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-dev-menu summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-dev-menu summary .ph-bold {
  font-size: 1rem;
  line-height: 1;
}

.admin-dev-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: min(15rem, 70vw);
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 14px 34px var(--shadow);
  transform-origin: top right;
  animation: admin-dev-menu-enter 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-dev-menu-panel button {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.admin-dev-menu-panel button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: var(--surface-soft);
  color: var(--primary);
  transform: translateX(1px);
}

.admin-dev-menu-panel button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-dev-menu-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-dev-menu-panel .admin-policy-button {
  position: relative;
  padding-right: 1.75rem;
  color: color-mix(in srgb, var(--degraded) 76%, var(--text));
}

.admin-dev-menu-panel .admin-policy-button[data-policy-review="required"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.68rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--degraded);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--degraded) 12%, transparent);
  transform: translateY(-50%);
}

.admin-dev-menu-panel .admin-policy-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 28%, var(--border));
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-dev-menu-panel .admin-danger-button {
  border-top-color: color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0 0 6px 6px;
  color: var(--degraded);
}

.admin-dev-menu-panel .admin-danger-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

@keyframes admin-dev-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-0.2rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-dev-menu summary,
  .admin-dev-menu-panel button {
    transition: none;
  }

  .admin-dev-menu-panel {
    animation: none;
  }

  .admin-dev-menu summary:hover,
  .admin-dev-menu-panel button:hover:not(:disabled) {
    transform: none;
  }
}

.admin-dev-actions .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  color: var(--degraded);
}

.admin-dev-actions .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-subscription-actions .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  color: var(--degraded);
}

.admin-subscription-actions .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.totp-disable-form {
  gap: 0.85rem;
}

.totp-disable-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.auth-form .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 50%, var(--border));
  background: color-mix(in srgb, var(--degraded) 7%, var(--card));
  color: var(--degraded);
}

.auth-form .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 12%, var(--card));
  color: var(--degraded);
}

.dev-layout {
  max-width: 56.25rem;
}

.dev-hero-summary {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.dev-layout .section-heading > div:first-child {
  min-width: 0;
}

.dev-layout .section-heading p {
  overflow-wrap: anywhere;
}

.dev-layout .admin-command-card > .section-heading {
  padding-bottom: 0;
  border-bottom: 0;
}

.dev-account-title-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.dev-account-title-row h3 {
  margin: 0;
}

.dev-account-edit-button {
  display: inline-flex;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
}

.dev-account-edit-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dev-account-edit-button:focus-visible {
  border-color: var(--primary);
  outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 2px;
}

.dev-account-edit-button .ph-bold {
  display: block;
  width: 1em;
  height: 1em;
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
}

.dev-account-name-form {
  display: grid;
  gap: 0.9rem;
}

.dev-account-name-form[hidden] {
  display: none;
}

.dev-account-name-form p {
  margin: 0;
  color: var(--muted);
}

.dev-account-name-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dev-account-name-form input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.dev-account-name-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
  outline: none;
}

.dev-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 0.25rem;
}

.dev-drawer-actions button {
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.dev-drawer-actions button[type="submit"] {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.dev-drawer-actions button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.dev-layout .admin-actions a,
.dev-layout .admin-actions button {
  gap: 0.42rem;
  text-align: center;
  white-space: nowrap;
}

.dev-layout .admin-actions i,
.dev-delete-account-form button i,
.admin-dev-drawer-form button i {
  flex: 0 0 auto;
  font-size: max(1.18em, 1.08rem);
  line-height: 1;
  vertical-align: -0.16em;
}

.dev-delete-account-form button,
.admin-dev-drawer-form button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
}

.dev-layout .dev-api-actions {
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.dev-layout .dev-api-actions a,
.dev-layout .dev-api-actions button {
  min-height: 2.1rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
}

.dev-layout .dev-api-actions a:hover,
.dev-layout .dev-api-actions button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--card);
  color: var(--text);
}

.dev-layout .dev-api-actions a:focus-visible,
.dev-layout .dev-api-actions button:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.dev-layout .dev-api-actions .dev-api-mail-key {
  color: var(--text);
}

.dev-layout .dev-api-actions .dev-api-mail-key:hover:not(:disabled) {
  color: var(--primary);
}

.dev-layout .admin-actions a,
.dev-layout .admin-command-card .admin-actions button {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--muted);
}

.dev-layout .admin-actions a:hover,
.dev-layout .admin-command-card .admin-actions button:hover:not(:disabled) {
  border-color: var(--muted);
  background: var(--card);
  color: var(--text);
}

.dev-layout .admin-dev-card .admin-actions button {
  border-color: var(--primary);
  color: var(--primary);
}

.dev-layout .admin-dev-card .admin-actions button:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.dev-layout .admin-dev-card .dev-api-actions button,
.dev-layout .admin-dev-card .dev-api-actions button:hover:not(:disabled) {
  border-color: transparent;
}

.dev-layout .admin-dev-card .dev-api-actions a,
.dev-layout .admin-dev-card .dev-api-actions button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.dev-layout .admin-dev-card .dev-api-actions a:hover,
.dev-layout .admin-dev-card .dev-api-actions button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--card);
  color: var(--text);
}

.dev-layout .admin-dev-card .dev-api-actions .dev-api-mail-key {
  color: var(--text);
}

.dev-layout .admin-dev-card .dev-api-actions .dev-api-mail-key:hover:not(:disabled) {
  color: var(--primary);
}

.dev-layout .admin-dev-card .dev-api-actions button:disabled {
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.58;
}

.dev-layout .admin-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.dev-layout[data-dev-loading="true"] #devAccountTitle,
.dev-layout[data-dev-loading="true"] #devAccountMeta,
.dev-layout[data-dev-loading="true"] #devSubscriptionStatus,
.dev-layout[data-dev-loading="true"] #devSubscriptionMeta,
.dev-layout[data-dev-loading="true"] #devUsageStatus,
.dev-layout[data-dev-loading="true"] #devUsageMeta,
.dev-layout[data-dev-loading="true"] #devUsageHistoryMeta,
.dev-layout[data-dev-loading="true"] #devPortalMeta,
.dev-layout[data-dev-loading="true"] #devSecurityMeta,
.dev-layout[data-dev-loading="true"] #devPasskeyMeta,
.dev-layout[data-dev-loading="true"] .usage-progress {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 50%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 50%, transparent)
    );
  color: transparent !important;
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.dev-layout[data-dev-loading="true"] #devAccountTitle,
.dev-layout[data-dev-loading="true"] #devSubscriptionStatus,
.dev-layout[data-dev-loading="true"] #devUsageStatus {
  display: block;
  height: 2.6rem;
}

.dev-layout[data-dev-loading="true"] #devAccountTitle {
  width: min(12rem, 78vw);
  height: 1.45rem;
}

.dev-layout[data-dev-loading="true"] #devAccountMeta,
.dev-layout[data-dev-loading="true"] #devSubscriptionMeta,
.dev-layout[data-dev-loading="true"] #devUsageMeta,
.dev-layout[data-dev-loading="true"] #devUsageHistoryMeta,
.dev-layout[data-dev-loading="true"] #devPortalMeta,
.dev-layout[data-dev-loading="true"] #devSecurityMeta,
.dev-layout[data-dev-loading="true"] #devPasskeyMeta {
  display: block;
  width: min(17rem, 92%);
  height: 1rem;
}

.dev-layout[data-dev-loading="true"] #devSubscriptionStatus {
  width: min(10rem, 76%);
}

.dev-layout[data-dev-loading="true"] #devUsageStatus {
  width: min(11rem, 82%);
}

.dev-layout[data-dev-loading="true"] .usage-progress {
  width: 100%;
  border-color: transparent;
}

.dev-layout[data-dev-loading="true"] .usage-progress span {
  display: none;
}

.dev-layout[data-dev-loading="true"] .dev-api-key-card {
  min-height: 11.5rem;
  gap: 1rem;
}

.dev-layout[data-dev-loading="true"] .dev-api-key-card::after {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 4.15rem;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 42%, transparent) 0 28%,
      transparent 28% 34%,
      color-mix(in srgb, var(--border) 32%, transparent) 34% 100%
    )
    0.75rem 0.9rem / calc(100% - 1.5rem) 0.72rem no-repeat,
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 52%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 52%, transparent)
    )
    0.75rem 2.08rem / calc(100% - 1.5rem) 1.2rem no-repeat,
    color-mix(in srgb, var(--card) 82%, var(--surface-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
  content: "";
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.dev-layout[data-dev-loading="true"] .dev-api-key-card .dev-api-pass-mark {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  color: color-mix(in srgb, var(--primary) 58%, transparent);
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.dev-layout[data-dev-loading="true"] .dev-api-actions {
  opacity: 1;
}

.dev-layout[data-dev-loading="true"] .dev-api-actions a {
  position: relative;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}

.dev-layout[data-dev-loading="true"] .dev-api-actions a::before {
  position: absolute;
  inset: 50% 0.6rem auto;
  height: 0.62rem;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 50%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 50%, transparent)
    );
  content: "";
  transform: translateY(-50%);
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.dev-layout[data-dev-loading="true"] #devEditNameButton,
.dev-layout[data-dev-loading="true"] #devLogoutButton,
.dev-layout[data-dev-loading="true"] .dev-usage-card-heading button,
.dev-layout[data-dev-loading="true"] #devTotpSetupButton,
.dev-layout[data-dev-loading="true"] #devPasskeySetupButton,
.dev-layout[data-dev-loading="true"] .admin-security-form {
  pointer-events: none;
  opacity: 0.42;
}

.dev-danger-zone {
  border-color: color-mix(in srgb, var(--degraded) 28%, var(--border));
}

.dev-support-card {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.dev-support-card > .section-heading {
  padding-bottom: 0;
  border-bottom: 0;
}

.dev-support-card a {
  color: var(--primary);
  font-weight: 900;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

.dev-support-card a:hover {
  color: var(--primary-hover);
}

.dev-attribution-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.dev-attribution-callout > div { display: grid; gap: 0.25rem; }
.dev-attribution-callout strong { color: var(--text); }
.dev-attribution-callout p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.dev-attribution-callout .mast-powered-by { color: var(--muted); }

@media (max-width: 640px) {
  .dev-attribution-callout { grid-template-columns: minmax(0, 1fr); }
}

.dev-danger-zone .section-heading {
  align-items: flex-start;
}

.dev-danger-zone h3 {
  color: var(--degraded);
}

.dev-delete-account-form {
  max-width: 28rem;
  margin-top: 1rem;
}

.dev-delete-account-form .admin-danger-button {
  justify-self: start;
  min-width: 11rem;
  border-color: color-mix(in srgb, var(--degraded) 58%, var(--border));
  background: color-mix(in srgb, var(--degraded) 10%, var(--card));
  color: var(--degraded);
}

.dev-delete-account-form .admin-danger-button:not(:disabled) {
  border-color: var(--degraded);
  background: var(--degraded);
  color: #fff;
}

.dev-delete-account-form .admin-danger-button:hover:not(:disabled),
.dev-delete-account-form .admin-danger-button:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 86%, #000);
  background: color-mix(in srgb, var(--degraded) 86%, #000);
  color: #fff;
}

.dev-delete-account-form .admin-danger-button:disabled {
  border-color: color-mix(in srgb, var(--degraded) 34%, var(--border));
  background: color-mix(in srgb, var(--degraded) 7%, var(--card));
  color: color-mix(in srgb, var(--degraded) 58%, var(--muted));
}

.dev-verification-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-color: color-mix(in srgb, var(--stale) 38%, var(--border));
  background: color-mix(in srgb, var(--alert-soft) 42%, var(--card));
}

.dev-verification-card[hidden] {
  display: none;
}

.dev-verification-card h3,
.dev-verification-card p {
  margin: 0;
}

.dev-verification-card p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.dev-verification-card .license-button {
  width: fit-content;
  min-width: 12rem;
  flex: 0 0 auto;
}

.dev-policy-card {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--card));
}

.dev-policy-card[hidden] {
  display: none;
}

.dev-policy-list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dev-policy-list li {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
}

.dev-policy-list a {
  color: var(--primary);
  font-weight: 900;
  text-decoration: none;
}

.dev-policy-list a:hover {
  text-decoration: underline;
}

.dev-policy-list span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.dev-policy-form {
  margin-top: 0.9rem;
}

.dev-policy-form button {
  justify-self: start;
  width: fit-content;
  padding-inline: 1.25rem;
}

.dev-policy-form button:disabled {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--muted) 7%, var(--surface-soft));
  color: color-mix(in srgb, var(--muted) 70%, var(--card));
  cursor: not-allowed;
  box-shadow: none;
}

.dev-schedule-progress {
  overflow: hidden;
}

.dev-schedule-progress-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}

.dev-schedule-progress-meta > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 1rem;
}

.dev-schedule-progress-meta > div + div {
  border-left: 1px solid var(--border);
}

.dev-schedule-progress-meta span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-schedule-progress-meta strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.35;
}

.dev-schedule-progress-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dev-schedule-run-count), minmax(0, 1fr));
  min-width: 0;
  margin-top: 0.25rem;
}

.dev-schedule-progress-track::before {
  position: absolute;
  top: 0.42rem;
  right: calc(50% / var(--dev-schedule-run-count));
  left: calc(50% / var(--dev-schedule-run-count));
  height: 2px;
  background: color-mix(in srgb, var(--border) 78%, var(--muted));
  content: "";
}

.dev-schedule-progress-run {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  justify-items: center;
}

.dev-schedule-progress-run i {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--card);
}

.dev-schedule-progress-run[data-status="passed"] i {
  border-color: var(--good);
  background: var(--good);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--good) 13%, transparent);
}

.dev-schedule-progress-run[data-status="upcoming"] i {
  border-color: var(--primary);
}

.dev-schedule-progress-run strong {
  color: var(--text);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dev-schedule-progress-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .dev-verification-card {
    display: grid;
    align-items: stretch;
  }

  .dev-verification-card .license-button {
    width: 100%;
  }

  .dev-policy-list li {
    display: grid;
    align-items: start;
    justify-content: stretch;
  }

  .dev-policy-list span {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .dev-layout {
    gap: 0.7rem;
  }

  .dev-layout .docs-hero {
    gap: 0.28rem;
    padding-bottom: 0.25rem;
  }

  .dev-layout .docs-hero h1 {
    width: 100%;
    font-size: clamp(2.05rem, 10vw, 2.65rem);
    line-height: 0.96;
  }

  .dev-layout .back-link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
  }

  .dev-layout .docs-card {
    gap: 0.74rem;
  }

  .dev-layout .section-heading {
    gap: 0.55rem;
  }

  .dev-layout .admin-command-card .section-heading,
  .dev-layout .admin-dev-card .section-heading,
  .dev-layout .admin-auth-card .section-heading {
    display: grid;
    gap: 0.75rem;
    align-items: stretch;
  }

  .dev-layout .admin-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .dev-layout .admin-actions > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .dev-layout .admin-command-card .admin-actions,
  .dev-layout .admin-auth-card .admin-actions,
  .dev-layout .admin-dev-card .dev-api-actions {
    justify-self: stretch;
    width: 100%;
  }

  .dev-layout .admin-command-card .admin-actions button,
  .dev-layout .admin-auth-card .admin-actions button {
    min-height: 2.75rem;
    border-radius: 8px;
    gap: 0.5rem;
  }

  .dev-layout .admin-command-card .section-heading {
    gap: 0.62rem;
  }

  .dev-layout .admin-command-card .section-heading::after {
    opacity: 0.58;
  }

  .dev-account-title-row {
    gap: 0.45rem;
  }

  .dev-account-edit-button {
    width: 1.82rem;
    min-width: 1.82rem;
    height: 1.82rem;
    min-height: 1.82rem;
  }

  .dev-layout .dev-api-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    align-items: center;
    padding: 0.22rem;
    border-radius: 8px;
  }

  .dev-layout .dev-api-actions > * {
    width: 100%;
    min-height: 2.55rem;
    padding-inline: 0.35rem;
    font-size: 0.74rem;
  }

  .dev-usage-card-heading {
    margin-bottom: 0.85rem;
  }

  .dev-usage-card-heading button {
    min-height: 2.5rem;
    padding-inline: 1rem;
  }

  .dev-usage-history-card {
    gap: 0.65rem;
  }

  .dev-usage-history-chart {
    min-height: 7.7rem;
    padding: 0.62rem;
  }

  .dev-usage-history-month {
    grid-template-rows: auto 3.75rem auto;
  }

  .dev-usage-history-track {
    height: 3.75rem;
    min-height: 3.75rem;
  }

  .dev-api-key-card {
    gap: 0.88rem;
  }

  .dev-api-key-card::before {
    right: -6rem;
    bottom: -6rem;
    opacity: 0.4;
  }

  .dev-api-pass-heading {
    gap: 0.62rem;
  }

  .dev-api-pass-mark {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 8px;
  }

  .dev-api-pass-mark i {
    font-size: 1.82rem;
  }

  .dev-layout .admin-command-card .admin-actions,
  .dev-layout .dev-verification-card,
  .dev-layout .admin-auth-card .admin-actions {
    grid-template-columns: 1fr;
  }

  .dev-layout .admin-security-form button {
    width: 100%;
    justify-content: center;
  }

  .dev-delete-account-form {
    max-width: none;
  }

  .dev-delete-account-form button,
  .admin-dev-drawer-form button {
    width: 100%;
  }

  .dev-drawer-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .dev-layout .admin-passkey-panel {
    gap: 0.85rem;
  }

  .dev-danger-zone {
    gap: 0.72rem;
  }

  .dev-delete-account-form {
    margin-top: 0.15rem;
  }

  .dev-layout .admin-passkey-item {
    align-items: stretch;
  }

  .dev-layout .admin-passkey-actions {
    justify-content: stretch;
  }

  .dev-schedule-progress {
    overflow-x: auto;
  }

  .dev-schedule-progress-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-schedule-progress-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-schedule-progress-meta > div {
    padding-inline: 0;
  }

  .dev-schedule-progress-meta > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .dev-schedule-progress-track {
    min-width: max(28rem, calc(var(--dev-schedule-run-count) * 5rem));
  }
}

@media (max-width: 520px) {
  .dev-layout {
    gap: 0.62rem;
    padding-inline: 0.72rem;
  }

  .dev-layout .docs-card {
    padding: 0.86rem;
  }

  .dev-layout .docs-hero h1 {
    font-size: clamp(1.98rem, 12.5vw, 2.42rem);
  }

  .dev-account-title-row {
    align-items: flex-start;
  }

  .dev-account-edit-button {
    margin-top: 0.05rem;
  }

  .dev-layout .admin-metric-grid {
    grid-template-columns: 1fr;
    gap: 0.62rem;
  }

  .dev-layout .admin-metric-card {
    gap: 0.36rem;
  }

  .dev-layout .admin-actions {
    grid-template-columns: 1fr;
  }

  .dev-layout .dev-api-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.18rem;
    border-radius: 8px;
  }

  .dev-layout .dev-api-actions > * {
    min-height: 2.5rem;
    padding-inline: 0.28rem;
  }

  .dev-license-key-field {
    grid-template-columns: 1fr;
  }

  .dev-license-key-actions {
    justify-content: stretch;
  }

  .dev-api-key-card .dev-license-key-field {
    gap: 0.56rem;
    padding: 0.62rem;
    border-radius: 8px;
  }

  .dev-license-key-title {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .dev-api-key-card .dev-license-key {
    min-height: 2.8rem;
    padding-inline: 0.7rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .dev-api-key-card .dev-license-key-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding-left: 0;
  }

  .dev-api-key-card .license-key-reveal-button,
  .dev-api-key-card .dev-license-key-actions .dev-api-copy-key,
  .dev-api-key-card .dev-license-key-actions .dev-api-mail-key {
    width: 100%;
    min-height: 2.9rem;
  }

  .dev-usage-history-chart {
    grid-template-columns: repeat(12, minmax(2.38rem, 1fr));
    gap: 0.24rem;
    min-height: 7.4rem;
    margin-inline: -0.12rem;
    padding-inline: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dev-usage-history-chart::-webkit-scrollbar {
    display: none;
  }

  .dev-usage-history-month strong {
    font-size: 0.72rem;
  }

  .dev-usage-history-month small {
    font-size: 0.62rem;
  }

  .dev-layout .admin-metric-card strong {
    font-size: clamp(1.72rem, 11.4vw, 2.3rem);
    overflow-wrap: anywhere;
  }

  .dev-usage-card-heading {
    margin-bottom: 0.68rem;
  }

  .admin-passkey-panel {
    padding: 0.68rem;
  }

  .admin-passkey-heading {
    display: grid;
    gap: 0.2rem;
    align-items: start;
  }

  .dev-danger-zone .section-heading {
    gap: 0.35rem;
  }

  .dev-danger-zone .section-heading p {
    line-height: 1.38;
  }

  .dev-delete-account-form {
    gap: 0.7rem;
    margin-top: 0;
  }

  .dev-layout .totp-qr-card img {
    width: min(11rem, 100%);
  }

  .dev-layout .totp-secret-row button {
    min-height: 2.7rem;
  }
}

@media (max-width: 380px) {
  .dev-layout {
    padding-inline: 0.58rem;
  }

  .dev-layout .docs-card {
    padding: 0.78rem;
  }

  .dev-layout .dev-api-actions > * {
    min-height: 2.42rem;
    padding-inline: 0.16rem;
    font-size: 0.67rem;
  }

  .dev-api-pass-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .dev-api-pass-mark i {
    font-size: 1.62rem;
  }

  .dev-usage-history-chart {
    grid-template-columns: repeat(12, minmax(2.24rem, 1fr));
    margin-inline: -0.22rem;
  }
}

.admin-pipeline-item {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.admin-pipeline-item-exit-clone {
  box-sizing: border-box;
  overflow: hidden;
}

.admin-pipeline-item:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-pipeline-item[data-status="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 40%, var(--border));
  background: color-mix(in srgb, var(--degraded) 7%, var(--card));
}

.admin-pipeline-item[data-status="stale"] {
  border-color: color-mix(in srgb, var(--stale) 40%, var(--border));
  background: color-mix(in srgb, var(--stale) 7%, var(--card));
}

.admin-pipeline-item[data-status="disabled"] {
  border-color: color-mix(in srgb, var(--muted) 34%, var(--border));
  background: color-mix(in srgb, var(--muted) 7%, var(--card));
  filter: grayscale(1);
  opacity: 1;
}

.admin-pipeline-item[data-refresh-state="updating"] {
  position: relative;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-soft) 72%, var(--card)),
      color-mix(in srgb, var(--surface-soft) 68%, var(--card))
    );
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent),
    0 14px 30px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}

.admin-pipeline-item[data-refresh-state="updating"] .admin-pipeline-runtime {
  color: var(--primary-hover);
}

.admin-pipeline-item[data-refresh-state="updating"] .admin-pipeline-runtime i {
  color: var(--primary);
}

.admin-pipeline-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0.6rem;
}

.admin-pipeline-select-control {
  position: relative;
  display: none;
  width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color: transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface-soft) 85%, transparent);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-pipeline-select-control i {
  font-size: 0.82rem;
  line-height: 1;
}

.admin-pipeline-list[data-selection-mode="true"] .admin-pipeline-item {
  cursor: pointer;
}

.admin-pipeline-list[data-selection-mode="true"] .admin-pipeline-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.admin-pipeline-list[data-selection-mode="true"] .admin-pipeline-select-control {
  display: inline-grid;
}

.admin-pipeline-list[data-selection-mode="true"] .admin-pipeline-actions {
  display: none;
}

.admin-pipeline-item[data-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-soft) 82%, var(--card)),
      color-mix(in srgb, var(--surface-soft) 70%, var(--card))
    );
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.admin-pipeline-item[data-selected="true"] .admin-pipeline-select-control {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.admin-pipeline-select-button.is-active {
  border-color: var(--primary-hover);
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.admin-pipeline-heading-select {
  position: relative;
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: 0;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.admin-pipeline-heading-select i {
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

.admin-pipeline-heading-select:hover,
.admin-pipeline-heading-select:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.admin-pipeline-heading-select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-heading > div {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.admin-pipeline-heading strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.12;
}

.admin-pipeline-heading .admin-pipeline-code {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-pipeline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-top: 0.18rem;
}

.admin-pipeline-facts span {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  padding: 0 0.42rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, var(--surface-soft));
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
}

.admin-pipeline-heading .admin-pipeline-badges {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.pipeline-status-badge {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.52rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.pipeline-status-badge[data-status="fresh"] {
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  color: var(--good);
}

.pipeline-status-badge[data-status="stale"] {
  border-color: color-mix(in srgb, var(--stale) 42%, var(--border));
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
}

.pipeline-status-badge[data-status="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 42%, var(--border));
  background: color-mix(in srgb, var(--degraded) 10%, var(--card));
  color: var(--degraded);
}

.pipeline-status-badge[data-status="disabled"] {
  opacity: 0.76;
}

.pipeline-event-count-badge {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
}

.pipeline-event-count-badge i {
  font-size: 0.78rem;
  line-height: 1;
}

.pipeline-new-event-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.05rem;
  border-radius: 999px;
  background: var(--good);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--good) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--good) 42%, transparent);
}

.admin-pipeline-item[data-new-events="true"] .pipeline-event-count-badge {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: color-mix(in srgb, var(--good) 80%, var(--text));
}

.admin-pipeline-runtime {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-pipeline-runtime span:not(.admin-pipeline-runtime-trend) {
  font-family: var(--font-display);
  font-weight: 800;
}

.admin-pipeline-runtime i {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1;
}

.admin-pipeline-runtime-trend {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  padding: 0 0.42rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.admin-pipeline-runtime-trend[data-trend="increase"] {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  background: color-mix(in srgb, var(--degraded) 9%, var(--card));
  color: var(--degraded);
}

.admin-pipeline-runtime-trend[data-trend="decrease"] {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--card));
  color: var(--good);
}

.admin-pipeline-runtime-history {
  display: grid;
  width: 100%;
  gap: 0.22rem;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.admin-pipeline-runtime-history-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.36rem 0.5rem 0;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-pipeline-runtime-delta {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.admin-pipeline-runtime-delta[data-trend="increase"] {
  color: var(--degraded);
}

.admin-pipeline-runtime-delta[data-trend="decrease"] {
  color: var(--good);
}

.admin-pipeline-runtime-sparkline {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateX(0);
}

.admin-pipeline-runtime-chart {
  position: relative;
  height: 2.45rem;
  overflow: hidden;
}

.admin-pipeline-runtime-dot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(0);
}

.admin-pipeline-runtime-chart.is-shifting .admin-pipeline-runtime-sparkline,
.admin-pipeline-runtime-chart.is-shifting .admin-pipeline-runtime-dot-layer {
  animation: pipelineRuntimeShiftIn 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pipelineRuntimeShiftIn {
  from {
    transform: translateX(var(--pipeline-runtime-shift, 20%));
  }

  to {
    transform: translateX(0);
  }
}

.admin-pipeline-runtime-dot {
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  transform: translate(-50%, -50%);
}

.admin-pipeline-runtime-sparkline path[data-area] {
  fill: color-mix(in srgb, var(--primary) 13%, transparent);
}

.admin-pipeline-runtime-sparkline path[data-line] {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.admin-pipeline-runtime-history[data-trend="increase"] .admin-pipeline-runtime-sparkline path[data-area] {
  fill: color-mix(in srgb, var(--degraded) 12%, transparent);
}

.admin-pipeline-runtime-history[data-trend="increase"] .admin-pipeline-runtime-sparkline path[data-line] {
  stroke: var(--degraded);
}

.admin-pipeline-runtime-history[data-trend="decrease"] .admin-pipeline-runtime-sparkline path[data-area] {
  fill: color-mix(in srgb, var(--good) 12%, transparent);
}

.admin-pipeline-runtime-history[data-trend="decrease"] .admin-pipeline-runtime-sparkline path[data-line] {
  stroke: var(--good);
}

.admin-pipeline-runtime-history[data-trend="increase"] .admin-pipeline-runtime-dot {
  color: var(--degraded);
}

.admin-pipeline-runtime-history[data-trend="decrease"] .admin-pipeline-runtime-dot {
  color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
  .admin-pipeline-runtime-chart.is-shifting .admin-pipeline-runtime-sparkline,
  .admin-pipeline-runtime-chart.is-shifting .admin-pipeline-runtime-dot-layer {
    animation: none;
  }
}

.admin-pipeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-pipeline-actions .admin-icon-button {
  position: relative;
  width: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
}

.admin-pipeline-select-control::after,
.admin-pipeline-actions .admin-icon-button::after {
  position: absolute;
  z-index: 20;
  width: max-content;
  max-width: min(15rem, 72vw);
  padding: 0.42rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--card) 94%, black);
  box-shadow: 0 12px 28px color-mix(in srgb, black 28%, transparent);
  color: var(--text);
  content: attr(aria-label);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-transform: none;
  transform: translate(-50%, 0.25rem);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  white-space: normal;
}

.admin-pipeline-actions .admin-icon-button::after {
  bottom: calc(100% + 0.55rem);
  left: 50%;
}

.admin-pipeline-select-control::after {
  top: calc(100% + 0.45rem);
  left: 50%;
}

.admin-pipeline-select-control:hover::after,
.admin-pipeline-select-control:focus-visible::after,
.admin-pipeline-actions .admin-icon-button:hover::after,
.admin-pipeline-actions .admin-icon-button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.admin-pipeline-actions .admin-icon-button i,
.admin-pipeline-bulk-button i {
  font-size: 0.95rem;
  line-height: 1;
}

.admin-pipeline-status-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.65rem;
  margin: 0;
}

.admin-pipeline-health {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(24rem, 2fr);
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card));
}

.admin-pipeline-health[data-status="healthy"] {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
}

.admin-pipeline-health[data-status="attention"] {
  border-color: color-mix(in srgb, var(--degraded) 42%, var(--border));
}

.admin-pipeline-health > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-pipeline-health-heading {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.25rem 0.4rem;
}

.admin-pipeline-health-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.admin-pipeline-health-indicator {
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--stale);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--stale) 14%, transparent);
}

.admin-pipeline-health[data-status="healthy"] .admin-pipeline-health-indicator {
  background: var(--good);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--good) 14%, transparent);
}

.admin-pipeline-health[data-status="attention"] .admin-pipeline-health-indicator {
  background: var(--degraded);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--degraded) 14%, transparent);
}

.admin-pipeline-health-heading strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-pipeline-health-heading > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-pipeline-health-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.admin-pipeline-health-metrics .admin-pipeline-status-chip {
  min-height: 3.7rem;
  padding: 0.58rem 0.62rem;
}

.admin-pipeline-health-metrics .admin-pipeline-status-chip strong {
  font-size: 1.05rem;
}

.admin-pipeline-run-history-button strong {
  display: inline-grid;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0 0.42rem;
  place-items: center;
  border-radius: 999px;
  background: var(--control-active);
  color: var(--control-active-text);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
}

.admin-pipeline-run-history-modal {
  width: min(46rem, calc(100vw - 2rem));
}

.admin-pipeline-schedule-modal {
  width: min(34rem, calc(100vw - 2rem));
  height: min(44rem, calc(100vh - 2rem));
  grid-template-rows: minmax(0, 1fr);
}

.admin-pipeline-schedule-modal form {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-pipeline-schedule-body {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.admin-pipeline-schedule-enabled {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 900;
}

.admin-pipeline-schedule-enabled input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

.admin-pipeline-schedule-stale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 7rem) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 900;
}

.admin-pipeline-schedule-stale input,
.admin-pipeline-schedule-stale select {
  width: 100%;
  min-height: 2.35rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 900;
}

.admin-pipeline-schedule-order {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.admin-pipeline-schedule-order select {
  cursor: pointer;
}

.admin-pipeline-schedule-stale em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

.admin-pipeline-schedule-list {
  display: grid;
  gap: 0.65rem;
}

.admin-pipeline-schedule-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
}

.admin-pipeline-schedule-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-pipeline-schedule-run label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-schedule-run input {
  width: 100%;
  min-height: 2.45rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 900;
}

.admin-pipeline-schedule-add,
.admin-pipeline-schedule-modal .admin-event-modal-footer button {
  min-height: 2.45rem;
  padding: 0 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-pipeline-schedule-add {
  justify-self: start;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.admin-pipeline-schedule-modal .admin-event-modal-footer button[type="submit"] {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  min-height: 2.1rem;
  padding: 0 0.8rem;
  font-size: 0.82rem;
}

.admin-pipeline-schedule-modal .admin-event-modal-footer button:disabled {
  cursor: progress;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .admin-pipeline-schedule-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
}

@media (max-width: 560px) {
  .admin-pipeline-schedule-stale {
    grid-template-columns: 1fr;
  }

  .admin-pipeline-schedule-stale input {
    max-width: 8rem;
  }
}

.admin-pipeline-run-history-list {
  display: grid;
  gap: 0.7rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.admin-pipeline-memory-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1rem 1rem 0;
}

.admin-pipeline-memory-trend {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-pipeline-memory-trend-heading {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.admin-pipeline-memory-trend-heading strong {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-pipeline-memory-trend-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-pipeline-memory-trend-chart {
  position: relative;
  height: 3.75rem;
}

.admin-pipeline-memory-trend-sparkline,
.admin-pipeline-memory-trend-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.admin-pipeline-memory-trend-sparkline {
  overflow: visible;
}

.admin-pipeline-memory-trend-sparkline path {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.admin-pipeline-memory-trend[data-tone="pipeline"] .admin-pipeline-memory-trend-sparkline path {
  stroke: var(--good);
}

.admin-pipeline-memory-trend-dot {
  position: absolute;
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.admin-pipeline-memory-trend[data-tone="pipeline"] .admin-pipeline-memory-trend-dot {
  border-color: var(--good);
}

.admin-pipeline-memory-trend-dot:hover,
.admin-pipeline-memory-trend-dot:focus-visible {
  width: 0.8rem;
  height: 0.8rem;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.admin-pipeline-memory-trend-detail {
  min-height: 1rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 780;
}

.admin-pipeline-run-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
}

.admin-pipeline-run-item {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.admin-pipeline-run-item[data-status="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 35%, var(--border));
}

.admin-pipeline-run-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.admin-pipeline-run-heading strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 900;
}

.admin-pipeline-run-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-pipeline-run-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.9rem, 1fr));
  gap: 0.45rem;
}

.admin-pipeline-run-chips .admin-pipeline-status-chip {
  min-height: auto;
  padding: 0.5rem 0.55rem;
}

.admin-pipeline-run-chips .admin-pipeline-status-chip strong {
  font-size: 1rem;
}

.admin-pipeline-run-chips .admin-pipeline-status-chip span {
  font-size: 0.58rem;
}

.admin-pipeline-card {
  display: grid;
  gap: 0.85rem;
}

.admin-pipeline-heading-row {
  align-items: start;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.admin-pipeline-heading-row p {
  margin: 0.16rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-pipeline-control-bar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--card));
}

.admin-pipeline-search {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-search input {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 1rem;
  text-transform: none;
}

.admin-pipeline-search input:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.admin-pipeline-empty-state {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.admin-pipeline-status-chip {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-pipeline-status-chip strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

.admin-pipeline-status-chip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pipeline-status-skeleton {
  pointer-events: none;
}

.admin-pipeline-status-skeleton strong,
.admin-pipeline-status-skeleton span::before {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--border) 50%, transparent),
      color-mix(in srgb, var(--primary) 12%, var(--surface-soft)),
      color-mix(in srgb, var(--border) 50%, transparent)
    );
  color: transparent;
  animation: admin-skeleton-pulse 1.1s ease-in-out infinite;
}

.admin-pipeline-status-skeleton strong {
  width: min(4.2rem, 72%);
  height: 1.35rem;
}

.admin-pipeline-status-skeleton span {
  color: transparent;
}

.admin-pipeline-status-skeleton span::before {
  width: min(5.8rem, 88%);
  height: 0.68rem;
  content: "";
}

.admin-pipeline-status-chip[data-status="fresh"] {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  background: color-mix(in srgb, var(--good) 8%, var(--card));
}

.admin-pipeline-status-chip[data-status="stale"] {
  border-color: color-mix(in srgb, var(--stale) 35%, var(--border));
  background: color-mix(in srgb, var(--stale) 8%, var(--card));
}

.admin-pipeline-status-chip[data-status="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 35%, var(--border));
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
}

.admin-pipeline-status-chip[data-status="disabled"] {
  opacity: 0.76;
}

.admin-pipeline-actions .admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  color: var(--degraded);
}

.admin-pipeline-actions .admin-danger-button:hover:not(:disabled) {
  border-color: var(--degraded);
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

@media (max-width: 1120px) {
  .admin-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dev-filters,
  .admin-subscription-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dev-item {
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1fr);
  }

  .admin-dev-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .admin-tabs {
    border-radius: 14px;
  }

  .admin-tabs button {
    min-width: max-content;
    flex: 1 0 auto;
  }

  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .admin-metric-card {
    min-width: 0;
  }

  .admin-metric-card > span {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .admin-metric-card > strong {
    font-size: clamp(1.9rem, 10vw, 2.35rem);
  }

  .admin-metric-card p {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .admin-command-card .section-heading,
  .admin-social-section > .section-heading,
  .admin-chart-card .section-heading,
  .admin-subscriptions-card .section-heading,
  .admin-emails-card .section-heading,
  .admin-dev-item,
  .admin-pipeline-heading {
    align-items: stretch;
  }

  .admin-chart-card .section-heading,
  .admin-subscriptions-card .section-heading,
  .admin-emails-card .section-heading {
    display: grid;
    gap: 0.75rem;
  }

  .admin-chart-range {
    justify-self: start;
  }

  .admin-pipeline-status-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
  }

  .admin-pipeline-health {
    grid-template-columns: 1fr;
  }

  .admin-pipeline-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pipeline-memory-trends {
    grid-template-columns: 1fr;
    padding: 0.75rem 0.75rem 0;
  }

  .admin-pipeline-run-history-list {
    padding: 0.75rem;
  }

  .admin-pipeline-run-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .admin-pipeline-run-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pipeline-status-chip {
    min-height: 4rem;
    padding: 0.58rem 0.62rem;
  }

  .admin-pipeline-status-chip strong {
    font-size: 1.15rem;
  }

  .admin-pipeline-status-chip span {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .admin-pipeline-run-chips .admin-pipeline-status-chip {
    min-height: auto;
  }

  .admin-dev-form,
  .admin-dev-filters,
  .admin-orders-table-controls,
  .admin-manual-event-form,
  .admin-manual-event-date-grid,
  .admin-social-composer,
  .admin-social-publish-setup,
  .admin-social-controls,
  .admin-subscription-summary,
  .admin-subscription-filters,
  .totp-setup-grid,
  .admin-security-form,
  .admin-dev-item {
    grid-template-columns: 1fr;
  }

  .admin-auth-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dev-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-auth-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-subscription-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-subscription-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .admin-social-form {
    gap: 0.85rem;
  }

  .admin-social-platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-social-platforms legend {
    grid-column: 1 / -1;
  }

  .admin-social-platforms label > span {
    width: 100%;
    padding-inline: 0.35rem;
    font-size: 0.68rem;
  }

  .admin-social-platform-tab-groups {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-social-platform-tabs button {
    flex: 1 1 0;
    justify-content: center;
  }

  .admin-social-thread-reply {
    grid-template-columns: 1fr;
  }

  .admin-social-thread-replies-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-social-thread-replies-heading > button {
    width: 100%;
  }

  .admin-social-form textarea {
    min-height: 12rem;
  }

  .totp-secret-row {
    grid-template-columns: 1fr;
  }

  .admin-actions,
  .admin-manual-event-intake-actions,
  .admin-manual-event-actions,
  .admin-dev-actions,
  .admin-subscription-actions {
    justify-content: flex-start;
  }

  .admin-dev-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-actions > *,
  .admin-manual-event-intake-actions > *,
  .admin-manual-event-actions > *,
  .admin-dev-actions > *,
  .admin-subscription-actions > *,
  .admin-passkey-item button {
    width: 100%;
  }

  .admin-dev-item {
    position: relative;
    gap: 0.7rem;
    padding: 0.8rem;
  }

  .admin-dev-heading {
    padding-right: 2.85rem;
  }

  .admin-dev-actions {
    gap: 0.5rem;
    align-items: center;
  }

  .admin-dev-actions select,
  .admin-dev-actions select[data-dev-plan] {
    width: 100%;
    min-width: 0;
  }

  .admin-command-card .section-heading,
  .admin-social-section > .section-heading {
    display: grid;
    gap: 0.85rem;
  }

  .admin-pipeline-card .admin-pipeline-bulk-actions {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .admin-pipeline-control-bar {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.55rem;
  }

  .admin-pipeline-action-cluster {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
  }

  .admin-pipeline-bulk-button,
  .admin-pipeline-heading-select {
    width: 100%;
    min-width: 0;
  }

  .admin-pipeline-item {
    gap: 0.55rem;
    padding: 0.75rem;
  }

  .admin-pipeline-list:not([data-selection-mode="true"]) .admin-pipeline-select-control {
    display: none;
  }

  .admin-pipeline-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-pipeline-facts {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    scrollbar-width: none;
  }

  .admin-pipeline-facts::-webkit-scrollbar {
    display: none;
  }

  .admin-pipeline-facts span {
    flex: 0 0 auto;
  }

  .admin-pipeline-badges {
    justify-content: flex-end;
  }

  .admin-pipeline-item p {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .admin-pipeline-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
    gap: 0.45rem;
  }

  .admin-pipeline-actions > * {
    width: 100%;
  }

  .admin-pipeline-actions .admin-icon-button {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
  }

  .admin-dev-menu {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
  }

  .admin-dev-actions .admin-dev-menu {
    width: auto;
  }

  .admin-dev-menu summary {
    width: 2.35rem;
    min-width: 2.35rem;
  }

  .admin-dev-menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: min(14rem, calc(100vw - 2rem));
    margin-top: 0;
  }

  .admin-auth-status-card {
    min-height: 5.7rem;
    padding: 0.72rem;
  }

  .admin-passkey-item,
  .admin-passkey-heading {
    display: grid;
    align-items: stretch;
  }

  .admin-passkey-remove-form {
    grid-template-columns: 1fr;
  }

  .admin-hit-chart {
    min-height: 0;
    padding: 0.2rem 0;
  }

  .admin-line-chart-surface {
    height: 6.4rem;
  }

  .admin-line-chart-legend {
    gap: 0.35rem 0.65rem;
    font-size: 0.68rem;
  }

  .admin-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .admin-breakdown-card {
    min-height: 0;
  }

  .admin-breakdown-card .section-heading {
    min-height: 0;
  }

  .admin-breakdown-list {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .admin-breakdown-donut-chart {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .admin-breakdown-donut {
    width: min(100%, 13rem);
  }
}

/* ==========================================================================
   Sleek Admin Dashboard Shell
   ========================================================================== */

.admin-layout:not(.dev-layout) {
  width: min(100%, 92rem);
  max-width: none;
  min-height: 100svh;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem;
}

.admin-shell-sidebar {
  position: sticky;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  height: calc(100svh - 6rem);
  max-height: calc(100svh - 6rem);
  min-height: 0;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent)),
    var(--card);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow) 66%, transparent);
}

.admin-shell-navigation {
  display: contents;
}

.admin-shell-footer-actions {
  display: grid;
  align-self: end;
  gap: 0.5rem;
}

.admin-shell-back-link,
.admin-shell-refresh-button,
.admin-shell-logout-button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-shell-content {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
}

.admin-shell-sidebar .admin-tabs {
  position: static;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-y: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.admin-shell-sidebar .admin-tabs button {
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 2.85rem;
  width: 100%;
  padding: 0 0.78rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  letter-spacing: 0;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-shell-sidebar .admin-tabs button i {
  width: 1.05rem;
  font-size: 0.95rem;
  text-align: center;
}

.admin-shell-sidebar .admin-tabs .admin-tab-count {
  margin-left: auto;
}

.admin-shell-sidebar .admin-tabs button:hover,
.admin-shell-sidebar .admin-tabs button:focus-visible {
  transform: translateX(0.08rem);
}

.admin-shell-sidebar .admin-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.admin-shell-sidebar .admin-tabs .admin-tab-attention-dot {
  top: 50%;
  right: 0.72rem;
  width: 0.68rem;
  height: 0.68rem;
  border-width: 2px;
  box-shadow:
    0 0 0 0.13rem color-mix(in srgb, var(--degraded) 18%, transparent),
    0 0.25rem 0.75rem color-mix(in srgb, var(--degraded) 26%, transparent);
  transform: translateY(-50%);
}

.admin-shell-back-link,
.admin-shell-refresh-button,
.admin-shell-logout-button {
  min-height: 2.55rem;
  padding: 0 0.78rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-shell-back-link {
  text-decoration: none;
}

.admin-shell-back-link,
.admin-shell-refresh-button,
.admin-shell-logout-button {
  width: 100%;
  justify-content: flex-start;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-shell-refresh-button:hover:not(:disabled),
.admin-shell-refresh-button:focus-visible,
.admin-shell-logout-button:hover,
.admin-shell-logout-button:focus-visible,
.admin-shell-back-link:hover,
.admin-shell-back-link:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
  transform: translateY(-1px);
}

.admin-shell-refresh-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.admin-command-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--primary) 5%, var(--card)));
}

.admin-command-card .section-heading {
  gap: 1rem;
  align-items: start;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.admin-operations-section {
  display: grid;
  gap: 0.95rem;
}

.admin-operations-section > .section-heading {
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  border-bottom: 0;
}

.admin-operations-section > .section-heading > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.admin-operations-section h3 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-operations-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-operations-section > .admin-schedule-progress {
  margin-top: 0;
}

.admin-dashboard-priority {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(18rem, 0.72fr);
  gap: 0.85rem;
  align-items: stretch;
}

.admin-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-risk-card {
  --admin-card-accent: var(--primary);
  position: relative;
  display: grid;
  min-height: 6.85rem;
  gap: 0.28rem;
  padding: 0.85rem;
  overflow: hidden;
  width: 100%;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-risk-card-primary {
  min-height: 8.3rem;
}

.admin-risk-card[data-risk-tone="degraded"] {
  --admin-card-accent: var(--degraded);
}

.admin-risk-card[data-risk-tone="stale"],
.admin-risk-card[data-risk-tone="disabled"] {
  --admin-card-accent: var(--stale);
}

.admin-risk-card[data-risk-tone="active"],
.admin-risk-card[data-risk-tone="upcoming"] {
  --admin-card-accent: var(--good);
}

.admin-risk-card > span,
.admin-attention-card .section-heading span,
.admin-trend-panel-heading span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-risk-card > span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.admin-risk-card > span::before {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-card-accent);
  box-shadow: 0 0 0 0.2rem color-mix(
    in srgb,
    var(--admin-card-accent) 13%,
    transparent
  );
  content: "";
}

.admin-risk-card > strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1;
}

.admin-risk-card-primary > strong {
  font-size: clamp(2.35rem, 5vw, 3.25rem);
}

.admin-risk-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.28;
}

.admin-risk-card::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.68rem;
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  content: "→";
  font-family: var(--font-ui);
  font-size: 0.72rem;
  opacity: 0;
  transform: translateX(-0.18rem);
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.admin-risk-card:hover,
.admin-risk-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
  transform: translateY(-0.08rem);
}

.admin-risk-card:hover::after,
.admin-risk-card:focus-visible::after {
  color: var(--primary);
  opacity: 1;
  transform: translateX(0);
}

.admin-telemetry-card {
  display: grid;
  gap: 0.95rem;
}

.admin-render-card {
  display: grid;
  gap: 0.85rem;
}

.admin-render-card > .section-heading {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-render-card > .section-heading > div:first-child {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.admin-render-card .admin-card-title-with-icon {
  line-height: 1.15;
}

.admin-card-title-with-icon > span {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: inherit;
  text-transform: none;
}

.admin-render-card .admin-card-title-with-icon > i {
  align-self: center;
  width: 1.2rem;
  font-size: 1.08rem;
}

.admin-render-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(9.5rem, 1fr));
  gap: 0.72rem;
}

.admin-render-refresh-button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-soft);
}

.admin-render-refresh-button:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-soft));
}

.admin-telemetry-card .section-heading {
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  border-bottom: 0;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(9.5rem, 1fr));
  gap: 0.72rem;
  align-items: stretch;
}

.admin-metric-card {
  min-width: 0;
  min-height: 5.2rem;
  padding: 0.72rem 0.82rem;
  gap: 0.18rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
}

.admin-metric-card > strong {
  font-size: clamp(1.42rem, 2vw, 1.85rem);
}

.admin-metric-card > span {
  font-size: 0.6rem;
}

.admin-metric-card p {
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.22;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .admin-render-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-attention-card {
  gap: 0.8rem;
  min-height: 100%;
}

.admin-attention-list {
  display: grid;
  gap: 0.55rem;
}

.admin-attention-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.admin-attention-content {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

.admin-attention-item[data-status="degraded"] {
  border-color: color-mix(in srgb, var(--degraded) 30%, var(--border));
  background: color-mix(in srgb, var(--degraded) 6%, var(--surface-soft));
}

.admin-attention-item[data-status="stale"] {
  border-color: color-mix(in srgb, var(--stale) 30%, var(--border));
}

.admin-attention-item[data-status="error"] {
  border-color: color-mix(in srgb, var(--degraded) 38%, var(--border));
  background: color-mix(in srgb, var(--degraded) 7%, var(--surface-soft));
}

.admin-attention-item[data-status="suggestion"] {
  border-color: color-mix(in srgb, var(--stale) 34%, var(--border));
  background: color-mix(in srgb, var(--stale) 6%, var(--surface-soft));
}

.admin-attention-item strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-attention-item span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-attention-status {
  display: inline-flex;
  align-self: center;
  min-height: 1.45rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.48rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  background: var(--card);
  flex: 0 0 auto;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-attention-item[data-status="degraded"] .admin-attention-status {
  border-color: color-mix(in srgb, var(--degraded) 38%, var(--border));
  background: color-mix(in srgb, var(--degraded) 10%, var(--card));
  color: var(--degraded);
}

.admin-attention-item[data-status="stale"] .admin-attention-status {
  border-color: color-mix(in srgb, var(--stale) 38%, var(--border));
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
}

.admin-attention-item[data-status="disabled"] .admin-attention-status {
  opacity: 0.8;
}

.admin-attention-item[data-status="error"] .admin-attention-status {
  border-color: color-mix(in srgb, var(--degraded) 38%, var(--border));
  background: color-mix(in srgb, var(--degraded) 10%, var(--card));
  color: var(--degraded);
}

.admin-attention-item[data-status="suggestion"] .admin-attention-status {
  border-color: color-mix(in srgb, var(--stale) 38%, var(--border));
  background: color-mix(in srgb, var(--stale) 10%, var(--card));
  color: var(--stale);
}

.admin-attention-item-social {
  grid-template-columns: minmax(0, 1fr) auto auto;
  max-height: 18rem;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    max-height 0.16s ease,
    padding 0.16s ease,
    border-width 0.16s ease;
}

.admin-attention-item-social.is-dismissing {
  max-height: 0;
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-0.2rem);
  overflow: hidden;
}

.admin-attention-item-social .admin-attention-content span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-attention-social-actions {
  gap: 0;
}

.admin-attention-social-actions button {
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.admin-attention-social-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--degraded) 30%, var(--border));
  background: color-mix(in srgb, var(--degraded) 8%, var(--card));
  color: var(--degraded);
}

.admin-attention-details {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-attention-details summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 850;
}

.admin-attention-details .admin-raw-body {
  margin: 0.65rem 0 0;
  background: var(--card);
}

.admin-attention-details .admin-raw-body pre {
  max-height: 13rem;
  color: var(--text);
}

.admin-attention-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.admin-attention-actions button,
.admin-attention-actions a {
  display: inline-grid;
  width: 2.3rem;
  min-width: 2.3rem;
  min-height: 2.3rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.admin-attention-actions button:hover:not(:disabled),
.admin-attention-actions a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.admin-attention-actions button:disabled {
  cursor: progress;
  opacity: 0.62;
}

.admin-attention-empty {
  margin: 0;
  padding: 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 850;
  text-align: left;
}

button.admin-attention-empty {
  cursor: pointer;
}

button.admin-attention-empty:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
}

.admin-attention-more {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  padding-block: 0.7rem;
  text-align: center;
}

.admin-trend-card,
.admin-audience-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  height: 100%;
  min-height: 20rem;
}

.admin-trend-panels,
.admin-trend-panel {
  display: grid;
  min-height: 0;
}

.admin-trend-panels {
  align-content: stretch;
  height: 100%;
  margin-top: 0;
}

.admin-trend-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100%;
}

.admin-analysis-card {
  display: grid;
  gap: 0.85rem;
}

.admin-analysis-card > .section-heading {
  margin-bottom: 0;
  padding: 0;
  border-bottom: 0;
}

.admin-trend-card .section-heading,
.admin-audience-card .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  align-content: start;
  grid-template-rows: minmax(2.7rem, auto) auto;
  min-height: 5.25rem;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-trend-card .section-heading > div:first-child,
.admin-audience-card .section-heading > div:first-child {
  display: grid;
  align-content: start;
  gap: 0.12rem;
}

.admin-trend-controls {
  display: grid;
  grid-template-columns: minmax(13.25rem, max-content) minmax(12rem, max-content);
  gap: 0.38rem;
  width: 100%;
  justify-content: space-between;
}

.admin-trend-card .admin-chart-range {
  padding: 0.2rem;
}

.admin-trend-controls .admin-chart-range {
  width: 100%;
}

.admin-trend-controls .admin-chart-range button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 1.8rem;
  padding-inline: 0.62rem;
  font-size: 0.72rem;
  text-align: center;
  white-space: nowrap;
}

.admin-trend-controls .admin-chart-range button[data-chart-range-value="month"] {
  flex-grow: 1.2;
  min-width: 3.35rem;
}

.admin-trend-metric-toggle {
  display: grid;
  grid-template-columns: repeat(4, minmax(4.8rem, 1fr));
}

.admin-trend-panel[hidden],
.admin-chart-range[hidden] {
  display: none;
}

.admin-trend-panel-heading {
  display: none;
}

.admin-trend-panel-heading h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.admin-trend-card .admin-hit-chart {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.42rem;
  height: 100%;
  min-height: 0;
  padding-top: 0;
}

.admin-trend-card .admin-line-chart-surface {
  height: 100%;
  min-height: clamp(13.5rem, 20vw, 17rem);
}

.admin-breakdown-grid {
  margin-top: 0.1rem;
}

.admin-analysis-card .admin-breakdown-grid {
  margin-top: 0;
}

.admin-tab-stack,
.admin-pipeline-card,
.admin-dev-card,
.admin-social-section,
.admin-subscriptions-card,
.admin-emails-card,
.admin-auth-card {
  min-width: 0;
}

.admin-tab-stack > .section-heading {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-tab-stack > .section-heading > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.admin-tab-stack > .section-heading h3,
.admin-tab-stack > .section-heading p {
  margin: 0;
}

.admin-tab-stack > .section-heading p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-tab-card {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
}

.admin-government-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-government-filters {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.35fr);
  gap: 0.7rem;
}

.admin-government-filters label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-government-filters input,
.admin-government-filters select,
.admin-government-request-actions textarea {
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.admin-government-request-list,
.admin-government-request {
  display: grid;
  gap: 0.75rem;
}

.admin-government-request {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 1rem;
}

.admin-government-request[data-status="pending_review"] {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

.admin-government-request-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-government-request-identity {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.admin-government-request-identity strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.admin-government-request-identity a,
.admin-government-request dd a {
  color: var(--primary);
  overflow-wrap: anywhere;
}

.admin-government-request-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  padding: 0.28rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-government-request[data-status="pending_review"] .admin-government-request-status {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
}

.admin-government-request[data-status="approved"] .admin-government-request-status {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  color: var(--good);
}

.admin-government-request[data-status="rejected"] .admin-government-request-status {
  border-color: color-mix(in srgb, var(--degraded) 35%, var(--border));
  color: var(--degraded);
}

.admin-government-request dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.admin-government-request dl > div {
  display: grid;
  align-content: start;
  gap: 0.12rem;
  min-width: 0;
}

.admin-government-request dt {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-government-request dd {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.admin-government-request-explanation,
.admin-government-request-review,
.admin-government-empty {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.82rem;
  line-height: 1.55;
}

.admin-government-request-explanation {
  border-left: 3px solid var(--border);
  padding-left: 0.75rem;
}

.admin-government-request-actions {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: end;
  gap: 0.75rem;
}

.admin-government-request-actions:not(:has(textarea)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.admin-government-request-actions textarea {
  resize: vertical;
}

.admin-government-request-actions button {
  min-height: 2.75rem;
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 0.68rem 1.05rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-government-request-actions button.admin-danger-button {
  border-color: color-mix(in srgb, var(--degraded) 45%, var(--border));
  background: var(--card);
  color: var(--degraded);
}

.admin-government-request-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.admin-government-credential-panel {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}

.admin-government-credential-heading,
.admin-government-credential {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-government-credential-heading > span,
.admin-government-credential-copy > span,
.admin-government-credential-list > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-government-credential-list {
  display: grid;
  gap: 0.45rem;
}

.admin-government-credential {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 0.65rem;
}

.admin-government-credential-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.admin-government-credential-copy > span {
  overflow-wrap: anywhere;
}

.admin-government-credential-panel > button,
.admin-government-credential > button {
  min-height: 2.4rem;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  padding: 0.62rem 1rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-government-credential > button.admin-danger-button {
  color: var(--degraded);
}

@media (max-width: 1024px) {
  .admin-government-summary-grid,
  .admin-government-request dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-government-summary-grid,
  .admin-government-filters,
  .admin-government-request dl,
  .admin-government-request-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-government-request-actions button,
  .admin-government-assignment > button,
  .admin-government-conflict-panel > button {
    width: 100%;
  }

  .admin-government-credential {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell-sidebar .admin-tabs button,
  .admin-risk-card,
  .admin-risk-card::after,
  .admin-attention-actions button,
  .admin-attention-actions a {
    transition: none;
  }

  .admin-attention-item-social {
    transition: none;
  }

  .admin-shell-sidebar .admin-tabs button:hover,
  .admin-shell-sidebar .admin-tabs button:focus-visible,
  .admin-risk-card:hover,
  .admin-risk-card:focus-visible {
    transform: none;
  }
}

@media (max-width: 1180px) {
  .admin-layout:not(.dev-layout) {
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }

  .admin-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-priority {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .admin-layout:not(.dev-layout) {
    display: block;
    width: 100%;
    min-height: 100svh;
    padding: 0.75rem 0.75rem calc(5.6rem + env(safe-area-inset-bottom, 0px));
  }

  .admin-shell-sidebar {
    position: static;
    display: contents;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-shell-navigation {
    position: fixed;
    top: auto;
    right: 0.65rem;
    bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
    left: 0.65rem;
    z-index: 95;
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.1) blur(18px);
    backdrop-filter: saturate(1.1) blur(18px);
  }

  .admin-shell-footer-actions {
    display: contents;
  }

  .admin-shell-sidebar .admin-tabs {
    position: fixed;
    top: auto;
    right: 0.65rem;
    bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
    left: 0.65rem;
    z-index: 95;
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.1) blur(18px);
    backdrop-filter: saturate(1.1) blur(18px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0.45rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell-sidebar .admin-shell-navigation .admin-tabs {
    position: static;
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-admin-event-modal-open="true"] .admin-shell-navigation,
  html[data-drawer-open="true"] .admin-shell-navigation,
  html[data-drawer-open="closing"] .admin-shell-navigation {
    display: none;
  }

  .admin-shell-navigation .admin-shell-back-link {
    display: none;
  }

  .admin-shell-navigation .admin-shell-refresh-button {
    display: grid;
    grid-template-rows: 1rem auto;
    flex: 0 0 5.4rem;
    place-content: center;
    place-items: center;
    gap: 0.18rem;
    width: 5.4rem;
    min-width: 5.4rem;
    min-height: 3.35rem;
    padding: 0.35rem 0.5rem;
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 24%, transparent);
    font-size: 0.58rem;
    line-height: 1.05;
    text-align: center;
  }

  .admin-shell-navigation .admin-shell-logout-button {
    display: none;
  }

  .admin-shell-navigation .admin-shell-refresh-button i {
    font-size: 0.94rem;
    line-height: 1;
  }

  .admin-shell-navigation .admin-shell-refresh-button:hover:not(:disabled),
  .admin-shell-navigation .admin-shell-refresh-button:focus-visible {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
  }

  .admin-shell-sidebar .admin-tabs button {
    display: grid;
    grid-template-rows: 1rem auto;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 0.18rem;
    flex: 0 0 5.4rem;
    width: 5.4rem;
    min-width: 5.4rem;
    min-height: 3.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.58rem;
    line-height: 1.05;
    scroll-snap-align: center;
    text-align: center;
  }

  .admin-shell-sidebar .admin-tabs .admin-tab-attention-dot {
    top: 0.52rem;
    right: calc(50% - 0.82rem);
    width: 0.42rem;
    height: 0.42rem;
    box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--degraded) 18%, transparent);
    transform: none;
  }

  .admin-shell-sidebar .admin-tabs .admin-tab-count {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
    margin: 0;
    padding: 0 0.28rem;
    font-size: 0.52rem;
  }

  .admin-shell-sidebar .admin-tabs button i {
    width: auto;
    font-size: 0.94rem;
    line-height: 1;
    text-align: center;
  }

  .admin-shell-sidebar .admin-tabs button span:not(.admin-tab-attention-dot):not(.admin-tab-count) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-shell-content {
    gap: 0.75rem;
  }

  .admin-command-card .section-heading,
  .admin-social-section > .section-heading {
    display: grid;
    gap: 0.85rem;
  }

  .admin-dashboard-priority {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .admin-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .admin-risk-card {
    min-height: 6.5rem;
    padding: 0.72rem;
  }

  .admin-risk-card > strong {
    font-size: clamp(1.8rem, 12vw, 2.25rem);
  }

  .admin-risk-card-primary > strong {
    font-size: clamp(2rem, 13vw, 2.7rem);
  }

  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .admin-attention-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .admin-attention-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.6rem, 1fr));
  }

  .admin-attention-actions button,
  .admin-attention-actions a {
    width: 100%;
    min-height: 2.45rem;
  }

  .admin-attention-item-social {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .admin-attention-item-social .admin-attention-social-actions {
    display: flex;
    grid-column: auto;
  }

  .admin-attention-item-social .admin-attention-social-actions button {
    width: 2rem;
    min-height: 2rem;
  }

  .admin-trend-card .section-heading,
  .admin-audience-card .section-heading,
  .admin-trend-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 0;
  }

  .admin-trend-card .section-heading,
  .admin-audience-card .section-heading {
    display: grid;
    gap: 0.65rem;
    position: relative;
    z-index: 1;
  }

  .admin-trend-card,
  .admin-audience-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.85rem;
  }

  .admin-trend-panel-heading {
    display: none;
  }

  .admin-analysis-card {
    padding: 0.85rem;
  }

  .admin-trend-controls {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0.55rem;
    justify-self: stretch;
    width: 100%;
    justify-content: stretch;
  }

  .admin-trend-controls .admin-chart-range:not([hidden]) {
    display: grid;
    justify-self: stretch;
    width: 100%;
  }

  .admin-trend-controls .admin-trend-metric-toggle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-trend-controls [data-admin-trend-range]:not([hidden]) {
    grid-template-columns: 0.9fr 0.95fr 1.2fr 0.95fr;
  }

  .admin-trend-controls .admin-chart-range button[data-chart-range-value="month"] {
    min-width: 0;
  }

  .admin-trend-controls .admin-chart-range[hidden] {
    display: none;
  }

  .admin-trend-panels {
    position: relative;
    z-index: 0;
    margin-top: 0;
  }

  .admin-trend-card .admin-line-chart-surface {
    min-height: 9rem;
  }
}

@media (max-width: 420px) {
  .admin-manual-event-scope-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-manual-event-scope-entry button {
    grid-column: auto;
  }

  .admin-layout:not(.dev-layout) {
    padding-inline: 0.55rem;
  }

  .admin-shell-sidebar .admin-tabs {
    right: 0.45rem;
    left: 0.45rem;
    gap: 0.22rem;
    padding: 0.3rem 0.4rem;
  }

  .admin-shell-navigation {
    right: 0.45rem;
    left: 0.45rem;
  }

  .admin-shell-sidebar .admin-tabs button {
    min-height: 3.25rem;
  }

  .admin-risk-grid,
  .admin-metric-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-risk-card p,
  .admin-metric-card p {
    font-size: 0.72rem;
  }

  .admin-chart-range button {
    padding: 0 0.48rem;
    font-size: 0.68rem;
  }

  .admin-breakdown-donut-chart {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.72rem;
  }

  .admin-breakdown-donut {
    width: min(100%, 12.25rem);
  }

  .admin-breakdown-donut-center {
    margin-bottom: 0.95rem;
  }

  .admin-breakdown-donut-center strong {
    font-size: 2rem;
  }

  .admin-breakdown-donut-legend {
    width: 100%;
  }

  .admin-breakdown-donut-legend-item {
    grid-template-columns: minmax(0, 1fr) minmax(3.75rem, auto);
    gap: 0.5rem;
    font-size: 0.78rem;
  }

  .admin-auth-status-grid,
  .admin-auth-actions,
  .admin-dev-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-profile-image-panel {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: start;
  }

  .admin-profile-image-panel > img,
  .admin-profile-image-preview {
    width: 4.75rem;
    height: 4.75rem;
  }

  .admin-profile-image-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-browser-alert-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .admin-browser-alert-panel > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-orders-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .admin-orders-heading .admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-event-modal.admin-order-tool-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    inset: 0;
  }

  .admin-event-modal.admin-order-suggestion-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    inset: 0;
  }

  .admin-order-suggestion-modal .admin-event-modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  }

  .admin-order-suggestion-comparison {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-suggestion-footer {
    align-items: stretch;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .admin-order-suggestion-footer > div {
    width: 100%;
    margin-left: 0;
  }

  .admin-order-suggestion-footer button {
    flex: 1 1 0;
  }

  .admin-order-tool-modal .admin-event-modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  }

  .admin-order-tool-modal-body {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .admin-order-images-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-images-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-images-preview {
    width: 100%;
  }

  .admin-order-images-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-images-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-order-images-row-actions > span {
    margin-right: 0;
  }

  .admin-order-images-row-actions > button {
    width: 100%;
  }

  .admin-congress-observance-list {
    max-height: 12rem;
  }

  .admin-congress-observance-row {
    gap: 0.55rem;
    padding-inline: 0.62rem;
  }

  .admin-congress-observance-row-actions .admin-pipeline-event-pill {
    display: none;
  }

  .admin-order-tool-modal .admin-manual-event-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-tool-modal .admin-manual-event-analyze-popover .admin-manual-event-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-composer-schedule {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .admin-order-composer-schedule::after {
    display: none;
  }

  .admin-manual-event-scope-entry {
    grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
  }

  .admin-manual-event-scope-entry button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-manual-event-analyze-popover .admin-manual-event-form button {
    width: 100%;
  }

  .admin-order-tool-modal .admin-manual-event-intake-actions {
    grid-column: 1;
  }

  .admin-event-log-card .admin-event-table-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .admin-orders-table-controls,
  .admin-orders-table-controls.admin-order-filters,
  .admin-orders-table-controls.admin-social-history-controls,
  .admin-event-table-controls,
  .admin-subscription-filters,
  .admin-dev-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-orders-table,
  .admin-event-table,
  .admin-directory-table,
  .admin-social-history-table,
  .admin-subscription-table,
  .admin-email-delivery-table,
  .admin-dev-table,
  .admin-api-request-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.68rem 0.75rem;
    text-align: left;
  }

.admin-orders-table-order small,
.admin-directory-table-primary small,
.admin-directory-table-date,
.admin-event-table td {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.admin-orders-permanent-link {
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.admin-orders-permanent-link strong {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.admin-orders-permanent-link:hover strong {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.admin-orders-permanent-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-orders-permanent-link strong {
    transition: none;
  }
}

/* Keep dense Admin datasets tabular on phones while making their rows consistent. */
@media (max-width: 760px) {
  .admin-orders-table-wrap,
  .admin-event-table-wrap,
  .admin-directory-table-wrap,
  .admin-social-history-table-wrap,
  .admin-dev-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 8px;
    background: var(--card);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-orders-table,
  .admin-event-table,
  .admin-directory-table,
  .admin-social-history-table,
  .admin-subscription-table,
  .admin-email-delivery-table,
  .admin-dev-table,
  .admin-api-request-table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .admin-orders-table { min-width: 66rem; }
  .admin-event-table { min-width: 60rem; }
  .admin-directory-table { min-width: 56rem; }
  .admin-social-history-table { min-width: 64rem; }
  .admin-dev-table { min-width: 58rem; }
  .admin-api-request-table { min-width: 48rem; }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody {
    display: table-row-group;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody tr {
    display: table-row;
    height: 4.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td,
  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td[colspan] {
    display: table-cell;
    width: auto;
    padding: 0.72rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    text-align: left;
    vertical-align: middle;
  }

  :is(
    .admin-orders-table,
    .admin-event-table,
    .admin-directory-table,
    .admin-social-history-table,
    .admin-subscription-table,
    .admin-email-delivery-table,
    .admin-dev-table,
    .admin-api-request-table
  ) tbody td::before {
    content: none;
  }

  .admin-orders-table-order small,
  .admin-directory-table-primary small,
  .admin-directory-table-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-email-delivery-table tbody td:first-child {
    display: table-cell;
  }

  .admin-email-delivery-table td:first-child strong,
  .admin-email-delivery-table td:first-child small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Keep the pipeline workspace layout authoritative after legacy responsive rules. */
.admin-pipeline-control-bar {
  grid-template-columns: minmax(16rem, 1.2fr) minmax(28rem, 2fr) auto;
  align-items: end;
}

.admin-pipeline-action-cluster {
  display: flex;
  width: auto;
  align-items: center;
  gap: 0.45rem;
}

.admin-pipeline-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-pipeline-select-control::after,
.admin-pipeline-actions .admin-icon-button::after,
.admin-pipeline-heading-select::after,
.admin-pipeline-bulk-button::after {
  display: none !important;
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-sparkline path[data-area] {
  fill: color-mix(in srgb, var(--primary) 10%, transparent);
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-sparkline path[data-line] {
  stroke: color-mix(in srgb, var(--primary) 68%, var(--muted));
}

.admin-pipeline-runtime-history[data-trend] .admin-pipeline-runtime-dot {
  color: color-mix(in srgb, var(--primary) 68%, var(--muted));
}

@media (max-width: 78rem) {
  .admin-pipeline-control-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-pipeline-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 42rem) {
  .admin-pipeline-control-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-pipeline-filters {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pipeline-bulk-actions,
  .admin-pipeline-action-cluster {
    display: flex;
    width: auto;
  }

  .admin-pipeline-bulk-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .admin-pipeline-select-shell {
    flex: 0 0 auto;
    width: auto;
  }

  .admin-pipeline-heading-select {
    width: 2.75rem;
    min-width: 2.75rem;
  }

  .admin-pipeline-filters select,
  .admin-pipeline-search input,
  .admin-pipeline-bulk-button,
  .admin-pipeline-heading-select,
  .admin-pipeline-actions .admin-icon-button,
  .admin-pipeline-card-menu > summary {
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .admin-pipeline-bulk-button,
  .admin-pipeline-heading-select {
    height: 2.75rem;
  }

  .admin-pipeline-actions .admin-icon-button,
  .admin-pipeline-card-menu > summary {
    width: 2.75rem;
    min-width: 2.75rem;
  }
}