.admin-shell {
  display: grid;
  gap: 24px;
}

.admin-management-suite,
.admin-ops-suite {
  margin-top: 12px;
}

.admin-hero {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.admin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-panel {
  min-height: auto;
}

.admin-product-list,
.admin-user-list,
.admin-revenue {
  display: grid;
  /* Cap the single column to the container width (the 0 minimum stops long row
     content from blowing the grid track out to ~2000px and overflowing the
     panel — which made descriptions run off-screen with no visible ellipsis). */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  /* Make room for the overlay scrollbar (and avoid native OS cursors on thin scrollbars). */
  padding-right: 18px;
  scrollbar-gutter: stable;

  /* Hide native scrollbars (overlay scrollbar is injected via JS). */
  scrollbar-width: none;
}

.admin-product-list::-webkit-scrollbar,
.admin-user-list::-webkit-scrollbar,
.admin-revenue::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.admin-management-suite .admin-list-stack {
  max-height: 220px;
  overflow: auto;
  padding-right: 18px;
  scrollbar-gutter: stable;

  /* Hide native scrollbars (overlay scrollbar is injected via JS). */
  scrollbar-width: none;
}

.admin-management-suite .admin-list-stack::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.admin-inline-row label {
  display: grid;
  gap: 6px;
}

.admin-ui-lab {
  display: grid;
  gap: 16px;
}

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

.admin-lab-card {
  min-height: 220px;
}

.admin-lab-wide {
  display: grid;
  gap: 12px;
}

.admin-lab-table {
  overflow: auto;
}

@media (max-width: 1200px) {
  .admin-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .admin-lab-grid {
    grid-template-columns: 1fr;
  }
}

.admin-analytics .admin-panel {
  min-height: auto;
}

.admin-row,
.admin-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-row {
  cursor: pointer;
}

.admin-row.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-bg) 88%);
}

.admin-row--compact {
  cursor: default;
}

/* The text column must be allowed to shrink so its children can truncate
   instead of overflowing the (overflow:hidden) row and showing a mid-slice. */
.admin-row > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-row-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* keep the ellipsis off the panel edge */
  padding-right: 8px;
}

.admin-row-meta {
  font-size: 12px;
  color: var(--text-muted);
  /* single-line preview with ellipsis — the full description shows in the
     product detail panel. Keeps every row a clean, uniform height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* breathing room so the truncated text + ellipsis never sit flush against
     (and get clipped by) the panel's rounded right edge. */
  padding-right: 8px;
  margin-top: 3px;
  line-height: 1.4;
}

.admin-row-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.admin-sparkline {
  width: 100%;
  height: 64px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 26px rgba(2, 6, 12, 0.4);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.admin-sparkline svg {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
}

.admin-sparkline polyline {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 80%, #bfeaf2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(102, 211, 229, 0.35));
}

.admin-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-mini-table th,
.admin-mini-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-soft);
}

.admin-mini-table th {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ---- adminOLD migrated ---- */

.admin-main {
  display: grid;
  gap: 18px;
  
  /* Glass thin scrollbars (admin scope) */
  --sb-size: 3px;
  --sb-track: rgba(255, 255, 255, 0.06);
  --sb-thumb: rgba(123, 220, 255, 0.26);
  --sb-thumb-hover: rgba(123, 220, 255, 0.36);
  --sb-thumb-border: rgba(255, 255, 255, 0.12);
  --sb-track-border: rgba(255, 255, 255, 0.12);

}


/* Admin scrollbar styling */
.admin-main,
.admin-main * {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

.admin-main *::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

.admin-main *::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--sb-track-border);
}

.admin-main *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sb-thumb), rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  border: 1px solid var(--sb-thumb-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px) saturate(140%);
}

.admin-main *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sb-thumb-hover), rgba(255, 255, 255, 0.14));
}

/*
  Ultra-thin scrollbars inside collapsible groupboxes.
  Firefox only supports keyword sizing ("thin"), so the 1-2px target mainly applies to WebKit.
  We override the CSS variables locally; the global admin scrollbar rules above consume these.
*/
.admin-main details.admin-collapsible,
.admin-main details.admin-subgroup,
.admin-main .panel.admin-subgroup {
  --sb-size: 2px;
  --sb-track: rgba(255, 255, 255, 0.05);
  --sb-track-border: rgba(255, 255, 255, 0.1);
  --sb-thumb: rgba(123, 220, 255, 0.22);
  --sb-thumb-hover: rgba(123, 220, 255, 0.32);
  --sb-thumb-border: rgba(255, 255, 255, 0.1);
}

.admin-actions {
  display: inline-flex;
  gap: 10px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.admin-stat-card {
  padding: 16px;
  border-radius: 16px;
}

.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0;
}

.admin-stat-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: 20px;
}

.admin-analytics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.admin-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  /* Stretch items so each row has equal-height tiles. */
  align-items: stretch;
}

.admin-management {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  /* Stretch items so each row has equal-height tiles. */
  align-items: stretch;
}

.admin-advanced {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.admin-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}
/*
  Equal-height tile internals:
  The panel becomes a column-flex container, and the body stretches to fill remaining space.
  This prevents the "shorter windows" look when some cards have fewer list rows.
*/
.admin-settings > .panel,
.admin-management > .panel,
.admin-advanced > .panel,
.admin-subgrid > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-settings > .panel > .panel-body,
.admin-management > .panel > .panel-body,
.admin-advanced > .panel > .panel-body,
.admin-subgrid > .panel > .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-settings > .panel > .panel-body.admin-card,
.admin-management > .panel > .panel-body.admin-card,
.admin-advanced > .panel > .panel-body.admin-card,
.admin-subgrid > .panel > .panel-body.admin-card {
  flex: 1;
}

.admin-advanced .admin-list-stack,
.admin-management .admin-list-stack,
.admin-settings .admin-list-stack,
.admin-subgrid .admin-list-stack {
  flex: 1;
  min-height: 140px;
}

.admin-card {
  display: grid;
  gap: 16px;
}

.admin-mini-table th {
  color: var(--text-muted);
  font-weight: 600;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-soft);
}

.admin-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

.admin-inline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.admin-inline-row .btn {
  justify-self: end;
}

.admin-bulk-bar {
  /* Unified bulk-bar component (Admin management suite, advanced sections, etc.) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.admin-inline-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea),
.admin-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea),
.admin-actions-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea),
.admin-bulk-bar :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea) {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 80%, transparent);
  color: var(--text);
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 22px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-inline-row textarea,
.admin-form textarea,
.admin-actions-row textarea,
.admin-bulk-bar textarea {
  border-radius: var(--radius-md);
  min-height: 120px;
  resize: vertical;
}

.admin-inline-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus,
.admin-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus,
.admin-actions-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus,
.admin-bulk-bar :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus {
  outline: none;
}

.admin-inline-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus-visible,
.admin-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus-visible,
.admin-actions-row :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus-visible,
.admin-bulk-bar :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], textarea):focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px rgba(123, 220, 255, 0.25), 0 18px 32px rgba(2, 6, 12, 0.45);
}

/* Bulk-bar sizing rules so controls stay inside the rounded container and wrap predictably */
.admin-bulk-bar > * {
  flex: 0 0 auto;
  max-width: 100%;
}

.admin-bulk-bar input[type="search"],
.admin-bulk-bar input[type="text"] {
  flex: 1 1 180px;
  min-width: 160px;
}

.admin-bulk-bar select,
.admin-bulk-bar .cyno-select {
  flex: 0 0 auto;
  min-width: 160px;
}

.admin-bulk-bar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Visual separation between bulk actions and the list below */
.admin-bulk-bar + .admin-list-stack,
.admin-bulk-bar + .admin-sub-list,
.admin-bulk-bar + .admin-user-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.incident-row .bulk-check,
.alert-card .bulk-check {
  margin-left: auto;
}

.admin-user-tools {
  display: grid;
  gap: 14px;
}

.admin-user-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

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

.admin-user-picker,
.admin-user-editor {
  padding: 12px;
  border-radius: 16px;
  width: 100%;
  min-width: 0;
}

.admin-user-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.admin-user-item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-user-item:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.admin-user-item input[type="checkbox"] {
  margin-left: auto;
}

.admin-list-stack {
  display: grid;
  gap: 10px;
}

.admin-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-list-item:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.admin-list-item strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.admin-list-item span {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-user-item.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg) 82%);
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  width: 100%;
}

/* Moderation row: keep switches readable and keep action button in its own column */
.admin-form-grid--moderation {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-sizing: border-box;
}

/* Ensure switches look like standalone controls (no inherited separators) */
.admin-form-grid--moderation .switch,
.admin-form-grid--moderation .switch * {
  border-left: none !important;
  border-right: none !important;
}

/* Keep the button vertically centered and inside the row */
.admin-form-grid--moderation .btn {
  justify-self: end;
  align-self: center;
}

@media (max-width: 860px) {
  .admin-form-grid--moderation {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-form-grid--moderation .btn {
    justify-self: stretch;
    width: 100%;
  }
}

.admin-form-grid--moderation .btn {
  justify-self: end;
  align-self: center;
}

.toggle .toggle-label,
.switch .switch-label {
  white-space: nowrap;
  line-height: 1.1;
}


/* Account management: stable action rows (Product/Duration/Grant, Ban/Reason/Apply) */
.admin-form-grid.admin-action-row {
  grid-template-columns: minmax(150px, 220px) minmax(200px, 1fr) minmax(200px, 1fr) minmax(140px, 220px);
  gap: 16px;
}

.admin-form-grid.admin-action-row > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-form-grid.admin-action-row > label > input,
.admin-form-grid.admin-action-row > label > select,
.admin-form-grid.admin-action-row > label > .cyno-select {
  width: 100%;
  min-width: 0;
}

.admin-form-grid.admin-action-row > button {
  height: 42px;
  padding: 0 18px;
  white-space: nowrap;
  justify-self: end;
}

@media (max-width: 980px) {
  .admin-form-grid.admin-action-row {
    grid-template-columns: 1fr;
  }
  .admin-form-grid.admin-action-row > button {
    justify-self: stretch;
  }
}
.admin-form-grid label:not(.toggle) {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

/* Ensure action buttons align predictably inside grid rows. */
.admin-form-grid > button {
  align-self: end;
  justify-self: stretch;
  min-height: 40px;
}

.admin-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 12px 0;
}

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

.admin-sub-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.admin-user-editor {
  max-height: none;
  /* Avoid clipping dropdowns/focus outlines which can look like UI is misaligned. */
  overflow: visible;
}

.admin-user-editor .panel-body {
  overflow-y: auto;
  max-height: 520px;
  padding-right: 4px;
}



@media (max-width: 900px) {
  .admin-user-editor {
    max-height: none;
  }

  .admin-user-editor .panel-body {
    max-height: none;
  }
}

@media (max-width: 980px) {
  .admin-user-tools-grid {
    grid-template-columns: 1fr;
  }
}

.admin-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 80;
}

.admin-modal.hidden {
  display: none;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-modal-card {
  position: relative;
  width: min(640px, 90vw);
  z-index: 1;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 88%, transparent);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  backdrop-filter: blur(var(--blur-lg)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(170%);
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-modal-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.admin-modal-fields label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.admin-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-modal-actions-right {
  display: flex;
  gap: 10px;
}

.admin-modal-close {
  padding: 6px 12px;
  min-height: 44px;
  min-width: 44px;
}

.admin-modal-error {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
  font-size: 12px;
}

.admin-kv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 12px;
}

.admin-kv-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-user-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 18px;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

.admin-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-user-row strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.admin-user-row span {
  color: var(--text-muted);
  font-size: 11px;
}

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

.kpi-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-value {
  font-size: 18px;
  font-weight: 700;
}

.incident-list,
.alert-cards {
  display: grid;
  gap: 10px;
}

.incident-row,
.alert-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.incident-row strong,
.alert-card strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.incident-row span:last-child,
.alert-card span:last-child {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.admin-ops-list {
  display: grid;
  gap: 12px;
}

.ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 82%, transparent);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-inner);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
}

.ops-row h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.ops-row p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.ops-row select {
  min-width: 150px;
  background: color-mix(in srgb, var(--glass-bg) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.ops-row .btn {
  padding: 8px 16px;
  border-radius: 999px;
  border-color: rgba(92, 200, 255, 0.35);
  background: rgba(92, 200, 255, 0.12);
  color: #e0f2fe;
}

.ops-row .btn-secondary {
  background: rgba(110, 231, 183, 0.12);
  border-color: rgba(110, 231, 183, 0.45);
  color: #d1fae5;
}

.ops-row .btn-ghost {
  background: color-mix(in srgb, var(--glass-bg) 35%, transparent);
  border-color: color-mix(in srgb, var(--glass-border) 55%, transparent);
  color: var(--text-soft);
}

.ops-row .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(92, 200, 255, 0.18);
}

@media (max-width: 720px) {
  .ops-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.admin-bulk {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.admin-bulk .btn {
  justify-self: end;
}

.admin-bulk label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.admin-flags {
  display: grid;
  gap: 10px;
}

.flag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.flag-row input {
  accent-color: rgba(92, 200, 255, 0.9);
}

.admin-roles {
  display: grid;
  gap: 12px;
}

.role-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  display: grid;
  gap: 8px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.role-card h4 {
  margin: 0;
  font-size: 14px;
}

.role-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.role-card ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-soft);
  display: grid;
  gap: 6px;
}

.role-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.admin-ops-suite .panel-body {
  display: grid;
  gap: 18px;
}

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

.ops-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 82%, transparent);
  display: grid;
  gap: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
}

.ops-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ops-card-header h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.ops-card-header p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-stack-bars {
  display: grid;
  gap: 12px;
}

.stack-bar {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.stack-track {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.2);
}

.stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend-dot.basic {
  background: rgba(92, 200, 255, 0.85);
}

.legend-dot.pro {
  background: rgba(110, 231, 183, 0.85);
}

.legend-dot.premium {
  background: rgba(94, 234, 212, 0.75);
}

.admin-funnel {
  display: grid;
  gap: 10px;
}

.funnel-step {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.funnel-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0.18), rgba(110, 231, 183, 0.15));
  opacity: calc(var(--value) / 100);
  z-index: 0;
}

.funnel-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0.25), rgba(110, 231, 183, 0.18));
  transform-origin: left;
  transform: scaleX(0);
  animation: funnelGrow 1.1s ease forwards;
  z-index: 0;
}

.funnel-step span,
.funnel-step strong {
  position: relative;
  z-index: 1;
}

.funnel-step strong {
  font-size: 14px;
}

.funnel-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.cohort-grid {
  display: grid;
  gap: 20px;
}

.cohort-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.cohort-cells {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.cohort-cells span {
  display: block;
  padding-top: 100%;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.15);
  position: relative;
  overflow: hidden;
}

.cohort-cells span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(92, 200, 255, 0.85), rgba(110, 231, 183, 0.75));
  opacity: calc(var(--heat) / 100);
}

.cohort-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.cohort-scale {
  display: grid;
  grid-template-columns: repeat(5, 12px);
  gap: 4px;
}

.cohort-scale span {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  position: relative;
  overflow: hidden;
}

.cohort-scale span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(92, 200, 255, 0.85), rgba(110, 231, 183, 0.75));
  opacity: var(--heat);
}

.cohort-scale span:nth-child(1)::after { --heat: 0.2; }
.cohort-scale span:nth-child(2)::after { --heat: 0.4; }
.cohort-scale span:nth-child(3)::after { --heat: 0.6; }
.cohort-scale span:nth-child(4)::after { --heat: 0.8; }
.cohort-scale span:nth-child(5)::after { --heat: 1; }

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

.metric-block {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  display: grid;
  gap: 8px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.metric-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.admin-retention {
  width: 100%;
  height: 80px;
}

.admin-retention path {
  fill: none;
  stroke: rgba(110, 231, 183, 0.9);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: adminSpark 2.2s ease forwards;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .admin-bulk {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-bulk .btn {
    justify-self: stretch;
  }
}

.admin-sparkline {
  width: 100%;
  height: 60px;
  margin-bottom: 12px;
}

.admin-sparkline polyline {
  fill: none;
  stroke: rgba(92, 200, 255, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: adminSpark 2s ease forwards;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-soft);
}

.admin-table th {
  color: var(--text-muted);
  font-weight: 600;
}

.admin-log {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.admin-log li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.admin-log li span:last-child {
  color: var(--text-muted);
}

.audit-timeline {
  display: grid;
  gap: 12px;
  /* Prevent the audit log from making the page endlessly long. */
  max-height: min(520px, 60vh);
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Audit timeline scrollbar (kept subtle for the glass UI). */
.audit-timeline::-webkit-scrollbar {
  width: var(--sb-size);
}

.audit-timeline::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--sb-track-border);
}

.audit-timeline::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--sb-thumb),
    rgba(255, 255, 255, 0.16)
  );
  border-radius: 999px;
  border: 1px solid var(--sb-thumb-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.audit-timeline::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--sb-thumb-hover),
    rgba(255, 255, 255, 0.2)
  );
}

.audit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.audit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(92, 200, 255, 0.9);
  margin-top: 6px;
  box-shadow: 0 0 10px rgba(92, 200, 255, 0.6);
}

.audit-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.audit-item p {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.audit-time {
  font-size: 10px;
  color: var(--text-muted);
}

.admin-list input {
  width: 100%;
  margin-bottom: 12px;
}

.admin-product-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;

  /* Reserve space for the overlay scrollbar and hide the native scrollbar. */
  padding-right: 18px;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

.admin-product-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}


/* Shared glass scrollbar for internal admin scroll containers (Selection / Users / Audit panel-body / Review). */
.admin-user-results,
.admin-user-editor .panel-body,
.admin-collapsible.is-scrollable > .panel-body,
.review-body,
.review-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

.admin-user-results::-webkit-scrollbar,
.admin-user-editor .panel-body::-webkit-scrollbar,
.admin-collapsible.is-scrollable > .panel-body::-webkit-scrollbar,
.review-body::-webkit-scrollbar,
.review-panel::-webkit-scrollbar {
  width: var(--sb-size);
}

.admin-user-results::-webkit-scrollbar-track,
.admin-user-editor .panel-body::-webkit-scrollbar-track,
.admin-collapsible.is-scrollable > .panel-body::-webkit-scrollbar-track,
.review-body::-webkit-scrollbar-track,
.review-panel::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--sb-track-border);
}

.admin-user-results::-webkit-scrollbar-thumb,
.admin-user-editor .panel-body::-webkit-scrollbar-thumb,
.admin-collapsible.is-scrollable > .panel-body::-webkit-scrollbar-thumb,
.review-body::-webkit-scrollbar-thumb,
.review-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--sb-thumb),
    rgba(255, 255, 255, 0.18)
  );
  border-radius: 999px;
  border: 1px solid var(--sb-thumb-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.admin-user-results::-webkit-scrollbar-thumb:hover,
.admin-user-editor .panel-body::-webkit-scrollbar-thumb:hover,
.admin-collapsible.is-scrollable > .panel-body::-webkit-scrollbar-thumb:hover,
.review-body::-webkit-scrollbar-thumb:hover,
.review-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--sb-thumb-hover),
    rgba(255, 255, 255, 0.22)
  );
}


.admin-product-item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  cursor: pointer;
  display: grid;
  gap: 6px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 20px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.admin-product-item.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg) 82%);
}

.admin-product-title {
  font-weight: 600;
}

.admin-product-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}

.admin-editor .panel-body {
  display: grid;
  gap: 16px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.admin-span {
  grid-column: 1 / -1;
}

.admin-pricing {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 980px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes stackGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes funnelGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes adminSpark {
  to { stroke-dashoffset: 0; }
}

/* --- Added: filters, saved views, review drawer, user tags/notes --- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text);
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.admin-user-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.admin-user-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.admin-user-quick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chip--tag {
  cursor: pointer;
}

.note-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.note-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.note-text {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
}

.note-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-soft);
}

.review-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.review-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.review-panel {
  position: relative;
  width: min(560px, 100%);
  height: 100%;
  border-left: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.review-body {
  flex: 1;
  overflow: auto;
  padding: 12px 0;
  display: grid;
  gap: 10px;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

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

.pending-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.pending-main {
  display: grid;
  gap: 4px;
}

.pending-main span {
  font-size: 12px;
  color: var(--text-soft);
}

.pending-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.view-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip--view.active {
  outline: 2px solid rgba(255, 255, 255, 0.22);
}

.chip-menu-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.chip-menu {
  position: absolute;
  z-index: 80;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(10px);
  min-width: 160px;
}

.chip-menu button {
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.chip-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* --- Added: admin suite groupbox layout + custom sliders --- */

.admin-suite-panel .panel-body {
  padding: 16px;
}

.admin-suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  /* Make cards in the same row match height (tallest card wins) */
  align-items: stretch;
}

.admin-suite-grid > .panel {
  min-width: 0;
}

.admin-suite-subpanel {
  margin-top: 16px;
}

/* Ensure the panel stretches with the grid item and the body can fill remaining space */
.admin-suite-grid > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-suite-grid > .panel > .panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Keep lists growing and actions pinned to the bottom when there's extra height */
.admin-suite-grid .admin-list-stack {
  flex: 1;
  min-height: 0;
}

.admin-suite-grid .admin-actions-row {
  margin-top: auto;
}

/* Slightly reduce nested panel chrome so suites read as one surface */
.admin-suite-grid > .panel {
  box-shadow: none;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

/* Fix long controls overflowing panels */
.admin-card,
.panel-body {
  min-width: 0;
}

.admin-user-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-user-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-user-search input[type="search"] {
  flex: 1;
  min-width: 240px;
}

/* Range slider */
.range-field {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.range-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.range-control--native {
  grid-template-columns: 1fr;
}

.native-range {
  width: 100%;
  accent-color: rgba(92, 200, 255, 0.9);
}

.range-out {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 75%, transparent);
  color: var(--text);
  font-size: 12px;
  min-width: 58px;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 8px 16px rgba(2, 6, 12, 0.3);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

/* Thin glass / SaaS slider */
.admin-range {
  --p: 10%;
  --track-h: 4px;
  --thumb-s: 12px;

  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px; /* hit area */
  background: transparent;
  border: 0;
  outline: none;
  cursor: none;
  touch-action: none;
}

.admin-range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(92, 200, 255, 0.95) var(--p), rgba(148, 163, 184, 0.18) var(--p));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(148, 163, 184, 0.18);
}

.admin-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-s);
  height: var(--thumb-s);
  border-radius: 999px;
  margin-top: calc((var(--track-h) - var(--thumb-s)) / 2);
  border: 1px solid rgba(92, 200, 255, 0.55);
  background: color-mix(in srgb, var(--glass-bg-strong) 85%, transparent);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(92, 200, 255, 0.10);
  cursor: none;
}

.admin-range::-moz-range-track {
  height: var(--track-h);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(148, 163, 184, 0.18);
}

.admin-range::-moz-range-progress {
  height: var(--track-h);
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.95);
}

.admin-range::-moz-range-thumb {
  width: var(--thumb-s);
  height: var(--thumb-s);
  border-radius: 999px;
  border: 1px solid rgba(92, 200, 255, 0.55);
  background: color-mix(in srgb, var(--glass-bg-strong) 85%, transparent);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(92, 200, 255, 0.10);
  cursor: none;
}

.admin-range:focus-visible {
  outline: 2px solid rgba(92, 200, 255, 0.35);
  outline-offset: 4px;
}

@media (max-width: 720px) {

  .range-control {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .range-out {
    justify-self: start;
  }
}

/* --- Ops suite spacing + groupbox header text/action alignment --- */

/* Ops rows: top-align controls so toggles/selects/buttons align with the first text line */
.ops-row {
  align-items: start;
}

.ops-row > :last-child {
  align-self: start;
}

.ops-row select,
.ops-row .cyno-select,
.ops-row .btn {
  max-width: 100%;
}

/* Panel / groupbox headers: keep right-side actions (pill/button) aligned to top,
   and allow the text block to wrap instead of pushing controls out of the container. */
.panel-header,
.ops-card-header {
  align-items: flex-start;
}

.panel-header > :first-child,
.ops-card-header > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.panel-header > :last-child,
.ops-card-header > :last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ==========================================================================
   Layout containment + spacing fixes (auto-generated)
   Notes:
   - Keep controls inside their parent containers at narrow widths
   - Ensure grouped actions wrap instead of overflowing
   ========================================================================== */

/* Allow the page header actions to wrap instead of leaking out of the header */
.section-header {
  flex-wrap: wrap;
}

.section-header > :first-child {
  min-width: 0;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

/* Prevent the badge from forcing extra height/width in tight rows */
.admin-actions .badge {
  flex: 0 0 auto;
}

/* Filter rows: make selects shrink + wrap cleanly inside narrow sidebars */
.admin-filter-row,
.admin-user-filters,
.admin-user-search {
  min-width: 0;
}

.admin-filter-row > * {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

.admin-filter-row select,
.admin-filter-row .cyno-select {
  width: 100%;
  min-width: 0;
}

/* User search row: allow the search input to shrink below the old min-width */
.admin-user-search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

/* User filter toolbar: every control can wrap + shrink */
.admin-user-filters > * {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

.admin-user-filters input[type="search"] {
  flex: 2 1 240px;
  min-width: 0;
}

/* Inline "quick add" rows: make controls fill their grid cells so buttons don't pop out */
.admin-inline-row {
  width: 100%;
  min-width: 0;
}

.admin-inline-row > * {
  min-width: 0;
  max-width: 100%;
}

.admin-inline-row input,
.admin-inline-row select,
.admin-inline-row .cyno-select {
  width: 100%;
}

.admin-inline-row .btn {
  justify-self: stretch;
}

@media (min-width: 720px) {
  .admin-inline-row .btn {
    justify-self: end;
  }
}

/* Bulk bars: allow controls to shrink and never exceed the container */
.admin-bulk-bar {
  min-width: 0;
}

.admin-bulk-bar > * {
  min-width: 0;
  max-width: 100%;
}

.admin-bulk-bar input[type="search"],
.admin-bulk-bar input[type="text"],
.admin-bulk-bar input[type="number"] {
  min-width: 140px;
}

.admin-bulk-bar select,
.admin-bulk-bar .cyno-select {
  min-width: 140px;
  max-width: 100%;
}

/* Meta rows can overflow when labels get long */
.admin-product-meta,
.funnel-meta,
.stack-legend {
  flex-wrap: wrap;
}

/* Tables: avoid layout blowouts on narrow screens */
.admin-table,
.admin-mini-table {
  table-layout: fixed;
  max-width: 100%;
}

.admin-table th,
.admin-table td,
.admin-mini-table th,
.admin-mini-table td {
  word-break: break-word;
}

/* Grids: prevent min column sizes from causing horizontal overflow */
.admin-analytics,
.admin-settings,
.admin-advanced,
.admin-stats,
.admin-suite-grid,
.ops-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.admin-suite-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Extremely narrow screens: drop to single column sooner and reduce padding pressure */
@media (max-width: 520px) {
  .page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .admin-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-bulk-bar {
    gap: 8px;
    padding: 10px;
  }

  .admin-bulk-bar .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Correction: keep stats cards denser than the main panels */
.admin-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* ==========================================================================
   Account management: containment + wrapping fixes
   ========================================================================== */

/* Flex/grid children often overflow unless min-width is explicitly reset. */
.admin-user-tools,
.admin-user-tools-grid,
.admin-user-picker,
.admin-user-editor,
.admin-user-results,
.admin-user-search,
.admin-user-filters {
  min-width: 0;
  max-width: 100%;
}

/* Filters: ensure selects/inputs never exceed the row width. */
.admin-user-filters > * {
  flex: 1 1 190px;
  min-width: 0;
  max-width: 100%;
}

.admin-user-filters select,
.admin-user-filters .cyno-select,
.admin-user-filters input[type="search"] {
  width: 100%;
  min-width: 0;
}

/* Search row: allow the search input to shrink instead of pushing layout wider. */
.admin-user-search > * {
  min-width: 0;
}

.admin-user-search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0; /* override any min-width from earlier rules */
  max-width: 100%;
}

/* The 2-column picker/editor grid must collapse earlier on constrained layouts. */
@media (max-width: 1200px) {
  .admin-user-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* If anything inside results is wider, hide X overflow to avoid the broken scrollbar look. */
.admin-user-results {
  overflow-x: hidden;
}

/* User rows: wrap actions instead of forcing horizontal scroll. */
.admin-user-item {
  flex-wrap: wrap;
  align-items: flex-start;
}

.admin-user-item > * {
  min-width: 0;
}

/* Common structure used by admin.js */
.admin-user-main {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-user-quick {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Buttons inside rows should not blow up the row width */
.admin-user-item .btn {
  max-width: 100%;
}

/* Optional: keep long usernames/tags from widening the row */
.admin-user-item strong,
.admin-user-item span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* === Fix: make suite cards equal height per row (Compliance / Experiments / Automation) === */
.admin-suite-grid {
  align-items: stretch; /* override earlier 'start' so grid items share row height */
}

.admin-suite-grid > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-suite-grid > .panel > .panel-body {
  flex: 1;
  min-height: 0; /* allows internal scroll areas to size correctly */
  display: flex;
  flex-direction: column;
}

/* The main list area should consume remaining height so footer actions align at bottom. */
.admin-suite-grid .admin-list-stack {
  flex: 1;
  min-height: 0;
}

/* Push actions row to the bottom when there is extra vertical space. */
.admin-suite-grid .admin-actions-row {
  margin-top: auto;
}

/* =====================================================================
   FIX: Admin management suite cards must match height per row
   Targets: Experiments (A/B testing), Compliance (Data requests), Automation (Status automation)
   ===================================================================== */
.admin-management-suite .admin-suite-grid {
  align-items: stretch !important;
}

.admin-management-suite .admin-suite-grid > .panel {
  height: 100% !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.admin-management-suite .admin-suite-grid > .panel > .panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-management-suite .admin-suite-grid .admin-list-stack {
  flex: 1;
  min-height: 0;
}

.admin-management-suite .admin-suite-grid .admin-actions-row {
  margin-top: auto;
}

/* --- Fix: Details pricing row overflow / overlapping inputs --- */

/* Ensure pricing cells can shrink inside CSS grid without overflowing the panel */
.admin-pricing {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.admin-pricing .admin-field {
  min-width: 0;
}

/* Force form controls to respect the available width */
.admin-form input,
.admin-form select,
.admin-form .cyno-select,
.admin-form textarea {
  width: 100%;
  max-width: 100%;
}

/* Responsive: keep pricing readable on narrower widths */
@media (max-width: 820px) {
  .admin-pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-pricing {
    grid-template-columns: 1fr;
  }
}


/* ===========================
   Collapsible large sections
   =========================== */

.admin-collapsible {
  position: relative;
}

.admin-collapsible__summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.admin-collapsible__summary::-webkit-details-marker {
  display: none;
}

/* Chevron */
.admin-collapsible__summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid rgba(255, 255, 255, 0.55);
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  transform: rotate(-45deg);
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.85;
}

.admin-collapsible[open] > .admin-collapsible__summary::after {
  transform: rotate(45deg);
  opacity: 0.95;
}

/* Keep header layout consistent when summary wraps the existing panel-header */
.admin-collapsible__summary.panel-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Scrollable variant (useful for Audit / long lists) */
.admin-collapsible.is-scrollable > .panel-body {
  max-height: min(72vh, 720px);
  overflow: auto;
  scrollbar-gutter: stable;
  padding-right: 10px;
}

/* ===========================
   Collapsible animation helpers
   - Animated open/close for <details> sections (e.g., Audit)
   - Height animation is driven by JS (inline height).
   =========================== */

/* Default: allow content to size naturally. */
.admin-collapsible > .panel-body {
  min-width: 0;
}

/* During animation JS sets an explicit height; keep contents clipped. */
.admin-collapsible.is-animating > .panel-body {
  overflow: hidden;
  transition: height 220ms ease, opacity 220ms ease;
  will-change: height, opacity;
}

.admin-collapsible.is-animating.is-opening > .panel-body {
  opacity: 1;
}

.admin-collapsible.is-animating.is-closing > .panel-body {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .admin-collapsible.is-animating > .panel-body {
    transition: none;
  }
}

/* If the audit timeline grows too much, keep it contained even without the scrollable variant */
.audit-timeline {
  scrollbar-gutter: stable;
}


/* --- Grouping: subgrid panels inside collapsible suites --- */
.admin-subgroup > .panel-body { padding-top: 14px; }



/* --- Fix: prevent collapsible subgroup headers from overlapping (double-toggle bug) --- */
.admin-collapsible.admin-subgroup { margin-top: 16px; }
.admin-collapsible.admin-subgroup:first-child { margin-top: 0; }

.admin-collapsible__summary { position: relative; z-index: 2; }
.admin-collapsible > .panel-body { position: relative; z-index: 1; }

/* Give each collapsible its own stacking/paint box to avoid click-through */
.admin-collapsible { isolation: isolate; }


/* ===========================
   Fix: side-by-side <details> subgroups (Core / Back office)
   - Avoid forcing <details> to be flex/100% height (can create "open but empty" panels)
   - Prevent grid row stretching that leaves a blank panel-body background
   =========================== */

.admin-advanced {
  align-items: start; /* don't force equal-height for the big subgroup containers */
}

.admin-advanced > details.panel {
  display: block;   /* override earlier .admin-advanced > .panel { display:flex } */
  height: auto;     /* override earlier .admin-advanced > .panel { height:100% } */
}

.admin-advanced > details.panel > .panel-body {
  display: block;   /* override earlier flex column rules */
  flex: initial;
}

/* Keep equal-height behavior INSIDE the subgroup grid */
.admin-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.admin-subgrid > .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-subgrid > .panel > .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}


/* --- Patch: subgroup alignment + adaptive header height + prevent blank open state --- */

/* In the 2-up subgroup row (Core / Back office), avoid margin-based offsets.
   Spacing is handled by the parent grid gap. */
.admin-collapsible.admin-subgroup {
  margin-top: 0 !important;
}

/* Ensure the subgroup container grid can place Core + Back office side-by-side on wide screens */
.admin-advanced {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: stretch;
}

/* DO NOT apply equal-height flex rules to <details> containers (can cause "open but blank" rendering in some browsers). */
.admin-advanced > details.panel,
.admin-advanced > details.glass-panel.panel {
  display: block !important;
  height: auto !important;
}

.admin-advanced > details.panel > .panel-body,
.admin-advanced > details.glass-panel.panel > .panel-body {
  display: block !important;
  flex: initial !important;
  min-height: 0 !important;
}

/* Make both subgroup headers visually equal even if copy wraps differently.
   clamp() keeps it responsive without hard-coding a single pixel height. */
.admin-subgroup > summary.panel-header {
  min-height: clamp(84px, 8.5vw, 112px);
  align-items: center;
}

/* Keep the chevron / pill aligned and prevent text from pushing layout sideways */
.admin-subgroup > summary.panel-header > * {
  min-width: 0;
}

/* ===========================
   Fix: Core / Back office blank stretched panel
   =========================== */

/* Do not stretch the subgroup cards to the row height. */
.admin-advanced {
  align-items: start !important;
  grid-auto-rows: min-content;
}

/* Extra safety: ensure each subgroup <details> aligns to content height. */
.admin-advanced > details.admin-subgroup {
  align-self: start;
}

/* =====================================================================
   Patch: Incident row layout (status + select on top, title below)
   - Top line: status pill (left) + select checkbox (right)
   - Second line: incident title + meta (full width)
   ===================================================================== */

.incident-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Status pill stays top-left */
.incident-row > .pill,
.incident-row > span.pill {
  order: 1;
}

/* Select checkbox stays top-right */
.incident-row .bulk-check {
  order: 2;
  margin-left: auto;
  align-self: center;
}

/* Text block goes full-width under the top line */
.incident-row > div {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  text-align: left;
}

.incident-row > div strong {
  display: block;
  line-height: 1.2;
  margin: 0;
}

.incident-row > div span {
  display: block;
  margin-top: 2px;
  line-height: 1.2;
}

/* =====================================================================
   Patch: Incident / Alert cards overflow fix + shared row behavior
   - Prevent rows (e.g., "CS2 patch delay", "Planned maintenance") from
     exceeding the panel width.
   - Provides a shared "list-row" behavior via grouped selectors.
   ===================================================================== */

/* Ensure the list itself never exceeds the panel body width */
.incident-list,
.alert-cards {
  width: 100%;
  min-width: 0;
}

/* Shared row behavior (incident-row + alert-card) */
.incident-row,
.alert-card {
  width: 100%;
  min-width: 0; /* critical for flex overflow containment */
}

/* Make the main text container shrinkable so it doesn't push outside */
.incident-row > div,
.alert-card > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* Keep the selection checkbox pinned right, but inside the row */
.incident-row .bulk-check,
.alert-card .bulk-check {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Text: allow wrapping/clamping without widening the row */
.incident-row strong,
.alert-card strong {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.incident-row span,
.alert-card span {
  min-width: 0;
  max-width: 100%;
}

/* Prevent any accidental horizontal scroll from long content */
.incident-row,
.alert-card,
.incident-list,
.alert-cards {
  overflow-x: hidden;
}


/* =====================================================================
   Patch: Incident text alignment
   - Fix awkward wrapping/centering in incident cards (CS2 patch delay,
     Planned maintenance)
   ===================================================================== */

.incident-row {
  align-items: flex-start;
}

/* Keep status pill aligned with the first text line */
.incident-row .pill {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Ensure the text block is left-aligned and wraps naturally */
.incident-row > div {
  text-align: left;
  display: grid;
  gap: 4px;
}

.incident-row strong {
  text-align: left;
  line-height: 1.15;
}

/* Secondary line should wrap nicely without forcing weird breaks */
.incident-row span {
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Checkbox label alignment */
.incident-row .bulk-check {
  align-self: center;
}

/* =====================================================================
   Override: do not truncate incident titles when placed on their own line
   ===================================================================== */

.incident-row strong {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

.alert-card strong {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

/* =====================================================================
   Patch: Tools view name overflow fix
   - Ensure #viewNameInput stays within its panel on narrow widths.
   ===================================================================== */

#viewNameInput {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* The Tools action row contains: scope select, view name input, multiple buttons */
.admin-actions-row select#viewScope,
.admin-actions-row .cyno-select,
.admin-actions-row input#viewNameInput {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-actions-row input#viewNameInput {
  flex: 2 1 260px;
}

/* Prevent any child control from forcing horizontal overflow */
.admin-actions-row > * {
  max-width: 100%;
  min-width: 0;
}


/* --- Fix: details body visibility for collapsibles (admin-settings) --- */
/* Ensure <details> panels don't show an empty body when closed.
   Some flex layout rules can override the UA rule that hides non-summary children. */
.admin-collapsible:not([open]):not(.is-animating) > .panel-body {
  display: none !important;
}

.admin-collapsible.is-animating > .panel-body {
  display: block;
}


/* --- Fix: admin-settings collapsibles should not stretch closed panels --- */
/* When panels in .admin-settings are <details>, the global "equal-height tile" rules
   (height:100% + flex column) make CLOSED panels stretch to the height of the OPEN one,
   which looks like multiple empty panels are opened.
   Override that behavior only for admin-settings collapsibles. */
.admin-settings {
  align-items: start;
  grid-auto-rows: min-content;
}

.admin-settings > details.panel,
.admin-settings > details.glass-panel.panel {
  display: block !important;
  height: auto !important;
}

.admin-settings > details.panel > .panel-body,
.admin-settings > details.glass-panel.panel > .panel-body {
  display: block;
  flex: initial !important;
}


/* --- Management suite spacing tightening --- */
/* Reduce excessive vertical gaps inside Admin management suite */
.admin-management-suite .panel-body {
  padding: 12px;
}

.admin-suite-grid {
  gap: 12px;
}

.admin-suite-grid > .panel {
  border-radius: 14px;
}

.admin-suite-grid > .panel > .panel-header {
  padding-bottom: 8px;
}

.admin-suite-grid > .panel > .panel-body {
  gap: 10px;
  padding: 10px;
}

/* Tighten internal cards (lists, forms) */
.admin-management-suite .admin-card {
  gap: 8px;
}

.admin-management-suite .admin-actions-row {
  gap: 8px;
  margin-top: 8px;
}

/* Reduce bottom padding caused by auto-push */
.admin-suite-grid .admin-actions-row {
  margin-top: 12px;
}


/* --- Management suite: remove forced vertical stretching (reduce empty space) --- */
/* The suite grid uses flex internals to equalize heights (list grows, actions pinned bottom).
   In Management suite this creates large empty areas (e.g., Subscriptions card).
   Override to let content pack naturally from the top. */
.admin-management-suite .admin-suite-grid > .panel > .panel-body {
  display: grid !important;
  align-content: start;
  gap: 12px;
}

.admin-management-suite .admin-suite-grid .admin-list-stack {
  flex: initial !important;
  min-height: 0 !important;
}

.admin-management-suite .admin-suite-grid .admin-actions-row {
  margin-top: 0 !important;
}


/* --- Added: standalone User tools section (Account management) --- */
.admin-user-tools-suite {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.admin-user-tools-suite > details.panel,
.admin-user-tools-suite > details.glass-panel.panel {
  display: block;
  height: auto;
}

.admin-user-tools-suite > details.panel > .panel-body,
.admin-user-tools-suite > details.glass-panel.panel > .panel-body {
  height: auto;
}



/* ===== Account management action rows ===== */
.admin-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.admin-action-row .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-action-row button {
    height: 42px;
    padding: 0 18px;
    white-space: nowrap;
    justify-self: end;
}

/* --- Switch (Selection moderation) --- */
/*
  Replace the legacy .toggle component with a dedicated .switch to avoid
  pseudo-element conflicts (components.css vs admin.css) that could cause
  the thumb to stop translating when :checked.
*/
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 75%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 10px 22px rgba(2, 6, 12, 0.35);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.switch-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.38);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.switch input:checked + .switch-track {
  border-color: rgba(92, 200, 255, 0.55);
  background: linear-gradient(135deg, rgba(92, 200, 255, 0.18), rgba(110, 231, 183, 0.14));
  box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.08), 0 14px 28px rgba(92, 200, 255, 0.12);
}

.switch input:checked + .switch-track::before {
  transform: translate(20px, -50%);
  background: #e0f2fe;
  border-color: rgba(92, 200, 255, 0.55);
}

.switch:focus-within .switch-track {
  outline: 2px solid rgba(92, 200, 255, 0.35);
  outline-offset: 3px;
}

.switch-label {
  padding-left: 0;
}


/* ==========================================================================
   Custom overlay scrollbar (Admin only)
   - Used to guarantee pixel-perfect 1-2px scrollbars even in Firefox
   - Native scrollbar is hidden only for selected containers (via JS .has-custom-sb)
   ========================================================================== */

.has-custom-sb {
  scrollbar-width: none !important; /* Firefox: hide native */
}

.has-custom-sb::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.sb-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.sb-track {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 4px;
  width: 2px; /* target thickness */
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(15, 23, 42, 0.1)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 10px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: auto;
}

.sb-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(92, 200, 255, 0.34),
    rgba(110, 231, 183, 0.28)
  );
  box-shadow:
    0 0 10px rgba(92, 200, 255, 0.18),
    0 0 18px rgba(110, 231, 183, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(160%);
  cursor: grab;
}

.sb-wrap.is-dragging .sb-thumb {
  cursor: grabbing;
}

.sb-wrap:hover .sb-track,
.sb-wrap:focus-within .sb-track,
.sb-wrap.is-dragging .sb-track {
  opacity: 1;
}

/* Slightly reduce right offset in very tight panels */
@media (max-width: 520px) {
  .sb-track {
    right: 3px;
  }
}




.admin-user-editor .panel-body::-webkit-scrollbar {
  width: var(--sb-size);
}

.admin-user-editor .panel-body::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    var(--sb-track),
    rgba(15, 23, 42, 0.08)
  );
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px var(--sb-track-border),
    inset 0 10px 18px rgba(0, 0, 0, 0.18);
}

.admin-user-editor .panel-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--sb-thumb),
    rgba(255, 255, 255, 0.18)
  );
  box-shadow:
    0 0 10px rgba(92, 200, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.admin-user-editor .panel-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--sb-thumb-hover),
    rgba(255, 255, 255, 0.22)
  );
}


/* --- FIX: Metric tool collapse click reliability --- */
details.metric-tool > summary.metric-tool-summary{
  position: relative;
  z-index: 2;
}

details.metric-tool > .panel-body{
  position: relative;
  z-index: 1;
}

/* Ensure the whole summary area stays clickable */
details.metric-tool > summary.metric-tool-summary *{
  pointer-events: auto;
}

/* ==========================================================================
   Heatmap styling (Risk pulse)
   ========================================================================== */

.heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 12px 0;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(92, 200, 255, 0.08);
  transition: background 150ms ease;
}

.heat-cell[data-level="1"] {
  background: rgba(92, 200, 255, 0.15);
}

.heat-cell[data-level="2"] {
  background: rgba(92, 200, 255, 0.3);
}

.heat-cell[data-level="3"] {
  background: rgba(92, 200, 255, 0.5);
}

.heat-cell[data-level="4"] {
  background: rgba(92, 200, 255, 0.75);
}

.heat-cell[data-level="5"] {
  background: rgba(92, 200, 255, 1);
}

/* ==========================================================================
   Admin Panel Phase 6: Luxury Glass Design System
   Matches the Cyno.gg glass UI: pill shapes, cyan accents, backdrop blur,
   color-mix borders, liquid glass effects, spring transitions
   ========================================================================== */

/* --- Tab Navigation --- */
/* ── Sidebar layout: nav rail + content column ─────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.admin-tab-content { min-width: 0; }

/* Vertical sidebar nav (same .admin-tab buttons the JS already wires up). */
.admin-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px;
  border-radius: var(--radius-lg, 20px);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 88%, transparent), color-mix(in srgb, var(--glass-bg) 70%, transparent));
  backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-lg, 28px)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px rgba(2, 6, 12, 0.45);
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Group label between sections */
.admin-nav-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
  padding: 14px 12px 6px;
  margin: 0;
}
.admin-nav-group:first-child { padding-top: 4px; }

.admin-tab {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease, background-color 0.22s ease,
              border-color 0.22s ease, padding-left 0.22s ease;
}
/* left accent rail */
.admin-tab::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: height 0.22s ease;
}

.admin-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding-left: 18px;
}
.admin-tab:hover::before { height: 50%; }

.admin-tab.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  box-shadow: 0 4px 16px rgba(2, 6, 12, 0.3), 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
.admin-tab.is-active::before { height: 62%; }

.admin-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

/* Collapse to a top horizontal scroller on narrow screens. */
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-tabs {
    flex-direction: row;
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 999px;
    padding: 8px;
    gap: 6px;
  }
  .admin-nav-group { display: none; }
  .admin-tab { width: auto; padding: 9px 16px; border-radius: 999px; }
  .admin-tab::before { display: none; }
}

/* --- Tab Panels --- */
.admin-tab-panel {
  display: none;
}

.admin-tab-panel.is-active {
  /* Flex column with a gap so every section/panel inside a tab (Users, Runs,
     etc.) is evenly spaced instead of stacking flush with no breathing room. */
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: tabFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Neutralise any stray bottom margins on direct children so the gap is the
   single source of vertical spacing. */
.admin-tab-panel.is-active > * { margin-top: 0; margin-bottom: 0; }

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Backup Management
   ========================================================================== */

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

.backup-stat {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 8px 16px rgba(2, 6, 12, 0.3);
  backdrop-filter: blur(var(--blur-sm)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(140%);
}

.backup-warning {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  font-size: 13px;
  margin-bottom: 16px;
}

.admin-backups-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-backups-list {
  display: grid;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 18px;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

.admin-backups-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.admin-backup-log {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 18px;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

.admin-backup-log::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ops-row .btn-secondary,
.ops-row .btn-ghost {
  font-size: 11px;
  padding: 3px 8px;
}

.text-warning {
  color: #fbbf24;
}

.text-danger {
  color: #fca5a5;
}

@media (max-width: 640px) {
  .backup-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-row-actions {
    flex-direction: column;
  }
}

/* --- Editor Toolbar --- */
.admin-editor-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-editor-toolbar .thread-search {
  flex: 1;
  min-width: 240px;
  max-width: 420px;
}

/* --- Product Grid --- */
.admin-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.admin-product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg-strong) 80%, transparent), color-mix(in srgb, var(--glass-bg) 65%, transparent));
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  box-shadow: var(--glass-shadow), var(--glass-glow), inset 0 0 0 1px var(--border-inner);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.admin-product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 20%), rgba(123, 220, 255, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

.admin-product-card:hover::before {
  opacity: 0.55;
}

.admin-product-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  box-shadow: 0 24px 60px rgba(3, 8, 18, 0.5), 0 0 40px rgba(118, 224, 255, 0.2), inset 0 0 0 1px var(--border-inner);
}

.admin-product-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.admin-product-card-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-product-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-product-card-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.admin-product-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.admin-product-card-actions .btn {
  flex: 1;
}

/* --- Loader Config --- */
.admin-loader-editor {
  display: grid;
  gap: 20px;
}

.admin-loader-selector {
  display: flex;
  gap: 12px;
}

.admin-loader-selector select {
  flex: 1;
  max-width: 400px;
}

.admin-loader-form {
  display: grid;
  gap: 20px;
}

.admin-loader-section {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg-strong) 72%, transparent), color-mix(in srgb, var(--glass-bg) 58%, transparent));
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--border-inner);
}

.admin-loader-section h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text);
}

.admin-module-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-module-table th,
.admin-module-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent);
}

.admin-module-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admin-module-table tr:last-child td {
  border-bottom: none;
}

.admin-module-table .switch {
  padding: 4px;
}

/* --- Users Table --- */
.admin-user-table {
  display: grid;
  gap: 10px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.admin-user-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
}

.admin-user-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-user-row-main strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-row-main span {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- HWID Table --- */
.admin-hwid-table {
  display: grid;
  gap: 10px;
}

.admin-hwid-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  font-size: 13px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-hwid-row:hover {
  transform: translateY(-2px);
}

.admin-hwid-row-main {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--text-muted);
}

.admin-hwid-row-main span {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-sans);
}

/* --- Incidents List --- */
.admin-incident-list {
  display: grid;
  gap: 10px;
}

.admin-incident-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-incident-row:hover {
  transform: translateY(-2px);
}

.admin-incident-row.is-critical {
  border-color: color-mix(in srgb, var(--status-danger) 45%, var(--glass-border));
  background: color-mix(in srgb, rgba(240, 156, 176, 0.15) 30%, var(--glass-bg));
}

.admin-incident-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-incident-main strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.admin-incident-main span {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-incident-actions {
  display: flex;
  gap: 8px;
}

.admin-grant-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-grant-row:hover {
  transform: translateY(-2px);
}

.admin-grant-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-grant-main strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.admin-grant-main span {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-grant-actions {
  display: flex;
  gap: 8px;
}

/* --- Settings --- */
.admin-settings-editor {
  display: grid;
  gap: 28px;
}

.admin-settings-section h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  color: var(--text);
}

.admin-settings-form {
  display: grid;
  gap: 16px;
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .admin-form-row {
    grid-template-columns: 1fr;
  }
}

.admin-field {
  display: grid;
  gap: 8px;
}

.admin-field label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* --- Feature Flags --- */
.admin-feature-flags {
  display: grid;
  gap: 10px;
}

.admin-flag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-flag-row:hover {
  transform: translateY(-2px);
}

.admin-flag-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.admin-flag-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- API Keys --- */
.admin-api-keys {
  display: grid;
  gap: 10px;
}

.admin-key-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  font-family: var(--font-mono);
  font-size: 13px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-key-row:hover {
  transform: translateY(-2px);
}

.admin-key-info {
  display: grid;
  gap: 4px;
}

.admin-key-name {
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text);
}

.admin-key-value {
  color: var(--text-muted);
}

/* --- Modal --- */
.admin-modal-overlay[hidden] {
  display: none !important;
}

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
  backdrop-filter: blur(var(--blur-lg)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(170%);
  animation: modalOverlayIn 0.2s ease;
}


.admin-modal {
  width: min(640px, 90vw);
  max-height: 85vh;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg-strong) 88%, transparent), color-mix(in srgb, var(--glass-bg) 76%, transparent));
  backdrop-filter: blur(var(--blur-lg)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(170%);
  box-shadow: var(--shadow-3), var(--glass-glow), inset 0 0 0 1px var(--border-inner);
  display: flex;
  flex-direction: column;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
}

.admin-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 30% 20%, rgba(123, 220, 255, 0.08), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
}


.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  position: relative;
  z-index: 1;
}

.admin-modal-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--text) 40%, var(--accent) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 55%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 35%, transparent);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.admin-modal-close:hover {
  background: color-mix(in srgb, var(--glass-bg-strong) 55%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  transform: translateY(-2px);
}

.admin-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 30%, transparent);
  position: relative;
  z-index: 1;
}

/* --- Form Select/Inputs in Modals --- */
.admin-modal-body .field {
  display: grid;
  gap: 8px;
}

.admin-modal-body .field label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.admin-modal-body .field input,
.admin-modal-body .field select,
.admin-modal-body .field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg-strong) 86%, transparent), color-mix(in srgb, var(--glass-bg) 72%, transparent));
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 14px 28px rgba(2, 6, 12, 0.38);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.admin-modal-body .field input:focus,
.admin-modal-body .field select:focus,
.admin-modal-body .field textarea:focus {
  outline: none;
}

.admin-modal-body .field input:focus-visible,
.admin-modal-body .field select:focus-visible,
.admin-modal-body .field textarea:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px rgba(123, 220, 255, 0.25);
}

.admin-modal-body .field textarea {
  min-height: 90px;
  resize: vertical;
  border-radius: var(--radius-md);
}

/* --- Upload Zone --- */
.admin-upload-zone {
  border: 2px dashed color-mix(in srgb, var(--glass-border) 65%, transparent);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: color-mix(in srgb, var(--glass-bg) 30%, transparent);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  transition: border-color 0.25s ease,
              background-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
  cursor: pointer;
}

.admin-upload-zone:hover,
.admin-upload-zone.is-dragover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
  background: color-mix(in srgb, rgba(123, 220, 255, 0.08) 40%, var(--glass-bg));
  color: var(--text);
  box-shadow: 0 0 24px rgba(123, 220, 255, 0.15);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .admin-tabs {
    padding: 6px;
  }

  .admin-tab {
    padding: 8px 16px;
    font-size: 12px;
  }

  .admin-product-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-row,
  .admin-hwid-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-modal {
    width: 100%;
    max-height: 90vh;
    margin: 16px;
  }

  .admin-modal-body {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .admin-tab {
    flex-shrink: 0;
  }

  .admin-editor-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-editor-toolbar .thread-search {
    max-width: none;
  }
}

/* ─── Status Badges for Bundles & Gifts ───────────────────────────────────── */

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-active {
  background: none;
  color: var(--status-success);
  border: none;
}

.status-draft {
  background: none;
  color: #9fb1cc;
  border: none;
}

.status-archived {
  background: none;
  color: var(--status-danger);
  border: none;
}

.status-pending {
  background: rgba(242, 201, 143, 0.15);
  color: var(--status-warning);
  border: 1px solid rgba(242, 201, 143, 0.3);
}

.status-sent {
  background: rgba(123, 220, 255, 0.15);
  color: #7bdcff;
  border: 1px solid rgba(123, 220, 255, 0.3);
}

.status-redeemed {
  background: rgba(110, 227, 178, 0.15);
  color: var(--status-success);
  border: 1px solid rgba(110, 227, 178, 0.3);
}

.status-expired {
  background: rgba(240, 156, 176, 0.1);
  color: var(--status-danger);
  border: 1px solid rgba(240, 156, 176, 0.2);
}

.status-cancelled {
  background: rgba(240, 156, 176, 0.1);
  color: var(--status-danger);
  border: 1px solid rgba(240, 156, 176, 0.2);
}

/* --- Pending Approvals --- */
.approval-row { align-items: flex-start; }
.approval-row.is-blocked {
  border-color: color-mix(in srgb, var(--status-warning) 28%, var(--border-subtle));
  background: color-mix(in srgb, var(--status-warning) 5%, transparent);
}
.approval-name { font-weight: 600; color: var(--text); }
.approval-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.approval-pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.approval-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.approval-pill.is-verified {
  color: color-mix(in srgb, var(--status-success) 88%, #e8f6f1 12%);
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
}
.approval-pill.is-unverified {
  color: color-mix(in srgb, var(--status-warning) 90%, #f7efe2 10%);
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
}
/* Approval panel — editable product grant chips */
.approval-products { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.approval-products-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #a8b9d4); margin-right: 2px; }
.approval-products-none { font-size: 11px; color: var(--text-muted, #a8b9d4); opacity: 0.7; }
.approval-prod-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--text-soft, #c4d2ea);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer; user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.approval-prod-chip input { position: absolute; opacity: 0; pointer-events: none; }
.approval-prod-chip::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.28);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.approval-prod-chip:has(input:checked) {
  color: var(--text, #eef3ff);
  background: color-mix(in srgb, var(--accent, #7bdcff) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 42%, transparent);
}
.approval-prod-chip:has(input:checked)::before {
  background: linear-gradient(135deg, var(--accent, #7bdcff), var(--accent-2, #9b8cff));
  border-color: transparent;
}

/* ============================================================
   Run History — luxury treatment matching cyno.gg's glass aesthetic.
   Goals: refined typography, glass surfaces, gradient accents on accents
   (kind/result/product), no awkward text-wrapping inside pills, calm
   hover lift with an inset accent glow.
   ============================================================ */

/* Header & summary pill */
.admin-runs-summary { display: flex; gap: 8px; align-items: center; }
.admin-runs-summary .pill {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #7bdcff) 22%, transparent),
    color-mix(in srgb, var(--accent-2, #9b8cff) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 38%, transparent);
  color: var(--text, #eef3ff);
  letter-spacing: 0.04em;
}

/* Filter rail — glass card with hairline accent border */
.admin-runs-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
  margin-bottom: 22px;
  padding: 18px 18px 16px;
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent, #7bdcff) 4%, rgba(8,11,20,0.55)),
      rgba(8,11,20,0.55));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 14%, rgba(255,255,255,0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 36px -18px rgba(0,0,0,0.6);
}
.admin-runs-filters::before {
  /* Subtle gradient hairline at the top edge */
  content: "";
  position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent, #7bdcff) 60%, transparent),
    color-mix(in srgb, var(--accent-2, #9b8cff) 50%, transparent),
    transparent);
  opacity: 0.6;
  pointer-events: none;
}
.admin-runs-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.admin-runs-field .metric-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 60%, transparent);
}
.admin-runs-field input,
.admin-runs-field select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: var(--text, #eef3ff);
  font: 500 13px/1.2 "Manrope", system-ui, sans-serif;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.admin-runs-field input::placeholder { color: color-mix(in srgb, var(--text, #eef3ff) 35%, transparent); }
.admin-runs-field input:hover,
.admin-runs-field select:hover {
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 35%, rgba(255,255,255,0.08));
}
.admin-runs-field input:focus,
.admin-runs-field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7bdcff) 20%, transparent);
  background: linear-gradient(180deg, rgba(123,220,255,0.05), rgba(255,255,255,0.02));
}
.admin-runs-actions { display: flex; gap: 8px; align-items: flex-end; }
.admin-runs-actions .btn { padding: 9px 14px; }

/* Per-user activity summary banner */
.run-user-summary {
  position: relative;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    radial-gradient(900px 200px at 0% 0%,
      color-mix(in srgb, var(--accent, #7bdcff) 16%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(15,18,28,0.78), rgba(8,11,20,0.78));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 22%, rgba(255,255,255,0.06));
  box-shadow: 0 24px 48px -28px rgba(123,220,255,0.35);
  overflow: hidden;
}
.run-user-summary__head { margin-bottom: 14px; }
.run-user-summary__head h3 {
  margin: 4px 0 0;
  font: 600 20px/1.2 "Sora", "Manrope", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text, #eef3ff);
}
.run-user-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 22px;
}
.run-user-summary__num {
  font: 600 18px/1.15 "Sora", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--text, #eef3ff);
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* Runs table — glass surface, hairline rows, refined header */
.admin-runs-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,18,28,0.65), rgba(8,11,20,0.65));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 10%, rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 40px -22px rgba(0,0,0,0.55);
}
.admin-runs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 500 13px/1.45 "Manrope", system-ui, sans-serif;
  min-width: 1120px;
}
.admin-runs-table thead th {
  text-align: left;
  font: 600 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 12%, rgba(255,255,255,0.06));
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.admin-runs-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  vertical-align: middle;
  /* Prevent awkward text-wrap on identifier-like cells */
  white-space: nowrap;
}
/* Allow user name + email to wrap to two lines (it's the only multi-line cell) */
.admin-runs-table tbody td:nth-child(2) { white-space: normal; min-width: 180px; }
.admin-runs-table tbody tr {
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.admin-runs-table tbody tr:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent, #7bdcff) 8%, transparent),
      transparent 70%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent, #7bdcff) 75%, transparent);
}
.admin-runs-table tbody tr:last-child td { border-bottom: none; }
.admin-runs-table .mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text, #eef3ff) 82%, transparent);
}
.admin-runs-empty {
  text-align: center !important;
  padding: 44px 12px !important;
  color: color-mix(in srgb, var(--text, #eef3ff) 50%, transparent);
  font-style: italic;
}
.run-user strong {
  color: var(--text, #eef3ff);
  font: 600 13px/1.3 "Manrope", system-ui, sans-serif;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.run-user .metric-label {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--text, #eef3ff) 45%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* PRODUCT pill — glossy accent chip, no wrapping */
.run-product {
  display: inline-block;
  white-space: nowrap;
  padding: 4px 11px;
  border-radius: 999px;
  font: 600 11.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #7bdcff) 96%, white);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #7bdcff) 22%, transparent),
    color-mix(in srgb, var(--accent-2, #9b8cff) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* KIND chip — matches site's eyebrow rhythm, no wrap */
.run-kind {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  font: 700 10.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.run-kind--internal {
  color: #ffd8b4;
  background: linear-gradient(135deg,
    color-mix(in srgb, #ff9b6b 28%, transparent),
    color-mix(in srgb, #ff9b6b 10%, transparent));
  border-color: color-mix(in srgb, #ff9b6b 45%, transparent);
}
.run-kind--external {
  color: #d9d0ff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-2, #9b8cff) 28%, transparent),
    color-mix(in srgb, var(--accent-2, #9b8cff) 10%, transparent));
  border-color: color-mix(in srgb, var(--accent-2, #9b8cff) 50%, transparent);
}

/* RESULT chip — calmer tones, dot indicator */
.run-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  font: 700 10.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.run-result::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  opacity: 0.95;
}
.run-result--ok {
  color: #6ee7b7;
  background: color-mix(in srgb, #6ee7b7 14%, transparent);
  border-color: color-mix(in srgb, #6ee7b7 35%, transparent);
}
.run-result--err {
  color: #fca5a5;
  background: color-mix(in srgb, #f87171 14%, transparent);
  border-color: color-mix(in srgb, #f87171 35%, transparent);
}
.run-result--banned {
  color: #fda4af;
  background: color-mix(in srgb, #f43f5e 18%, transparent);
  border-color: color-mix(in srgb, #f43f5e 45%, transparent);
}
.run-result--pending {
  color: color-mix(in srgb, var(--text, #eef3ff) 72%, transparent);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.run-result--pending::before { animation: runDotPulse 1.6s ease-in-out infinite; }
@keyframes runDotPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .run-result--pending::before { animation: none; }
}

/* Surface count chip */
.run-surface-count {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #7bdcff) 12%, transparent),
    rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  font: 600 11.5px/1.2 "Sora", "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--text, #eef3ff);
  letter-spacing: 0.02em;
}

/* Action column "Details" button */
.admin-runs-table .btn-sm {
  padding: 6px 12px;
  font: 600 11.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 9px;
  white-space: nowrap;
}

/* Pager */
.admin-runs-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 18px;
  padding-top: 4px;
}
.admin-runs-pager .metric-label {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* ── Drill-in modal — glass card with gradient halo ── */
.admin-run-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.admin-run-modal[hidden] { display: none; }
.admin-run-modal__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 50% 35%,
      color-mix(in srgb, var(--accent, #7bdcff) 8%, transparent) 0%,
      transparent 60%),
    rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(8px);
}
.admin-run-modal__card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 24%, rgba(255,255,255,0.06));
  background:
    radial-gradient(800px 400px at 0% 0%,
      color-mix(in srgb, var(--accent, #7bdcff) 10%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(14,17,26,0.94), rgba(8,11,20,0.94));
  box-shadow:
    0 50px 120px -40px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-run-modal__card .panel-header { padding: 22px 24px 16px; align-items: flex-start; }
.admin-run-modal__card .panel-header h3 {
  margin: 4px 0 0;
  font: 600 22px/1.2 "Sora", "Manrope", system-ui, sans-serif;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--accent, #7bdcff), var(--accent-2, #9b8cff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.admin-run-modal__card .panel-body { padding: 18px 24px 24px; }

.run-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  margin-bottom: 22px;
}
.run-meta-grid > div { min-width: 0; }
.run-meta-grid .metric-label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
  margin-bottom: 4px;
}
.run-meta-grid .mono { word-break: break-all; font-size: 12.5px; }
.run-ua { font-size: 11px; }

.run-section-title {
  font: 600 11px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 58%, transparent);
  margin: 26px 0 12px;
  display: flex; align-items: center; gap: 12px;
}
.run-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent, #7bdcff) 35%, transparent),
    transparent);
}

.run-surface-group { margin-bottom: 18px; }
.run-surface-group h4 {
  font: 700 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #7bdcff) 70%, var(--text-muted, #a8b9d4));
  margin: 0 0 10px;
}
.run-surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.run-surface-cell {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012));
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.run-surface-cell.is-on {
  border-color: color-mix(in srgb, #6ee7b7 45%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #6ee7b7 10%, transparent),
      color-mix(in srgb, #6ee7b7 3%, transparent));
}
.run-surface-cell.is-off { opacity: 0.48; }
.run-surface-cell:hover { transform: translateY(-1px); }
.run-surface-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 5px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.run-surface-cell.is-on .run-surface-dot {
  background: #6ee7b7;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #6ee7b7 22%, transparent),
    0 0 12px color-mix(in srgb, #6ee7b7 55%, transparent);
}
.run-surface-name {
  color: var(--text, #eef3ff);
  font: 600 13px/1.25 "Manrope", system-ui, sans-serif;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}
.run-surface-cell .metric-label {
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text, #eef3ff) 50%, transparent);
}

/* Events table inside modal */
.admin-runs-events {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.admin-runs-events th, .admin-runs-events td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-runs-events thead th {
  font: 600 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}
.admin-runs-events tbody tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  .admin-runs-filters { grid-template-columns: 1fr 1fr; padding: 14px; }
  .admin-runs-actions { grid-column: span 2; }
  .admin-run-modal { padding: 12px; }
  .admin-run-modal__card { max-height: 92vh; border-radius: 18px; }
  .admin-runs-table { min-width: 720px; font-size: 12px; }
}
/* ============================================================
   Run History sub-tabs (Runs / Errors / Security) + chips
   ============================================================ */
.admin-runs-subtabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,18,28,0.55), rgba(8,11,20,0.55));
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 10%, rgba(255,255,255,0.05));
  width: max-content; max-width: 100%;
}
.admin-runs-subtab {
  appearance: none; cursor: pointer;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text, #eef3ff) 70%, transparent);
  font: 600 12px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.admin-runs-subtab:hover {
  color: var(--text, #eef3ff);
  background: rgba(255,255,255,0.04);
}
.admin-runs-subtab.is-active {
  color: color-mix(in srgb, var(--accent, #7bdcff) 96%, white);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #7bdcff) 22%, transparent),
    color-mix(in srgb, var(--accent-2, #9b8cff) 18%, transparent));
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-runs-subpanel] { display: none; }
[data-runs-subpanel].is-active { display: block; }

/* Stage chip (errors) */
.err-stage {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  padding: 3px 10px;
  font: 700 10.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: none;
  box-shadow: none;
}
.err-stage--startup  { color: #fda4af; background: none; border: none; }
.err-stage--runtime  { color: #fcd34d; background: none; border: none; }
.err-stage--shutdown { color: #a5b4fc; background: none; border: none; }
.err-stage--unknown  { color: color-mix(in srgb, var(--text,#eef3ff) 65%, transparent); background: none; border: none; }

.err-msg {
  min-width: 260px;
  max-width: 460px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--text, #eef3ff) 80%, transparent);
  font: 500 12.5px/1.45 "Manrope", system-ui, sans-serif;
}
.err-runid {
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
}

/* Security: severity / action / kind chips */
.sec-sev {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  font: 700 10.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.sec-sev::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.sec-sev--critical {
  color: #fda4af;
  background: color-mix(in srgb, #f43f5e 18%, transparent);
  border-color: color-mix(in srgb, #f43f5e 48%, transparent);
}
.sec-sev--warn {
  color: #fcd34d;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.sec-action {
  display: inline-block;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 10.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sec-action--banned {
  color: #fecaca;
  background: linear-gradient(135deg,
    color-mix(in srgb, #f43f5e 26%, transparent),
    color-mix(in srgb, #f43f5e 12%, transparent));
  border: 1px solid color-mix(in srgb, #f43f5e 50%, transparent);
}
.sec-action--logged {
  color: color-mix(in srgb, var(--text, #eef3ff) 70%, transparent);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.sec-kind {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #eef3ff);
  font: 600 11.5px/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Security drill-in modal — evidence lists */
.sec-detail {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid color-mix(in srgb, #f43f5e 22%, rgba(255,255,255,0.06));
  font: 500 13px/1.5 "Manrope", system-ui, sans-serif;
  color: color-mix(in srgb, var(--text, #eef3ff) 92%, transparent);
  margin-bottom: 4px;
}
.sec-evidence-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.sec-evidence-list li {
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: color-mix(in srgb, var(--text, #eef3ff) 85%, transparent);
  word-break: break-all;
}

@media (max-width: 720px) {
  .admin-runs-subtabs { width: 100%; justify-content: space-between; }
  .admin-runs-subtab { flex: 1; text-align: center; padding: 8px 10px; }
  .err-msg { max-width: none; }
}

/* Ensure wide admin data-tables (Bundles, Gifts) scroll horizontally instead of
   overflowing the panel on mid-width screens. */
.admin-tab-panel .data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Binding Overview — luxury HWID stat cards ─────────────────────────── */
.hwid-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.hwid-stat-card {
  position: relative;
  padding: 20px 18px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent);
  background:
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong) 80%, transparent), color-mix(in srgb, var(--glass-bg) 55%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(2, 6, 12, 0.35);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
/* accent rail on the left edge */
.hwid-stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0.85;
}
.hwid-stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(2, 6, 12, 0.5),
    0 0 30px color-mix(in srgb, var(--accent) 14%, transparent);
}
.hwid-stat-value {
  font-family: var(--font-display, "Sora"), sans-serif;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hwid-stat-label {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Subtle emphasis for the risk metrics (shared HWIDs, active bans). */
.hwid-stat-card:nth-child(4) .hwid-stat-value,
.hwid-stat-card:nth-child(6) .hwid-stat-value {
  background: linear-gradient(135deg, var(--text) 30%, #f3b6c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hwid-stat-card:nth-child(4)::before,
.hwid-stat-card:nth-child(6)::before {
  background: linear-gradient(180deg, #f09cb0, #f2c98f);
  box-shadow: 0 0 10px rgba(240, 156, 176, 0.5);
}

/* HWID Lookup / HWID Change History search bars — the input and Search/Lookup
   button had no gap and touched. Give them a proper flex row with spacing. */
.hwid-search-bar {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 16px;
}
.hwid-search-bar .thread-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.hwid-search-bar .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .hwid-search-bar { flex-direction: column; }
}

/* In the product catalog list the row is a fixed-height pill, but it carries 3
   status tags (status · risk · tier). The old wrap+fixed-height combo let the
   tags overflow and overlap each other. Keep them in a single compact column,
   centered, and let the row grow to fit so nothing stacks on top. */
.admin-product-list .admin-row { min-height: 64px; align-items: center; }
.admin-product-list .admin-row-tags {
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
}
.admin-product-list .admin-row-tags .pill,
.admin-product-list .admin-row-tags .status-pill {
  font-size: 10px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ============================================================
   Admin upgrade — row + table readability polish (CSS-only)
   ============================================================ */

/* Selectable rows: gentle hover lift + accent left-rail on the active one. */
.admin-row {
  position: relative;
  /* Keep the accent rail clipped to the rounded corners, but never crop the
     content — the row must grow to fit the title + 2-line meta (was clipping
     the product name off the top). */
  overflow: visible;
  align-items: center;
  min-height: 56px;
}
.admin-row.is-active::before { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.admin-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 14px 28px rgba(2, 6, 12, 0.45),
    0 0 22px color-mix(in srgb, var(--accent) 10%, transparent);
}
.admin-row.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Mini tables: sticky header + zebra + row hover for scannability. */
.admin-mini-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--glass-bg-strong) 92%, transparent),
    color-mix(in srgb, var(--glass-bg) 80%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-mini-table tbody tr {
  transition: background-color 0.18s ease;
}
.admin-mini-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--glass-bg) 22%, transparent);
}
.admin-mini-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}
.admin-mini-table tbody tr:last-child td { border-bottom: none; }

/* Section headings inside content panels read a touch more premium. */
.admin-tab-content .panel-body > h2 {
  letter-spacing: -0.01em;
}