/* Shared with the Claude Code Workshop frontend — same brand system. */
@font-face {
  font-family: "Sora SIA";
  src: url("/fonts/Sora-SIA-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("/fonts/Sora-SIA-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("/fonts/Sora-SIA-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("/fonts/Sora-SIA-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --dark: #173044;
  --light: #f4f6fc;
  --mid-gray: #8796a9;
  --light-gray: #dde1ea;
  --orange: #00decc;
  --orange-hover: #00c4b4;
  --teal-on-light: #007a70;
  --green: #077c84;
  --orange-soft: rgba(0, 222, 204, 0.12);
  --green-soft: rgba(7, 124, 132, 0.12);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --danger-on-light: #c23b3b; /* darker red for contrast on white cards/badges */
  --amber-soft: rgba(245, 158, 11, 0.14);
  --amber-on-light: #b45309;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(23, 48, 68, 0.06);
  --shadow-md: 0 4px 16px rgba(23, 48, 68, 0.08);
  --shadow-lg: 0 8px 32px rgba(23, 48, 68, 0.16);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --sans: "Sora SIA", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--sans);
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}
a {
  color: var(--orange);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
code,
.mono {
  font-family: var(--mono);
}

/* ─── Dark public pages (join, waiting, error) ─── */
.public-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  overflow: hidden;
  background: var(--dark);
}

.public-page::before {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 800px;
  height: 800px;
  content: "";
  background: radial-gradient(
    circle,
    rgba(0, 222, 204, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

.public-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 2.25rem;
  text-align: center;
  background: rgba(244, 246, 252, 0.04);
  border: 1px solid rgba(244, 246, 252, 0.08);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
}

.public-card.wide {
  max-width: 460px;
  text-align: left;
}

.brand-logo {
  align-self: flex-start;
  width: auto;
  height: 28px;
  margin-bottom: 1.5rem;
  object-fit: contain;
}
.public-card.wide .brand-logo {
  margin-bottom: 2rem;
}

.public-card h1 {
  margin-bottom: 0.4rem;
  font-size: 1.4rem;
  color: var(--light);
}

.public-card .subtitle {
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  color: var(--mid-gray);
}

.field-row {
  display: flex;
  gap: 0.75rem;
}
.field-row > div {
  flex: 1;
}

.field {
  margin-bottom: 1.1rem;
  text-align: left;
}

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field input,
.field select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--light);
  outline: none;
  background: rgba(244, 246, 252, 0.06);
  border: 1px solid rgba(244, 246, 252, 0.12);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.field input::placeholder {
  color: rgba(135, 150, 169, 0.7);
}

.field input:focus,
.field select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(0, 222, 204, 0.15);
}

.field-hint {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--mid-gray);
}

.btn-primary {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  background: var(--orange);
  border: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--orange-hover);
  box-shadow: 0 4px 16px rgba(0, 222, 204, 0.3);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-back {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 1.75rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--mid-gray);
}

.btn-back:hover {
  color: var(--light);
  text-decoration: none;
}

.status-glyph {
  margin-bottom: 1.5rem;
}
.status-glyph.error {
  color: var(--danger);
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.5rem;
  border: 3px solid rgba(0, 222, 204, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status-line {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--mid-gray);
}

/* ─── Light admin shell ─── */
.admin-shell {
  display: flex;
  min-height: 100vh;
  background: var(--light);
}

.admin-sidebar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  width: 220px;
  padding: 1.5rem 1.1rem;
  color: var(--light);
  background: var(--dark);
}

.admin-sidebar .brand-logo {
  align-self: flex-start;
  width: auto;
  height: 22px;
  margin: 0.25rem 0 1.75rem;
}

.admin-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-nav a {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--mid-gray);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.admin-nav a:hover,
.admin-nav a.active {
  color: var(--light);
  text-decoration: none;
  background: rgba(244, 246, 252, 0.06);
}

.admin-nav a.active {
  background: rgba(0, 222, 204, 0.15);
}

.admin-user {
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--mid-gray);
  border-top: 1px solid rgba(244, 246, 252, 0.08);
}

.admin-user .email {
  font-weight: 500;
  color: var(--light);
  word-break: break-all;
}
.admin-user a {
  font-size: 0.78rem;
  color: var(--mid-gray);
}
.admin-user a:hover {
  color: var(--orange);
}

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 2rem 2.5rem 3rem;
}

/* Expired/invalid CODER_ADMIN_TOKEN — shown above every admin page. */
.token-banner {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--danger-on-light);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
}

.admin-header,
.card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.admin-header {
  align-items: baseline;
  margin-bottom: 1.5rem;
}
.admin-header h1 {
  font-size: 1.55rem;
  color: var(--dark);
}
.admin-header .crumb {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--mid-gray);
}
.admin-header .crumb a {
  color: var(--mid-gray);
}
.admin-header .crumb a:hover {
  color: var(--orange);
}

.card {
  background: white;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-pad {
  padding: 1.5rem 1.75rem;
}
.card + .card {
  margin-top: 1.25rem;
}

.card-header {
  align-items: center;
  padding: 1.1rem 1.75rem;
  border-bottom: 1px solid var(--light-gray);
}

.card-header h2 {
  font-size: 0.95rem;
  color: var(--dark);
}

.card-header .field-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.card-header .field-inline label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.card-header .field-inline input {
  width: 180px;
  padding: 0.45rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--dark);
  outline: none;
  background: var(--light);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.card-header .field-inline input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}

.card-header .crumb-clear {
  font-size: 0.82rem;
  color: var(--mid-gray);
}
.card-header .crumb-clear:hover {
  color: var(--orange);
}

.meta-line {
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
  color: var(--mid-gray);
}
.meta-line b,
.meta-line strong {
  font-weight: 600;
  color: var(--dark);
}
.meta-line .mono {
  color: var(--dark);
}
.meta-line-spaced {
  margin-top: 0.35rem;
}

.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

thead th {
  padding: 0.85rem 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(23, 48, 68, 0.03);
  border-bottom: 1px solid var(--light-gray);
}

tbody td {
  padding: 0.8rem 1.25rem;
  font-size: 0.9rem;
  color: var(--dark);
  border-bottom: 1px solid var(--light-gray);
}

tbody tr:last-child td {
  border-bottom: none;
}
tbody tr:hover td {
  background: rgba(23, 48, 68, 0.02);
}

/* Shrink the actions column to its content instead of stretching with the
   table (default table-layout distributes leftover width across columns,
   leaving a wide dead gap after Remove) — the classic width:1% + nowrap
   trick pushes that space to Name/Username instead. Scoped to rows with
   the actions column (not .log-panel's colspan row, which must still wrap). */
.col-actions,
tr:not(.log-panel):not(.empty-row) > td:last-child {
  width: 1%;
  white-space: nowrap;
}
.empty-row td {
  padding: 2rem;
  color: var(--mid-gray);
  text-align: center;
}

.badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.22rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 20px;
}

.badge.active,
.badge.ready {
  color: var(--green);
  background: var(--green-soft);
}
.badge.ended,
.badge.cleaned,
.badge.unknown {
  color: var(--mid-gray);
  background: rgba(135, 150, 169, 0.15);
}
.badge.pending,
.badge.provisioning,
.badge.starting {
  color: var(--amber-on-light);
  background: var(--amber-soft);
}
.badge.failed,
.badge.canceled,
.badge.canceling,
.badge.deleting,
.badge.deleted,
.badge.error {
  color: var(--danger-on-light);
  background: var(--danger-soft);
}
.badge.you {
  color: var(--teal-on-light);
  background: var(--orange-soft);
}

.btn {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.55rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
  background: var(--orange);
  border: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn:hover:not(:disabled) {
  text-decoration: none;
  background: var(--orange-hover);
}

.btn-danger {
  color: var(--danger-on-light);
  background: var(--danger-soft);
}
.btn-danger:hover {
  background: rgba(255, 107, 107, 0.22);
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Ghost: low-emphasis view/toggle actions (Logs, Open workspace) — outlined,
   not filled, so they read as secondary next to a real mutation button. */
.btn-ghost {
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--light-gray);
}
.btn-ghost:hover {
  background: rgba(23, 48, 68, 0.04);
  border-color: var(--mid-gray);
}

/* Icon-only square button (e.g. "open in new tab") — same visual weight as
   btn-sm but no label, so it needs equal width/height instead of padding. */
.btn-icon {
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0.4rem;
}

/* Warn: a real mutation (rebuilds the workspace) but not destructive. Soft
   amber tint on light — the same treatment as the destructive Remove
   (btn-danger), so the two mutating actions in the roster row read as
   equal-weight siblings and neither out-shouts the other. */
.btn-warn {
  color: var(--amber-on-light);
  background: var(--amber-soft);
}
.btn-warn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.22);
}

.btn svg {
  flex-shrink: 0;
}

/* Same gap as .admin-header's action pair (Stats / Delete workshop) — each
   action reads as its own control, not a squeezed cluster. */
.roster-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.params-card {
  margin-bottom: 1.25rem;
}
.params-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.params-list .param-row {
  display: flex;
  gap: 0.75rem;
}
.params-list dt {
  min-width: 140px;
  font-size: 0.82rem;
  color: var(--mid-gray);
}
.params-list dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--dark);
  word-break: break-all;
}

.text-sm {
  font-size: 0.82rem;
}
.text-muted {
  color: var(--mid-gray);
}

.logs-toggle .chevron {
  transition: transform var(--transition);
}
.logs-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* One dark console card holds the header (build-output label) and the log
   output together, so it reads as a single terminal, not a floating
   header sitting on the white row above a separate dark box. */
.log-console {
  overflow: hidden;
  background: var(--dark);
  border-radius: var(--radius-sm);
}

.log-console-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(244, 246, 252, 0.1);
}

.log-console-header .meta-line {
  margin: 0;
  color: var(--mid-gray);
}
.log-console-header .meta-line .mono {
  color: var(--light);
}

.log-output {
  max-height: 240px;
  padding: 0.75rem;
  margin: 0;
  overflow: auto;
  font-size: 0.78rem;
  color: var(--light);
}

.form-card label {
  display: block;
  margin: 1.1rem 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-card > label:first-of-type {
  margin-top: 0;
}

/* #params holds JS-injected label/input pairs (one per template rich
   parameter) as its own nested block — :first-of-type only looks at
   position within its immediate parent, so scoping the reset to direct
   children above keeps it from firing on the injected block's first label
   too and crushing the gap above it. */
#params label:first-of-type {
  margin-top: 1.1rem;
}

.form-card input,
.form-card select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--dark);
  outline: none;
  background: var(--light);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.form-card input:focus,
.form-card select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(0, 222, 204, 0.12);
}

.form-hint {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--mid-gray);
}
.form-actions {
  margin-top: 1.75rem;
}

.field-error {
  margin-bottom: 1rem;
  color: var(--danger);
}
.field-row-hint {
  margin-bottom: 1.1rem;
}
.form-narrow {
  max-width: 520px;
}
.form-card fieldset.model-select {
  padding: 0;
  margin: 1.1rem 0 0;
  border: none;
}
.form-card .model-select legend {
  padding: 0;
  margin: 1.1rem 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.model-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.model-list label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--dark);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.form-card .model-list input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.public-card .subtitle.subtitle-flush {
  margin-bottom: 0;
}

/* ─── Roster: KPI stat cards above the participant table ─── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  padding: 1.1rem 1.25rem;
  background: white;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.stat-card .stat-label {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card .stat-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
}

.stat-card .stat-value.orange {
  color: var(--teal-on-light);
}
.stat-card .stat-value.green {
  color: var(--green);
}
.stat-card .stat-value.sm {
  font-size: 1.1rem;
}
.stat-card .stat-value .suffix {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mid-gray);
}
.stat-card .stat-sub {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--mid-gray);
}

.chart-title {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.chart-box {
  position: relative;
  height: 220px;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.4rem;
  background: var(--green);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}
.badge.pending .live-dot,
.badge.provisioning .live-dot,
.badge.starting .live-dot {
  background: var(--amber-on-light);
}
.badge.ended .live-dot,
.badge.cleaned .live-dot,
.badge.unknown .live-dot {
  background: var(--mid-gray);
  animation: none;
}
.badge.failed .live-dot,
.badge.canceled .live-dot,
.badge.canceling .live-dot,
.badge.deleting .live-dot,
.badge.deleted .live-dot,
.badge.error .live-dot {
  background: var(--danger-on-light);
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.75);
  }
}

/* ─── Mobile admin nav ─── */
.mobile-menu-btn {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--light);
  cursor: pointer;
  background: var(--dark);
  border: none;
  border-radius: var(--radius-sm);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgba(23, 48, 68, 0.5);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  .admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 240px;
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }
  .mobile-overlay.open {
    display: block;
  }

  .admin-main {
    padding: 4.5rem 1.25rem 2rem;
  }
  .admin-header,
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .card-header .field-inline {
    flex-wrap: wrap;
  }
  .card-header .field-inline input {
    width: 100%;
  }
}

/* ─── Confirm dialogs ─── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(23, 48, 68, 0.6);
  backdrop-filter: blur(2px);
}

.confirm-overlay.open {
  display: flex;
}

.confirm-card {
  width: 100%;
  max-width: 400px;
  padding: 1.75rem;
  background: var(--dark);
  border: 1px solid rgba(244, 246, 252, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: confirmIn 0.15s ease-out;
}

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

.confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 50%;
}

.confirm-card h2 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--light);
}
.confirm-card p {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mid-gray);
}
.confirm-card p strong {
  font-weight: 600;
  color: var(--light);
}

.confirm-card input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--light);
  outline: none;
  background: rgba(244, 246, 252, 0.06);
  border: 1px solid rgba(244, 246, 252, 0.14);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.confirm-card input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.confirm-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.confirm-cancel {
  padding: 0.55rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mid-gray);
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(244, 246, 252, 0.14);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.confirm-cancel:hover {
  color: var(--light);
  border-color: rgba(244, 246, 252, 0.3);
}

.confirm-submit {
  padding: 0.55rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  background: var(--danger);
  border: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.confirm-submit:hover:not(:disabled) {
  background: #ff5252;
}
.confirm-submit:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* Respect prefers-reduced-motion: neutralise the infinite spinner/live-pulse
   and entrance animations for users who ask for reduced motion. Layout and
   final states are unchanged, so the visual port stays pixel-identical for
   everyone else. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}