:root {
  --bg: #060b10;
  --card: rgba(10, 20, 28, 0.75);
  --ink: rgba(233, 246, 255, 0.92);
  --muted: rgba(233, 246, 255, 0.68);
  --line: rgba(0, 220, 255, 0.18);
  --line2: rgba(0, 220, 255, 0.12);
  --glow: rgba(0, 220, 255, 0.14);
  --glow2: rgba(0, 220, 255, 0.08);
  --danger: rgba(255, 90, 90, 0.55);
  --warn: rgba(255, 200, 0, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(0,220,255,0.12), transparent 55%),
    radial-gradient(900px 500px at 80% 40%, rgba(0,220,255,0.08), transparent 60%),
    var(--bg);
}

.page { padding: 28px; }

a { color: #7feaff; text-decoration: none; }
a:hover { text-decoration: underline; }

.header { margin-bottom: 14px; }
.title { font-size: 56px; font-weight: 900; letter-spacing: 0.5px; }
.phase { margin-top: 6px; opacity: 0.75; }
.links { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  border: 1px solid rgba(0, 220, 255, 0.28);
  background: rgba(0,0,0,0.25);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.icon { padding: 8px 10px; }
.btn.danger { border-color: rgba(255,90,90,0.40); }

/* =========================================================
   PHASE 0 FIX: MAIN PAGE LAYOUT MUST BE 1-COLUMN
   Orders on top, Reminders below (not right side)
   ========================================================= */
.grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.card {
  border-radius: 18px;
  border: 1px solid rgba(0, 220, 255, 0.18);
  background: rgba(0,0,0,0.18);
  box-shadow: 0 0 0 1px rgba(0,220,255,0.06) inset, 0 18px 70px rgba(0,0,0,0.30);
  overflow: hidden;
}

.cardTitle {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 220, 255, 0.12);
  letter-spacing: 2px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(0,0,0,0.22);
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,220,255,0.10);
}

.input, .select, input, select {
  border-radius: 14px;
  border: 1px solid rgba(0, 220, 255, 0.18);
  background: rgba(0,0,0,0.25);
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}
input::placeholder { color: rgba(233,246,255,0.55); }

.counters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,220,255,0.10);
}

.counterPill {
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.18);
  background: rgba(0,220,255,0.08);
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}
.counterPill.active {
  box-shadow: 0 0 0 2px rgba(0,220,255,0.20), 0 0 18px rgba(0,220,255,0.16);
}

.ordersTableWrap {
  padding: 12px 16px 16px;
  overflow: auto;
  max-height: 66vh;
}

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 10px;
  border-bottom: 1px solid rgba(0,220,255,0.08);
  font-size: 13px;
}
.table th {
  color: rgba(233,246,255,0.78);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 900;
}

.remindersList { padding: 14px 16px 16px; }
.muted { color: var(--muted); }

/* Overlay / modal base */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 999;
}
.overlay.hidden { display: none; }

.modal {
  border: 1px solid rgba(0,220,255,0.20);
  border-radius: 18px;
  background: rgba(0,0,0,0.20);
  box-shadow: 0 20px 90px rgba(0,0,0,0.50);
  overflow: hidden;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,220,255,0.12);
}
.modalTitle {
  letter-spacing: 2px;
  font-weight: 900;
  text-transform: uppercase;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   ORDER DETAILS HUD (your working engine style)
   ========================================================= */

#orderDetailsOverlay {
  background:
    radial-gradient(1100px 620px at 50% 18%, rgba(0,220,255,0.14), transparent 62%),
    radial-gradient(900px 520px at 20% 88%, rgba(0,220,255,0.08), transparent 60%),
    rgba(0,0,0,0.88);
}

#orderDetailsOverlay .modal.wide {
  width: min(1240px, 96vw);
  max-height: 92vh;
  border-radius: 22px;
  border: 2px solid rgba(0,220,255,0.55);
  background:
    radial-gradient(980px 520px at 14% 0%, rgba(0,220,255,0.26), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(0,220,255,0.14), transparent 64%),
    linear-gradient(180deg, rgba(10,18,28,0.992), rgba(5,9,14,0.972));
  box-shadow:
    0 46px 180px rgba(0,0,0,0.85),
    0 0 0 1px rgba(0,220,255,0.14) inset,
    0 0 64px rgba(0,220,255,0.12);
}

#orderDetailsOverlay .od-hud {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#orderDetailsOverlay .od-hud__topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(0,220,255,0.26), rgba(0,0,0,0.05)),
    radial-gradient(900px 160px at 50% 0%, rgba(0,220,255,0.18), transparent 70%);
  border-bottom: 2px solid rgba(0,220,255,0.30);
  backdrop-filter: blur(12px);
}

#orderDetailsOverlay .od-hud__grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  padding: 14px 16px 16px;
}

#orderDetailsOverlay .od-panel {
  position: relative;
  border-radius: 18px;
  border: 2px solid rgba(0,220,255,0.34);
  background:
    radial-gradient(820px 380px at 18% 0%, rgba(0,220,255,0.14), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.10) inset,
    0 0 52px rgba(0,220,255,0.08);
  overflow: hidden;
}

#orderDetailsOverlay .sectionTitle {
  margin: 10px 0 8px;
  padding-top: 14px;
  text-align: center;
  letter-spacing: 4px;
  font-weight: 950;
  text-transform: uppercase;
  color: rgba(233,246,255,0.96);
}

#orderDetailsOverlay .sectionTitle::after {
  content: "";
  display: block;
  margin: 10px auto 0;
  width: min(520px, 92%);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,0.82), transparent);
}

#orderDetailsOverlay .detailsGrid {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#orderDetailsOverlay .detailsGrid > div > div {
  border-radius: 14px;
  border: 1px solid rgba(0,220,255,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent),
    rgba(0,0,0,0.30);
  box-shadow: inset 0 0 0 1px rgba(0,220,255,0.06);
  padding: 10px 12px;
}

#orderDetailsOverlay #timelineBody {
  margin: 10px 12px 14px;
  max-height: 360px;
  overflow: auto;
  border-radius: 14px;
  border: 2px solid rgba(0,220,255,0.20);
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(0,220,255,0.16), transparent 70%),
    rgba(0,0,0,0.30);
  box-shadow: inset 0 0 0 1px rgba(0,220,255,0.08);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.48;
}

@media (max-width: 1100px) {
  #orderDetailsOverlay .od-hud__grid { grid-template-columns: 1fr; }
  #orderDetailsOverlay .detailsGrid { grid-template-columns: 1fr; }
}

/* =========================================================
   PHASE 0 UI: MAIN PAGE REMINDERS -> reminderlayout.png GRID CARDS
   Scoped ONLY to #remindersBody so it cannot affect Order Details.
   ========================================================= */

#remindersBody.remindersGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 14px 16px 16px;
}

#remindersBody .reminderCard {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(0, 220, 255, 0.16);
  background:
    radial-gradient(820px 280px at 24% 0%, rgba(0,220,255,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.22));
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.05),
    0 18px 60px rgba(0,0,0,0.25);
  padding: 14px 14px 12px;
  overflow: hidden;
  min-height: 120px;
}

#remindersBody .reminderCard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(0,220,255,0.70);
  opacity: 0.95;
}
#remindersBody .reminderCard.dueSoon::before { background: rgba(255,200,0,0.78); }
#remindersBody .reminderCard.overdue::before { background: rgba(255,80,80,0.82); }

#remindersBody .reminderTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#remindersBody .reminderLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#remindersBody .reminderId {
  font-weight: 900;
  letter-spacing: 1px;
  opacity: 0.95;
}

#remindersBody .reminderBuyer {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  opacity: 0.95;
}

#remindersBody .reminderRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

#remindersBody .reminderDue {
  font-weight: 900;
  color: rgba(0,220,255,0.92);
  letter-spacing: 0.5px;
}
#remindersBody .reminderCard.dueSoon .reminderDue { color: rgba(255,200,0,0.92); }
#remindersBody .reminderCard.overdue .reminderDue { color: rgba(255,80,80,0.92); }

#remindersBody .reminderBadge {
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(0,220,255,0.20);
  background: rgba(0,220,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,220,255,0.05);
}

#remindersBody .reminderCard.st-new .reminderBadge {
  border-color: rgba(90,255,140,0.30);
  background: rgba(90,255,140,0.10);
}
#remindersBody .reminderCard.st-paid .reminderBadge {
  border-color: rgba(0,220,255,0.26);
  background: rgba(0,220,255,0.10);
}
#remindersBody .reminderCard.st-review .reminderBadge {
  border-color: rgba(255,200,0,0.32);
  background: rgba(255,200,0,0.10);
}
#remindersBody .reminderCard.st-refunded .reminderBadge {
  border-color: rgba(255,80,80,0.28);
  background: rgba(255,80,80,0.10);
}
#remindersBody .reminderCard.st-completed .reminderBadge {
  border-color: rgba(170,170,255,0.28);
  background: rgba(170,170,255,0.10);
}
#remindersBody .reminderCard.st-cancelled .reminderBadge {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

#remindersBody .reminderMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(233,246,255,0.70);
  font-size: 12.5px;
  margin-bottom: 10px;
}

#remindersBody .reminderOpenBtn {
  width: fit-content;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 800;
}

#remindersBody .reminderEmpty {
  color: rgba(233,246,255,0.70);
  padding: 10px 2px;
}
/* =========================================================
   ENGINE THEME – ORDERS (Phase 0 SAFE)
   Your Orders card has no #ordersCard id, so we target
   the FIRST .card in the main .grid (Orders is first).
   ========================================================= */

/* Orders card (first card on page) */
.grid > .card:first-child{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(0,220,255,0.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.14));
  border: 1px solid rgba(0,220,255,0.26);
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.08) inset,
    0 24px 90px rgba(0,0,0,0.38);
}

/* Orders title strip */
.grid > .card:first-child .cardTitle{
  background:
    linear-gradient(90deg, rgba(0,220,255,0.34), rgba(0,0,0,0.02) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(0,220,255,0.18);
  text-shadow: 0 0 16px rgba(0,220,255,0.22);
  position: relative;
}
.grid > .card:first-child .cardTitle::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,0.78), transparent);
  opacity: .80;
}

/* Counter pills = engine toggles */
.grid > .card:first-child .counters{
  background: linear-gradient(180deg, rgba(0,0,0,0.16), transparent);
  border-bottom: 1px solid rgba(0,220,255,0.12);
}
.grid > .card:first-child .counterPill{
  background:
    radial-gradient(260px 60px at 50% 0%, rgba(0,220,255,0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.14));
  border: 1px solid rgba(0,220,255,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.06),
    0 10px 30px rgba(0,0,0,0.18);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.grid > .card:first-child .counterPill:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.10),
    0 0 26px rgba(0,220,255,0.12),
    0 18px 55px rgba(0,0,0,0.22);
}
.grid > .card:first-child .counterPill.active{
  border-color: rgba(0,220,255,0.48);
  box-shadow:
    0 0 0 2px rgba(0,220,255,0.14),
    0 0 34px rgba(0,220,255,0.16),
    inset 0 0 0 1px rgba(0,220,255,0.12);
}

/* Toolbar = cockpit */
.grid > .card:first-child .toolbar{
  background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent);
  border-bottom: 1px solid rgba(0,220,255,0.10);
}

/* Search/select inside orders */
.grid > .card:first-child input,
.grid > .card:first-child select{
  border: 1px solid rgba(0,220,255,0.22);
  background:
    radial-gradient(520px 80px at 18% 0%, rgba(0,220,255,0.10), transparent 70%),
    rgba(0,0,0,0.30);
  box-shadow: inset 0 0 0 1px rgba(0,220,255,0.06);
}

/* Orders table HUD */
.grid > .card:first-child .ordersTableWrap{
  background:
    radial-gradient(980px 420px at 50% 0%, rgba(0,220,255,0.11), transparent 68%),
    rgba(0,0,0,0.06);
}

/* Table header strip */
.grid > .card:first-child .table th{
  background:
    linear-gradient(180deg, rgba(0,220,255,0.12), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(0,220,255,0.18);
}

/* Row hover scanline */
.grid > .card:first-child .table tbody tr{
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.grid > .card:first-child .table tbody tr:hover{
  background:
    linear-gradient(90deg, rgba(0,220,255,0.10), rgba(0,0,0,0.00) 62%);
  box-shadow: inset 4px 0 0 rgba(0,220,255,0.55);
}
.grid > .card:first-child .table td{
  border-bottom: 1px solid rgba(0,220,255,0.07);
}
/* =========================================================
   ENGINE HUD – ORDERS (AGGRESSIVE PASS) – Phase 0 SAFE
   Append-only override. No layout/JS changes.
   ========================================================= */

/* Target: Orders is the first card in the grid */
.grid > .card:first-child{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,220,255,0.28);
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.10) inset,
    0 30px 120px rgba(0,0,0,0.55);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(0,220,255,0.22), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(0,255,170,0.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.16));
}

/* Subtle animated scanline (safe) */
.grid > .card:first-child::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 10px,
      rgba(0,220,255,0.06) 12px,
      rgba(255,255,255,0.00) 14px
    );
  opacity: .16;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Corner brackets */
.grid > .card:first-child::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius: 14px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,220,255,0.55), transparent 28%) top left/120px 2px no-repeat,
    linear-gradient(180deg, rgba(0,220,255,0.55), transparent 28%) top left/2px 120px no-repeat,
    linear-gradient(270deg, rgba(0,220,255,0.55), transparent 28%) top right/120px 2px no-repeat,
    linear-gradient(180deg, rgba(0,220,255,0.55), transparent 28%) top right/2px 120px no-repeat,
    linear-gradient(90deg, rgba(0,220,255,0.55), transparent 28%) bottom left/120px 2px no-repeat,
    linear-gradient(0deg, rgba(0,220,255,0.55), transparent 28%) bottom left/2px 120px no-repeat,
    linear-gradient(270deg, rgba(0,220,255,0.55), transparent 28%) bottom right/120px 2px no-repeat,
    linear-gradient(0deg, rgba(0,220,255,0.55), transparent 28%) bottom right/2px 120px no-repeat;
  opacity: .60;
}

/* Header = aggressive HUD bar */
.grid > .card:first-child .cardTitle{
  letter-spacing: 3px;
  font-weight: 800;
  padding: 18px 20px;
  background:
    linear-gradient(90deg, rgba(0,220,255,0.50), rgba(0,0,0,0.06) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(0,220,255,0.18);
  text-shadow: 0 0 20px rgba(0,220,255,0.24);
  position: relative;
}

.grid > .card:first-child .cardTitle::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,0.95), transparent);
  opacity:.80;
}

/* Counters row = “power core rack” */
.grid > .card:first-child .counters{
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,220,255,0.12);
  background:
    radial-gradient(900px 90px at 50% 0%, rgba(0,220,255,0.14), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
}

/* Counter pill base */
.grid > .card:first-child .counterPill{
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.25);
  background:
    radial-gradient(220px 70px at 35% 0%, rgba(0,220,255,0.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.08),
    0 14px 45px rgba(0,0,0,0.26);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font-weight: 700;
  text-transform: uppercase;
}

/* Left “energy rail” inside pill */
.grid > .card:first-child .counterPill::before{
  content:"";
  position:absolute;
  left:10px;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius: 99px;
  background: rgba(0,220,255,0.55);
  opacity:.65;
}

/* Make the numbers look like a digital readout */
.grid > .card:first-child .counterPill b,
.grid > .card:first-child .counterPill strong,
.grid > .card:first-child .counterPill .count{
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(0,220,255,0.22);
}

/* Hover + Active (aggressive glow) */
.grid > .card:first-child .counterPill:hover{
  transform: translateY(-1px);
  border-color: rgba(0,220,255,0.50);
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.12),
    0 0 38px rgba(0,220,255,0.16),
    0 22px 70px rgba(0,0,0,0.30);
}
.grid > .card:first-child .counterPill.active{
  border-color: rgba(0,220,255,0.70);
  box-shadow:
    0 0 0 2px rgba(0,220,255,0.16),
    0 0 44px rgba(0,220,255,0.20),
    inset 0 0 0 1px rgba(0,220,255,0.14);
}

/* Optional: status-coded rails (only if these classes exist already)
   If not, harmless. */
.grid > .card:first-child .counterPill.st-new::before{ background: rgba(0,255,153,0.85); }
.grid > .card:first-child .counterPill.st-paid::before{ background: rgba(255,190,0,0.85); }
.grid > .card:first-child .counterPill.st-review::before{ background: rgba(0,234,255,0.85); }
.grid > .card:first-child .counterPill.st-refunded::before{ background: rgba(255,79,79,0.85); }
.grid > .card:first-child .counterPill.st-completed::before{ background: rgba(163,255,255,0.70); }
.grid > .card:first-child .counterPill.st-cancelled::before{ background: rgba(180,140,255,0.70); }

/* Toolbar: inputs/buttons feel like cockpit modules */
.grid > .card:first-child .toolbar{
  padding-top: 14px;
  padding-bottom: 14px;
  background:
    linear-gradient(90deg, rgba(0,220,255,0.10), rgba(0,0,0,0.00) 65%),
    linear-gradient(180deg, rgba(0,0,0,0.14), transparent);
  border-bottom: 1px solid rgba(0,220,255,0.10);
}

.grid > .card:first-child input,
.grid > .card:first-child select{
  border: 1px solid rgba(0,220,255,0.26);
  background:
    radial-gradient(650px 90px at 15% 0%, rgba(0,220,255,0.12), transparent 70%),
    rgba(0,0,0,0.34);
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.08),
    0 12px 30px rgba(0,0,0,0.20);
}

.grid > .card:first-child .btn{
  border: 1px solid rgba(0,220,255,0.26);
  background:
    radial-gradient(420px 80px at 20% 0%, rgba(0,220,255,0.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  box-shadow: inset 0 0 0 1px rgba(0,220,255,0.08);
}
.grid > .card:first-child .btn:hover{
  box-shadow:
    inset 0 0 0 1px rgba(0,220,255,0.14),
    0 0 26px rgba(0,220,255,0.12);
}

/* Table HUD: bolder header, sharper separators, scan hover */
.grid > .card:first-child .table th{
  letter-spacing: 2px;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(0,220,255,0.16), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(0,220,255,0.22);
}

.grid > .card:first-child .table td{
  border-bottom: 1px solid rgba(0,220,255,0.09);
}

.grid > .card:first-child .table tbody tr{
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.grid > .card:first-child .table tbody tr:hover{
  background:
    linear-gradient(90deg, rgba(0,220,255,0.12), rgba(0,0,0,0.00) 62%);
  box-shadow: inset 5px 0 0 rgba(0,220,255,0.65);
}

/* Scrollbar inside table wrap */
.grid > .card:first-child .ordersTableWrap::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.grid > .card:first-child .ordersTableWrap::-webkit-scrollbar-thumb{
  background: rgba(0,220,255,0.20);
  border: 2px solid rgba(0,0,0,0.30);
  border-radius: 999px;
}
.grid > .card:first-child .ordersTableWrap::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
/* ================================
   ORDERS COUNTER PILL CLEANUP
   Remove inner rail line
   ================================ */
.grid > .card:first-child .counterPill::before{
  display: none !important;
  content: none !important;
}
/* ================================
   ORDERS COUNTER PILLS – ENGINE CAPSULE V2
   Cleaner, more cyber, no inner rail
   ================================ */
.grid > .card:first-child .counterPill{
  border-radius: 999px !important;
  padding: 11px 16px !important;
  border: 1px solid rgba(0,220,255,0.30) !important;
  background:
    radial-gradient(220px 60px at 50% 0%, rgba(0,220,255,0.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.22)) !important;
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.08) inset,
    0 12px 40px rgba(0,0,0,0.26) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* add subtle “top notch” highlight */
.grid > .card:first-child .counterPill{
  position: relative;
  overflow: hidden;
}
.grid > .card:first-child .counterPill::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:7px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,0.65), transparent);
  opacity: .55;
  pointer-events:none;
}

/* Hover: sharper glow without being messy */
.grid > .card:first-child .counterPill:hover{
  transform: translateY(-1px);
  border-color: rgba(0,220,255,0.62) !important;
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.12) inset,
    0 0 28px rgba(0,220,255,0.14),
    0 20px 70px rgba(0,0,0,0.34) !important;
}

/* Active: “powered” */
.grid > .card:first-child .counterPill.active{
  border-color: rgba(0,220,255,0.78) !important;
  box-shadow:
    0 0 0 2px rgba(0,220,255,0.18),
    0 0 42px rgba(0,220,255,0.18),
    inset 0 0 0 1px rgba(0,220,255,0.14) !important;
}

/* Make the number area feel more digital */
.grid > .card:first-child .counterPill{
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(0,220,255,0.18);
}
/* =========================================================
   CREATE ORDER – PRIMARY ENGINE BUTTON (Phase 0 SAFE)
   ========================================================= */

/* Try the most likely id first */
#createOrderBtn,
#openCreateOrder,
#btnCreateOrder,
button#createOrder,
a#createOrderBtn,
a#openCreateOrder{
  position: relative;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: rgba(235,252,255,0.95) !important;

  border: 1px solid rgba(0,220,255,0.55) !important;
  background:
    radial-gradient(420px 120px at 20% 0%, rgba(0,220,255,0.28), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22)) !important;

  box-shadow:
    0 0 0 1px rgba(0,220,255,0.10) inset,
    0 18px 70px rgba(0,0,0,0.35),
    0 0 30px rgba(0,220,255,0.12) !important;

  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}

/* Fallback: if it’s just a normal .btn in the header area */
.header .btn,
.pageHeader .btn,
.topbar .btn{
  position: relative;
  border-radius: 999px;
  overflow: hidden;
}

/* Animated “energy sweep” */
#createOrderBtn::before,
#openCreateOrder::before,
#btnCreateOrder::before,
button#createOrder::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,220,255,0.00) 35%,
      rgba(0,220,255,0.35) 50%,
      rgba(0,220,255,0.00) 65%,
      transparent 100%);
  transform: translateX(-55%);
  opacity: .55;
  pointer-events:none;
}

/* Top notch line */
#createOrderBtn::after,
#openCreateOrder::after,
#btnCreateOrder::after,
button#createOrder::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:8px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,0.90), transparent);
  opacity: .55;
  pointer-events:none;
}

/* Hover: “armed” */
#createOrderBtn:hover,
#openCreateOrder:hover,
#btnCreateOrder:hover,
button#createOrder:hover{
  transform: translateY(-1px);
  border-color: rgba(0,220,255,0.85) !important;
  filter: saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.14) inset,
    0 0 44px rgba(0,220,255,0.18),
    0 24px 90px rgba(0,0,0,0.40) !important;
}

/* Run the energy sweep on hover */
#createOrderBtn:hover::before,
#openCreateOrder:hover::before,
#btnCreateOrder:hover::before,
button#createOrder:hover::before{
  animation: engineSweep_toolbar 1.2s ease-in-out infinite;
}

@keyframes engineSweep{
  0%   { transform: translateX(-130%); opacity:.10; }
  20%  { opacity:.55; }
  50%  { opacity:.95; }
  80%  { opacity:.55; }
  100% { transform: translateX(130%); opacity:.10; }
}

/* Press: “actuated” */
#createOrderBtn:active,
#openCreateOrder:active,
#btnCreateOrder:active,
button#createOrder:active{
  transform: translateY(0px) scale(0.99);
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.12) inset,
    0 10px 40px rgba(0,0,0,0.35) !important;
}
/* ============================
   ORDERS STATUS COUNTERS (PILLS) — SCAN + COLOR
   This block is intentionally placed at the END to override earlier rules.
   ============================ */

#statusCounters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

#statusCounters .counterPill{
  position:relative;
  overflow:hidden; /* required for scan sweep */
  isolation:isolate; /* keeps pseudo layers contained */
  cursor:pointer;
  user-select:none;

  /* match your "engine button" vibe */
  border-radius:999px;
  padding:10px 16px;
  min-height:44px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  background:
    radial-gradient(120% 160% at 50% 0%, rgba(0,255,255,.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(10,30,35,.80) 0%, rgba(4,10,12,.92) 100%);
  border:1px solid rgba(0,255,255,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 18px rgba(0,255,255,.08),
    0 10px 28px rgba(0,0,0,.45);

  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

#statusCounters .counterPill > span{
  position:relative;
  z-index:3;
}

/* remove any “vertical line” look by overriding potential inner dividers */
#statusCounters .counterPill::before,
#statusCounters .counterPill::after{
  pointer-events:none;
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  width:55%;
  left:-70%;
  z-index:2;
  opacity:0;
  transform:skewX(-18deg) translateX(-20%);
}

/* Primary scan sweep */
#statusCounters .counterPill::before{
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 35%,
    rgba(255,255,255,.06) 60%,
    rgba(255,255,255,0) 100%);
  filter: blur(.2px);
}

/* Secondary “glow” sweep for cyber pop */
#statusCounters .counterPill::after{
  width:40%;
  background: linear-gradient(90deg,
    rgba(0,255,255,0) 0%,
    rgba(0,255,255,.22) 45%,
    rgba(0,255,255,0) 100%);
  mix-blend-mode: screen;
}

#statusCounters .counterPill:hover{
  transform: translateY(-1px);
  filter: saturate(1.12) contrast(1.02);
  border-color: rgba(0,255,255,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 22px rgba(0,255,255,.16),
    0 14px 40px rgba(0,0,0,.55),
    0 0 22px rgba(0,255,255,.18);
}

#statusCounters .counterPill:hover::before{
  opacity:1;
  animation: engineSweep_pills 900ms ease-out 1;
}

#statusCounters .counterPill:hover::after{
  opacity:.95;
  animation: engineSweep_pills 900ms ease-out 1;
}

#statusCounters .counterPill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(0,255,255,.18),
    0 0 0 1px rgba(0,255,255,.35) inset,
    inset 0 0 22px rgba(0,255,255,.14),
    0 14px 40px rgba(0,0,0,.55);
}

/* Engine sweep keyframes (dedicated so it can't be overwritten) */
@keyframes engineSweep_pills{
  0%   { left:-70%; transform:skewX(-18deg) translateX(-15%); }
  100% { left:120%; transform:skewX(-18deg) translateX(0%); }
}

/* --- color coding by filter --- */
#statusCounters .counterPill[data-filter="new"]{
  border-color: rgba(0,255,145,.55);
  box-shadow: inset 0 0 18px rgba(0,255,145,.10), 0 10px 28px rgba(0,0,0,.45);
}
#statusCounters .counterPill[data-filter="paid"]{
  border-color: rgba(255,214,0,.55);
  box-shadow: inset 0 0 18px rgba(255,214,0,.10), 0 10px 28px rgba(0,0,0,.45);
}
#statusCounters .counterPill[data-filter="review"]{
  border-color: rgba(0,200,255,.55);
  box-shadow: inset 0 0 18px rgba(0,200,255,.10), 0 10px 28px rgba(0,0,0,.45);
}
#statusCounters .counterPill[data-filter="refunded"]{
  border-color: rgba(255,65,65,.55);
  box-shadow: inset 0 0 18px rgba(255,65,65,.10), 0 10px 28px rgba(0,0,0,.45);
}
#statusCounters .counterPill[data-filter="completed"]{
  border-color: rgba(165,110,255,.55);
  box-shadow: inset 0 0 18px rgba(165,110,255,.10), 0 10px 28px rgba(0,0,0,.45);
}
#statusCounters .counterPill[data-filter="cancelled"]{
  border-color: rgba(170,170,170,.40);
  box-shadow: inset 0 0 18px rgba(170,170,170,.06), 0 10px 28px rgba(0,0,0,.45);
}

/* Make the number pop a bit inside the pill */
#statusCounters .counterPill span b{
  font-weight:900;
  letter-spacing:.02em;
  text-shadow: 0 0 10px rgba(0,255,255,.20);
}
/* =========================================================
   PHASE 0 — Status Counter Pills: scan sweep + color rails
   Paste at VERY BOTTOM of style.css
   ========================================================= */

/* Target both: class-based container AND id-based container */
.statusCounters .counterPill,
#statusCounters .counterPill{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate; /* keeps sweep looking crisp */
}

/* Remove any “inner line” pseudo elements you might have from older attempts */
.statusCounters .counterPill::before,
#statusCounters .counterPill::before{
  /* if you already use ::before for something else and want it, delete these 2 lines */
  /* comment out instead of deleting if you’re unsure */
  /* display:none !important; */
}

/* The scan sweep layer (use ::after so it doesn't conflict with existing ::before) */
.statusCounters .counterPill::after,
#statusCounters .counterPill::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(0,220,255,0.10) 42%,
    rgba(0,220,255,0.55) 52%,
    rgba(0,220,255,0.10) 62%,
    transparent 100%
  );
  transform: translateX(-65%);
  opacity: 0;
  pointer-events:none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* Hover = glow + sweep */
.statusCounters .counterPill:hover::after,
#statusCounters .counterPill:hover::after{
  opacity: .65;
  animation: engineSweep_toolbar 1.2s ease-in-out infinite;
}

/* Make sure the text stays above the sweep */
.statusCounters .counterPill > *,
#statusCounters .counterPill > *{
  position: relative;
  z-index: 3;
}

/* Status color rails (support multiple attribute names just in case) */
.statusCounters .counterPill[data-filter="new"],
.statusCounters .counterPill[data-status="new"],
.statusCounters .counterPill[data-state="new"],
#statusCounters .counterPill[data-filter="new"],
#statusCounters .counterPill[data-status="new"],
#statusCounters .counterPill[data-state="new"]{ --stAccent: rgba(0,255,153,0.95); }

.statusCounters .counterPill[data-filter="paid"],
.statusCounters .counterPill[data-status="paid"],
.statusCounters .counterPill[data-state="paid"],
#statusCounters .counterPill[data-filter="paid"],
#statusCounters .counterPill[data-status="paid"],
#statusCounters .counterPill[data-state="paid"]{ --stAccent: rgba(255,190,0,0.95); }

.statusCounters .counterPill[data-filter="review"],
.statusCounters .counterPill[data-status="review"],
.statusCounters .counterPill[data-state="review"],
#statusCounters .counterPill[data-filter="review"],
#statusCounters .counterPill[data-status="review"],
#statusCounters .counterPill[data-state="review"]{ --stAccent: rgba(0,234,255,0.95); }

.statusCounters .counterPill[data-filter="refunded"],
.statusCounters .counterPill[data-status="refunded"],
.statusCounters .counterPill[data-state="refunded"],
#statusCounters .counterPill[data-filter="refunded"],
#statusCounters .counterPill[data-status="refunded"],
#statusCounters .counterPill[data-state="refunded"]{ --stAccent: rgba(255,79,79,0.95); }

.statusCounters .counterPill[data-filter="completed"],
.statusCounters .counterPill[data-status="completed"],
.statusCounters .counterPill[data-state="completed"],
#statusCounters .counterPill[data-filter="completed"],
#statusCounters .counterPill[data-status="completed"],
#statusCounters .counterPill[data-state="completed"]{ --stAccent: rgba(163,255,255,0.80); }

.statusCounters .counterPill[data-filter="cancelled"],
.statusCounters .counterPill[data-status="cancelled"],
.statusCounters .counterPill[data-state="cancelled"],
#statusCounters .counterPill[data-filter="cancelled"],
#statusCounters .counterPill[data-status="cancelled"],
#statusCounters .counterPill[data-state="cancelled"]{ --stAccent: rgba(180,140,255,0.80); }

/* Apply the rail + subtle status glow */
.statusCounters .counterPill,
#statusCounters .counterPill{
  border-left: 3px solid var(--stAccent, rgba(0,220,255,0.55)) !important;
}

.statusCounters .counterPill:hover,
#statusCounters .counterPill:hover{
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.12) inset,
    0 0 36px rgba(0,220,255,0.14),
    0 0 18px var(--stAccent, rgba(0,220,255,0.18)),
    0 18px 70px rgba(0,0,0,0.38) !important;
}

/* Keyframes (safe to repeat; last one wins) */
/* Keyframes for toolbar/exports sweep (kept separate to avoid clobbering other sweeps) */
@keyframes engineSweep_toolbar{
  0%   { transform: translateX(-65%); opacity:.25; }
  40%  { opacity:.65; }
  100% { transform: translateX(65%); opacity:.25; }
}

/* Export buttons = same engine sweep vibe */
.toolbar .btn,
#ordersCard .btn{
  position: relative;
  overflow: hidden;
}

.toolbar .btn::after,
#ordersCard .btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent, rgba(0,220,255,0.12), rgba(0,220,255,0.55), rgba(0,220,255,0.12), transparent);
  transform: translateX(-65%);
  opacity: 0;
  pointer-events:none;
  mix-blend-mode: screen;
}

.toolbar .btn:hover::after,
#ordersCard .btn:hover::after{
  opacity: .7;
  animation: engineSweep_toolbar 1.2s ease-in-out infinite;
}

/* Orders rows = “HUD pass” on hover */
.tableWrap tr{
  position: relative;
}
.tableWrap tr:hover td{
  background: rgba(0,220,255,0.045) !important;
}

/* =========================================================
   PHASE 0 — MODALS (CYBER ENGINE HUD)
   SCOPE:
     - #orderDetailsOverlay ... (Order Details)
     - #createOrderOverlay ...  (Create Order)
   Does NOT touch dashboard layout outside overlays.
   ========================================================= */

/* Shared overlay blackout + aura */
#orderDetailsOverlay,
#createOrderOverlay{
  background:
    radial-gradient(1200px 700px at 50% 18%, rgba(0,220,255,0.18), transparent 62%),
    radial-gradient(900px 520px at 18% 88%, rgba(0,220,255,0.10), transparent 60%),
    rgba(0,0,0,0.92) !important;
  backdrop-filter: blur(6px);
}

/* Shared modal shell HUD frame */
#orderDetailsOverlay .modal,
#createOrderOverlay .modal{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0,220,255,0.22);
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(0,220,255,0.10), transparent 70%),
    rgba(0,0,0,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 30px 120px rgba(0,0,0,0.65);
}

/* Scanlines + subtle grid */
#orderDetailsOverlay .modal::before,
#createOrderOverlay .modal::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 9px,
      rgba(0,220,255,0.10) 10px,
      rgba(255,255,255,0.00) 12px
    ),
    linear-gradient(90deg, rgba(0,220,255,0.08), rgba(0,0,0,0) 40%, rgba(0,220,255,0.06));
  opacity: .16;
}

/* Corner brackets frame */
#orderDetailsOverlay .modal::after,
#createOrderOverlay .modal::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius: 18px;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) top left / 28px 2px no-repeat,
    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) top left / 2px 28px no-repeat,

    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) top right / 28px 2px no-repeat,
    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) top right / 2px 28px no-repeat,

    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) bottom left / 28px 2px no-repeat,
    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) bottom left / 2px 28px no-repeat,

    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) bottom right / 28px 2px no-repeat,
    linear-gradient(rgba(0,220,255,0.85), rgba(0,220,255,0.85)) bottom right / 2px 28px no-repeat;
  opacity: .28;
}

/* Modal top bar: “console” */
#orderDetailsOverlay .modalHeader,
#createOrderOverlay .modalHeader{
  background: linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.20));
  border-bottom: 1px solid rgba(0,220,255,0.16);
}

/* Close button: brighter ring */
#orderDetailsOverlay .closeBtn,
#createOrderOverlay .closeBtn,
#orderDetailsOverlay button.close,
#createOrderOverlay button.close{
  border: 1px solid rgba(0,220,255,0.30) !important;
  box-shadow: 0 0 0 1px rgba(0,220,255,0.10) inset, 0 0 18px rgba(0,220,255,0.10);
}

/* Order Details: module panels */
#orderDetailsOverlay .od-panel{
  position: relative;
  border: 1px solid rgba(0,220,255,0.22) !important;
  background: rgba(6,12,18,0.62);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 22px rgba(0,220,255,0.08),
    0 18px 70px rgba(0,0,0,0.45) !important;
  overflow: hidden;
}

#orderDetailsOverlay .od-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 14px;
  border: 1px solid rgba(0,220,255,0.10);
  pointer-events:none;
  opacity: .55;
}

/* Section titles = module labels */
#orderDetailsOverlay .sectionTitle{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.24);
  background: rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  letter-spacing: 2px;
}

/* Timeline HUD */
#orderDetailsOverlay .timeline{
  max-height: 46vh;
  overflow: auto;
  padding-right: 6px;
}
#orderDetailsOverlay .timeline::-webkit-scrollbar{ width: 10px; }
#orderDetailsOverlay .timeline::-webkit-scrollbar-thumb{
  background: rgba(0,220,255,0.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.45);
}

/* Danger delete module */
#orderDetailsOverlay .od-panel--delete{
  border-color: rgba(255,90,90,0.40) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,90,90,0.08),
    inset 0 0 22px rgba(255,90,90,0.08),
    0 18px 70px rgba(0,0,0,0.45) !important;
}

/* Buttons inside modals: subtle sweep (unique) */
#orderDetailsOverlay .btn,
#createOrderOverlay .btn,
#orderDetailsOverlay button,
#createOrderOverlay button{
  position: relative;
  overflow: hidden;
}

#orderDetailsOverlay .btn::after,
#createOrderOverlay .btn::after,
#orderDetailsOverlay button::after,
#createOrderOverlay button::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent, rgba(0,220,255,0.10), rgba(0,220,255,0.45), rgba(0,220,255,0.10), transparent);
  transform: translateX(-65%);
  opacity: 0;
  pointer-events:none;
  mix-blend-mode: screen;
}

#orderDetailsOverlay .btn:hover::after,
#createOrderOverlay .btn:hover::after,
#orderDetailsOverlay button:hover::after,
#createOrderOverlay button:hover::after{
  opacity: .70;
  animation: modalSweep 1.1s ease-in-out infinite;
}

@keyframes modalSweep{
  0%   { transform: translateX(-65%); opacity:.22; }
  40%  { opacity:.72; }
  100% { transform: translateX(65%); opacity:.22; }
}

/* =========================================================
   PHASE 0 — MODALS ENGINE HUD (V2 polish)
   - Order Details: stronger "engine console" controls + timeline readability
   - Create Order: input fields + buttons upgraded to match HUD
   Scope remains overlays only.
   ========================================================= */

/* ---------- CREATE ORDER: layout + fields ---------- */
#createOrderOverlay .modal{
  max-width: 980px;
}

#createOrderOverlay .row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 16px;
}

#createOrderOverlay .row + .row{
  padding-top: 0;
}

#createOrderOverlay input{
  flex: 1 1 220px;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,220,255,0.18);
  background:
    radial-gradient(140% 180% at 50% 0%, rgba(0,220,255,0.12), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.38);
  color: rgba(233,246,255,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 18px rgba(0,220,255,0.08);
  outline: none;
}

#createOrderOverlay input::placeholder{
  color: rgba(233,246,255,0.55);
}

#createOrderOverlay input:focus{
  border-color: rgba(0,220,255,0.40);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 3px rgba(0,220,255,0.12),
    inset 0 0 22px rgba(0,220,255,0.14);
}

#createOrderOverlay #createNotes{
  flex: 1 1 720px;
  min-width: min(720px, 92vw);
}

/* Create/Cancel buttons: “armed” look */
#createOrderOverlay #createSubmit{
  border-color: rgba(0,255,145,0.35) !important;
  box-shadow: 0 0 0 1px rgba(0,255,145,0.08) inset;
}
#createOrderOverlay #createOrderCancel{
  border-color: rgba(255,214,0,0.30) !important;
  box-shadow: 0 0 0 1px rgba(255,214,0,0.08) inset;
}

#createOrderOverlay #createOrderMsg{
  padding: 0 16px 14px;
  color: rgba(233,246,255,0.68);
}

/* ---------- ORDER DETAILS: console polish ---------- */
#orderDetailsOverlay .modalTitle{
  letter-spacing: 3px;
}

#orderDetailsOverlay .od-hud__grid{
  align-items: start;
}

/* Workflow buttons: lit toggles */
#orderDetailsOverlay .workflowBtns .btn{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(0,220,255,0.18) !important;
  background: rgba(0,0,0,0.35);
  opacity: .75;
  transition: transform .15s ease, opacity .15s ease, border-color .2s ease, box-shadow .2s ease;
}

#orderDetailsOverlay .workflowBtns .btn:hover{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(0,220,255,0.42) !important;
  box-shadow: 0 0 0 3px rgba(0,220,255,0.10), inset 0 0 18px rgba(0,220,255,0.10);
}

/* Active status (the buttons already have .active in your UI) */
#orderDetailsOverlay .workflowBtns .btn.active{
  opacity: 1;
  border-color: rgba(0,220,255,0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 18px rgba(0,220,255,0.16),
    0 0 18px rgba(0,220,255,0.10);
}

/* UNDO button slightly different */
#orderDetailsOverlay #undoStatus{
  border-color: rgba(255,214,0,0.35) !important;
}

/* Timeline readability: mono + “log rail” */
#orderDetailsOverlay .timeline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid rgba(0,220,255,0.14);
  background: rgba(0,0,0,0.30);
}

#orderDetailsOverlay .timeline::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(0,220,255,0.0), rgba(0,220,255,0.40), rgba(0,220,255,0.0));
  opacity: .55;
  pointer-events:none;
}

#orderDetailsOverlay .timeline .tLine{
  padding-left: 22px;
}

/* Delete confirm input */
#orderDetailsOverlay #deleteConfirm{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,90,90,0.25);
  background: rgba(0,0,0,0.38);
  color: rgba(233,246,255,0.92);
  outline: none;
}
#orderDetailsOverlay #deleteConfirm:focus{
  border-color: rgba(255,90,90,0.45);
  box-shadow: 0 0 0 3px rgba(255,90,90,0.10), inset 0 0 18px rgba(255,90,90,0.10);
}

/* Delete button */
#orderDetailsOverlay #deleteOrderBtn{
  border-color: rgba(255,90,90,0.55) !important;
  box-shadow: 0 0 0 1px rgba(255,90,90,0.12) inset;
}

/* =========================================================
   PHASE 0 — MODALS ENGINE HUD (V3 layout + standout delete)
   Requested:
     - Center the category headers (ORDER META / WORKFLOW / REMINDERS / etc.)
     - Make DELETE ORDER panel stand out with its own look
     - Give CREATE ORDER modal a bit more "engine" polish
   Scope: overlays only
   ========================================================= */

/* ---------- Order Details: center section headers ---------- */
#orderDetailsOverlay .sectionTitle{
  display: table;
  margin: 0 auto 12px auto; /* centers the pill header */
  text-align: center;
  letter-spacing: 2.5px;
}

/* Make panels feel more evenly centered/stacked within their rail */
#orderDetailsOverlay .od-col--left .od-panel,
#orderDetailsOverlay .od-col--right .od-panel{
  padding-top: 14px; /* room for centered label */
}

/* ---------- Order Details: DELETE ORDER standout module ---------- */
#orderDetailsOverlay .od-panel--delete{
  position: relative;
  border-color: rgba(255, 65, 95, 0.55) !important;
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(255,65,95,0.16), transparent 70%),
    linear-gradient(180deg, rgba(20,6,10,0.55), rgba(8,3,5,0.72));
  box-shadow:
    inset 0 0 0 1px rgba(255,90,90,0.10),
    inset 0 0 24px rgba(255,90,90,0.10),
    0 18px 70px rgba(0,0,0,0.55),
    0 0 28px rgba(255,65,95,0.12) !important;
}

/* Subtle hazard stripe band at the bottom */
#orderDetailsOverlay .od-panel--delete::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 10px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,65,95,0.50) 0px,
      rgba(255,65,95,0.50) 8px,
      rgba(0,0,0,0.00) 8px,
      rgba(0,0,0,0.00) 16px
    );
  opacity: .22;
  pointer-events:none;
}

/* Delete input + button */
#orderDetailsOverlay #deleteConfirm{
  border-color: rgba(255, 65, 95, 0.40);
}
#orderDetailsOverlay #deleteConfirm:focus{
  border-color: rgba(255, 65, 95, 0.65);
  box-shadow:
    0 0 0 3px rgba(255,65,95,0.14),
    inset 0 0 18px rgba(255,65,95,0.12);
}

/* Correct ID in EJS is #deleteBtn */
#orderDetailsOverlay #deleteBtn{
  border-color: rgba(255, 65, 95, 0.70) !important;
  box-shadow:
    0 0 0 1px rgba(255,65,95,0.14) inset,
    0 0 18px rgba(255,65,95,0.12);
}
#orderDetailsOverlay #deleteBtn:hover{
  filter: saturate(1.15) contrast(1.03);
}

/* ---------- Create Order: extra engine polish ---------- */
#createOrderOverlay .modalTitle{
  letter-spacing: 3px;
}

/* Add subtle "input bay" panel feeling */
#createOrderOverlay .row{
  position: relative;
}

#createOrderOverlay .row:first-of-type{
  padding-top: 14px;
}

/* Inputs align + feel more like console modules */
#createOrderOverlay input{
  border-radius: 16px;
}

/* Add a mild glow rail under the button row */
#createOrderOverlay .row:last-of-type::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,220,255,0), rgba(0,220,255,0.35), rgba(0,220,255,0));
  opacity: .55;
  pointer-events:none;
}

/* Bigger, more "engine" buttons */
#createOrderOverlay #createSubmit,
#createOrderOverlay #createOrderCancel{
  padding: 12px 18px;
  border-radius: 999px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#createOrderOverlay #createSubmit{
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(0,255,145,0.22), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.35);
}
#createOrderOverlay #createOrderCancel{
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(255,214,0,0.16), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.35);
}

/* Message area looks like a status readout */
#createOrderOverlay #createOrderMsg{
  margin: 6px 16px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,220,255,0.12);
  background: rgba(0,0,0,0.22);
}

/* =========================================================
   PHASE 0 — MODALS ENGINE HUD (V4 refinement)
   Goal: less "tacky" delete module + overall more cyber/engine.
   Scope: overlays only (#orderDetailsOverlay / #createOrderOverlay)
   ========================================================= */

/* ---------- Order Details: overall stronger cyber glass ---------- */
#orderDetailsOverlay .modal.wide{
  border-color: rgba(0,220,255,0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 34px rgba(0,220,255,0.08),
    0 40px 140px rgba(0,0,0,0.72);
}

/* Thin "circuit trace" line under header */
#orderDetailsOverlay .modalHeader{
  position: relative;
}
#orderDetailsOverlay .modalHeader::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,220,255,0), rgba(0,220,255,0.28), rgba(0,220,255,0));
  opacity: .9;
  pointer-events:none;
}

/* Panels: slightly darker + cleaner bevel */
#orderDetailsOverlay .od-panel{
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(0,220,255,0.10), transparent 72%),
    rgba(4,10,14,0.66);
  border-color: rgba(0,220,255,0.20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 26px rgba(0,220,255,0.07),
    0 20px 70px rgba(0,0,0,0.45) !important;
}

/* Section header: sharper, more "plate" */
#orderDetailsOverlay .sectionTitle{
  padding: 7px 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  border-color: rgba(0,220,255,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 18px rgba(0,220,255,0.05);
}

/* ---------- Order Details: WORKFLOW button polish ---------- */
#orderDetailsOverlay .workflowBtns .btn{
  background:
    radial-gradient(140% 200% at 50% 0%, rgba(0,220,255,0.12), rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.30);
  border-color: rgba(0,220,255,0.16) !important;
  opacity: .82;
}
#orderDetailsOverlay .workflowBtns .btn.active{
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.20), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.34);
}

/* ---------- Order Details: timeline looks like a console log ---------- */
#orderDetailsOverlay .timeline{
  border-color: rgba(0,220,255,0.16);
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(0,220,255,0.08), transparent 70%),
    rgba(0,0,0,0.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* ---------- DELETE ORDER: clean "critical module" (no stripes) ---------- */
#orderDetailsOverlay .od-panel--delete{
  border-color: rgba(255, 70, 95, 0.34) !important;
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(255,70,95,0.10), transparent 72%),
    rgba(6,10,14,0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255,70,95,0.05),
    inset 0 0 22px rgba(255,70,95,0.07),
    0 20px 70px rgba(0,0,0,0.48) !important;
}

/* Remove V3 hazard band if present */
#orderDetailsOverlay .od-panel--delete::after{
  content: none !important;
}

/* Add subtle "CRITICAL" rail on the left */
#orderDetailsOverlay .od-panel--delete::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,70,95,0), rgba(255,70,95,0.55), rgba(255,70,95,0));
  opacity: .65;
  pointer-events:none;
}

/* Delete title: slightly brighter + red accent */
#orderDetailsOverlay .od-panel--delete .sectionTitle{
  border-color: rgba(255,70,95,0.32);
  background:
    linear-gradient(180deg, rgba(30,10,14,0.55), rgba(0,0,0,0.18));
  box-shadow:
    inset 0 0 0 1px rgba(255,70,95,0.05),
    0 0 18px rgba(255,70,95,0.06);
}

/* Delete input and button: clean, not loud */
#orderDetailsOverlay #deleteConfirm{
  border-color: rgba(255,70,95,0.24);
  background:
    radial-gradient(140% 200% at 50% 0%, rgba(255,70,95,0.08), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.30);
}
#orderDetailsOverlay #deleteConfirm:focus{
  border-color: rgba(255,70,95,0.42);
  box-shadow:
    0 0 0 3px rgba(255,70,95,0.10),
    inset 0 0 18px rgba(255,70,95,0.08);
}

#orderDetailsOverlay #deleteBtn{
  border-color: rgba(255,70,95,0.46) !important;
  background:
    radial-gradient(140% 200% at 50% 0%, rgba(255,70,95,0.12), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26);
  box-shadow:
    0 0 0 1px rgba(255,70,95,0.08) inset,
    0 0 18px rgba(255,70,95,0.06);
}

/* ---------- CREATE ORDER: make it match the engine HUD ---------- */
#createOrderOverlay .modal{
  border-color: rgba(0,220,255,0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 30px rgba(0,220,255,0.08),
    0 40px 140px rgba(0,0,0,0.70);
}

/* Inputs: more "console module" */
#createOrderOverlay input{
  border-color: rgba(0,220,255,0.20);
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.14), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.30);
}
#createOrderOverlay input:focus{
  border-color: rgba(0,220,255,0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 3px rgba(0,220,255,0.12),
    inset 0 0 24px rgba(0,220,255,0.14);
}

/* Primary buttons: cleaner gradient, less flat */
#createOrderOverlay #createSubmit{
  border-color: rgba(0,255,145,0.42) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,255,145,0.18), rgba(0,0,0,0) 64%),
    rgba(0,0,0,0.28);
}
#createOrderOverlay #createOrderCancel{
  border-color: rgba(0,220,255,0.22) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.14), rgba(0,0,0,0) 64%),
    rgba(0,0,0,0.26);
}

/* =========================================================
   PHASE 0 — MODALS ENGINE HUD (V5)
   Requests:
     - Delete module less "tacky" (more subtle, premium)
     - "Next step" glow in WORKFLOW (requires JS to add .next)
     - Minor layout refinement inside Order Details modal
   Scope: #orderDetailsOverlay only (and Create Order unchanged from v4)
   ========================================================= */

/* ---------- Order Details layout refinement ---------- */
#orderDetailsOverlay .od-hud__grid{
  gap: 14px;
}

/* Make left stack read like a centered control bay */
#orderDetailsOverlay .od-panel--workflow .row,
#orderDetailsOverlay .od-panel--reminders .row{
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Workflow button sizing for a more "console" feel */
#orderDetailsOverlay .od-panel--workflow .btn.pill{
  min-width: 88px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- WORKFLOW: active + next-step glow ---------- */
#orderDetailsOverlay .od-panel--workflow .btn.pill.active{
  border-color: rgba(0,220,255,0.60) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 18px rgba(0,220,255,0.16),
    0 0 18px rgba(0,220,255,0.10);
}

/* JS will add .next to the next valid step */
#orderDetailsOverlay .od-panel--workflow .btn.pill.next{
  border-color: rgba(0,220,255,0.48) !important;
  box-shadow:
    0 0 0 3px rgba(0,220,255,0.10),
    0 0 22px rgba(0,220,255,0.14),
    inset 0 0 18px rgba(0,220,255,0.12);
  animation: nextPulse 1.35s ease-in-out infinite;
  opacity: 1;
}

@keyframes nextPulse{
  0%   { filter: brightness(1.0); transform: translateY(0); }
  50%  { filter: brightness(1.12); transform: translateY(-1px); }
  100% { filter: brightness(1.0); transform: translateY(0); }
}

/* If a pill is disabled, no glow even if JS mistakenly sets .next */
#orderDetailsOverlay .od-panel--workflow .btn.pill[disabled],
#orderDetailsOverlay .od-panel--workflow .btn.pill.disabled{
  animation: none !important;
  box-shadow: none !important;
  opacity: .45 !important;
}

/* ---------- DELETE ORDER: subtle "critical" module (premium) ---------- */
#orderDetailsOverlay .od-panel--delete{
  border-color: rgba(255, 70, 95, 0.22) !important;
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(255,70,95,0.06), transparent 72%),
    rgba(4,10,14,0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255,70,95,0.03),
    inset 0 0 20px rgba(255,70,95,0.05),
    0 20px 70px rgba(0,0,0,0.45) !important;
}

/* Small accent line under the DELETE title */
#orderDetailsOverlay .od-panel--delete .sectionTitle{
  border-color: rgba(255,70,95,0.20);
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  box-shadow: inset 0 0 0 1px rgba(255,70,95,0.03);
}
#orderDetailsOverlay .od-panel--delete .sectionTitle::after{
  content:"";
  display:block;
  height: 2px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,70,95,0), rgba(255,70,95,0.35), rgba(255,70,95,0));
  opacity: .7;
}

/* Delete confirm input: calm until focused */
#orderDetailsOverlay #deleteConfirm{
  border-color: rgba(255,70,95,0.18);
  background: rgba(0,0,0,0.28);
}
#orderDetailsOverlay #deleteConfirm:focus{
  border-color: rgba(255,70,95,0.38);
  box-shadow:
    0 0 0 3px rgba(255,70,95,0.08),
    inset 0 0 18px rgba(255,70,95,0.06);
}

/* Delete button: premium, not loud */
#orderDetailsOverlay #deleteBtn{
  border-color: rgba(255,70,95,0.30) !important;
  background: rgba(0,0,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,70,95,0.05) inset;
}
#orderDetailsOverlay #deleteBtn:hover{
  border-color: rgba(255,70,95,0.48) !important;
  box-shadow:
    0 0 0 3px rgba(255,70,95,0.08),
    0 0 18px rgba(255,70,95,0.07),
    inset 0 0 18px rgba(255,70,95,0.06);
}

/* =========================================================
   FIX: ORDER DETAILS "NEXT STEP" GLOW
   Your JS adds class .workflowNext to the NEXT allowed workflow button.
   In your DOM, those buttons live in: #orderDetailsOverlay .workflowBtns .btn
   This block ONLY styles that class (no other buttons).
   ========================================================= */

#orderDetailsOverlay .workflowBtns .btn.workflowNext,
#orderDetailsOverlay .od-panel--workflow .btn.workflowNext{
  opacity: 1 !important;
  pointer-events: auto !important;

  border-color: rgba(0,220,255,0.62) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.20), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.32) !important;

  box-shadow:
    0 0 0 3px rgba(0,220,255,0.12),
    0 0 26px rgba(0,220,255,0.22),
    inset 0 0 22px rgba(0,220,255,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.06) !important;

  animation: engineNextPulse 1.35s ease-in-out infinite;
}

#orderDetailsOverlay .workflowBtns .btn.workflowNext:hover,
#orderDetailsOverlay .od-panel--workflow .btn.workflowNext:hover{
  filter: brightness(1.18) saturate(1.08);
}

/* Keep terminals from ever pulsing even if mis-tagged */
#orderDetailsOverlay .workflowBtns .btn.workflowNext[data-status="completed"],
#orderDetailsOverlay .workflowBtns .btn.workflowNext[data-status="cancelled"]{
  animation: none !important;
  box-shadow: none !important;
}

@keyframes engineNextPulse{
  0%   { transform: translateY(0);   filter: brightness(1.00); }
  50%  { transform: translateY(-1px); filter: brightness(1.13); }
  100% { transform: translateY(0);   filter: brightness(1.00); }
}

/* =========================================================
   DELETE ORDER — PREMIUM / SUBTLE (NO GIMMICKS)
   Makes delete feel "critical" without looking tacky.
   ========================================================= */

#orderDetailsOverlay .od-panel--delete{
  border-color: rgba(255, 90, 90, 0.20) !important;
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(255,90,90,0.05), transparent 72%),
    rgba(4,10,14,0.66) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,90,90,0.03),
    inset 0 0 18px rgba(255,90,90,0.04),
    0 20px 70px rgba(0,0,0,0.45) !important;
}

#orderDetailsOverlay .od-panel--delete .sectionTitle{
  border-color: rgba(255,90,90,0.18);
  color: rgba(255,205,205,0.92);
}

#orderDetailsOverlay #deleteConfirm{
  border-color: rgba(255,90,90,0.18);
  background: rgba(0,0,0,0.30);
}

#orderDetailsOverlay #deleteBtn{
  border-color: rgba(255,90,90,0.30) !important;
  background: rgba(0,0,0,0.26) !important;
}
#orderDetailsOverlay #deleteBtn:hover{
  border-color: rgba(255,90,90,0.46) !important;
  box-shadow: 0 0 0 3px rgba(255,90,90,0.08), 0 0 16px rgba(255,90,90,0.06);
}

/* =========================================================
   ORDERS TABLE — STATUS PILLS (RESTORED)
   Source of truth: dashboard.js renders:
     <span class="pillStatus status-${normalizeStatus(status)}">...</span>
   ========================================================= */

.pillStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  border: 1px solid rgba(0,220,255,0.18);
  background: rgba(0,0,0,0.28);
  color: rgba(233,246,255,0.90);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 18px rgba(0,220,255,0.06);
}

/* Small "signal dot" */
.pillStatus::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,220,255,0.55);
  box-shadow: 0 0 10px rgba(0,220,255,0.18);
}

/* NEW */
.pillStatus.status-new{
  border-color: rgba(0,220,255,0.28);
  background: radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.16), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-new::before{ background: rgba(0,220,255,0.90); }

/* PAID */
.pillStatus.status-paid{
  border-color: rgba(127,0,255,0.30);
  background: radial-gradient(140% 220% at 50% 0%, rgba(127,0,255,0.18), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-paid::before{ background: rgba(127,0,255,0.95); box-shadow: 0 0 12px rgba(127,0,255,0.20); }

/* REVIEW */
.pillStatus.status-review{
  border-color: rgba(255,214,0,0.30);
  background: radial-gradient(140% 220% at 50% 0%, rgba(255,214,0,0.16), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-review::before{ background: rgba(255,214,0,0.95); box-shadow: 0 0 12px rgba(255,214,0,0.18); }

/* REFUNDED */
.pillStatus.status-refunded{
  border-color: rgba(0,255,145,0.28);
  background: radial-gradient(140% 220% at 50% 0%, rgba(0,255,145,0.16), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-refunded::before{ background: rgba(0,255,145,0.95); box-shadow: 0 0 12px rgba(0,255,145,0.18); }

/* COMPLETED */
.pillStatus.status-completed{
  border-color: rgba(0,220,255,0.28);
  background: radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.14), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-completed::before{ background: rgba(0,220,255,0.95); }

/* CANCELLED */
.pillStatus.status-cancelled,
.pillStatus.status-canceled{
  border-color: rgba(255,90,90,0.30);
  background: radial-gradient(140% 220% at 50% 0%, rgba(255,90,90,0.14), rgba(0,0,0,0) 62%), rgba(0,0,0,0.28);
}
.pillStatus.status-cancelled::before,
.pillStatus.status-canceled::before{ background: rgba(255,90,90,0.95); box-shadow: 0 0 12px rgba(255,90,90,0.18); }

/* =========================================================
   MOBILE / SMALL SCREENS — ORDER DETAILS SCROLL FIX
   - Prevent content cut-off (REMINDERS section)
   - Allow scrolling inside modal on mobile
   ========================================================= */

#orderDetailsOverlay .modal.wide{
  max-height: calc(100vh - 24px) !important;
  overflow: hidden !important;
}

#orderDetailsOverlay .od-hud{
  max-height: calc(100vh - 96px) !important; /* accounts for header */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  overscroll-behavior: contain;
}

/* On very small screens, reduce padding so everything fits */
@media (max-width: 560px){
  #orderDetailsOverlay .modal.wide{
    width: calc(100vw - 16px) !important;
    margin: 8px !important;
    border-radius: 16px !important;
  }
  #orderDetailsOverlay .od-hud{ padding: 12px 10px 24px !important; }
}

/* =========================================================
   REMINDERS — MORE ENGINE / CYBERNETIC CARDS
   ========================================================= */

.remindersGrid{
  gap: 16px;
}

/* Card: add scanlines + corner cuts + deeper glass */
#remindersBody .reminderCard{
  background:
    radial-gradient(900px 320px at 22% 0%, rgba(0,220,255,0.16), transparent 66%),
    radial-gradient(900px 320px at 78% 0%, rgba(0,220,255,0.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.28));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 28px rgba(0,220,255,0.07),
    0 22px 80px rgba(0,0,0,0.32);
}

/* Subtle scanlines overlay */
#remindersBody .reminderCard::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: .10;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* Corner accents */
#remindersBody .reminderCard .corner{
  display:none;
}
#remindersBody .reminderCard{
  clip-path: polygon(0% 0%, 96% 0%, 100% 12%, 100% 100%, 4% 100%, 0% 88%);
}

/* Status pill inside reminder card */
#remindersBody .reminderCard .pill{
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.22);
  background: rgba(0,0,0,0.26);
  box-shadow: inset 0 0 18px rgba(0,220,255,0.08);
  letter-spacing: .10em;
}

/* Open workflow button: engine style */
#remindersBody .reminderCard button{
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.20);
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.12), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.28);
  box-shadow: 0 0 0 1px rgba(0,220,255,0.06) inset;
}
#remindersBody .reminderCard button:hover{
  border-color: rgba(0,220,255,0.42);
  box-shadow:
    0 0 0 3px rgba(0,220,255,0.10),
    inset 0 0 18px rgba(0,220,255,0.10);
}

/* Overdue text: cleaner alert */
#remindersBody .reminderCard .overdueText{
  color: rgba(255, 90, 90, 0.95);
  text-shadow: 0 0 14px rgba(255,90,90,0.16);
}

/* =========================================================
   REMINDERS — V2 "ENGINE HUD" CARDS (ONLY)
   Improves: depth, readability, accent rails, better hierarchy,
   hover feedback, and mobile spacing.
   ========================================================= */

/* Container breathing room */
#remindersBody .remindersGrid{
  gap: 18px;
  padding: 10px 0 2px;
}

/* Card base */
#remindersBody .reminderCard{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,220,255,0.18);
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(0,220,255,0.18), transparent 68%),
    radial-gradient(900px 320px at 85% 0%, rgba(0,220,255,0.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 34px rgba(0,220,255,0.08),
    0 26px 90px rgba(0,0,0,0.36);
  clip-path: polygon(0% 0%, 95% 0%, 100% 14%, 100% 100%, 5% 100%, 0% 86%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Subtle edge glow rail */
#remindersBody .reminderCard::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 160px at 50% 0%, rgba(0,220,255,0.22), transparent 65%);
  opacity: .55;
  pointer-events:none;
}

/* Scanlines (cleaner) */
#remindersBody .reminderCard::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 8px
    );
  opacity: .08;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* Hover (desktop only) */
@media (hover:hover){
  #remindersBody .reminderCard:hover{
    transform: translateY(-2px);
    border-color: rgba(0,220,255,0.34);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 0 40px rgba(0,220,255,0.10),
      0 30px 110px rgba(0,0,0,0.42);
    filter: brightness(1.03);
  }
}

/* Header strip in card (top padding zone) */
#remindersBody .reminderCard .topRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 6px;
}

/* ID + buyer bigger / clearer */
#remindersBody .reminderCard .remId{
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(233,246,255,0.92);
}
#remindersBody .reminderCard .buyer{
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
  color: rgba(233,246,255,0.92);
  text-shadow: 0 0 18px rgba(0,220,255,0.10);
}

/* Status pill (top-right) */
#remindersBody .reminderCard .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.20);
  background: rgba(0,0,0,0.26);
  box-shadow:
    inset 0 0 20px rgba(0,220,255,0.08),
    0 0 18px rgba(0,220,255,0.06);
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(233,246,255,0.92);
}
#remindersBody .reminderCard .pill::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,220,255,0.85);
  box-shadow: 0 0 12px rgba(0,220,255,0.16);
}

/* Card middle area */
#remindersBody .reminderCard .midRow{
  padding: 6px 16px 10px;
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

/* "Overdue" callout (right) — more premium */
#remindersBody .reminderCard .overdueText{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,90,90,0.96);
  text-shadow: 0 0 18px rgba(255,90,90,0.14);
}

/* Details line */
#remindersBody .reminderCard .details{
  padding: 0 16px 12px;
  color: rgba(233,246,255,0.70);
}

/* Button row */
#remindersBody .reminderCard .btnRow{
  padding: 0 16px 14px;
}

/* Open workflow button: stronger engine look */
#remindersBody .reminderCard button{
  width: auto;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,0.22);
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(0,220,255,0.16), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.28);
  box-shadow:
    0 0 0 1px rgba(0,220,255,0.06) inset,
    inset 0 0 18px rgba(0,220,255,0.08);
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
}
#remindersBody .reminderCard button:hover{
  border-color: rgba(0,220,255,0.42);
  box-shadow:
    0 0 0 3px rgba(0,220,255,0.10),
    0 0 24px rgba(0,220,255,0.12),
    inset 0 0 22px rgba(0,220,255,0.12);
}

/* Mobile tweaks */
@media (max-width: 560px){
  #remindersBody .reminderCard{
    border-radius: 16px;
    clip-path: none;
  }
  #remindersBody .reminderCard .buyer{ font-size: 16px; }
  #remindersBody .reminderCard .overdueText{ font-size: 14px; }
}

/* Optional: status-based accent if you already add data-status attr to pill */
#remindersBody .reminderCard .pill[data-status="paid"]{ border-color: rgba(127,0,255,0.22); }
#remindersBody .reminderCard .pill[data-status="review"]{ border-color: rgba(255,214,0,0.24); }
#remindersBody .reminderCard .pill[data-status="refunded"]{ border-color: rgba(0,255,145,0.22); }
#remindersBody .reminderCard .pill[data-status="cancelled"]{ border-color: rgba(255,90,90,0.26); }

/* =========================================================
   REMINDERS — STATUS PILL COLOR CODING + POP (ONLY)
   Works with existing DOM if the status pill element has:
     - class ".pill" (already)
     - either data-status="paid|review|refunded|completed|cancelled|new"
       OR a class "status-paid" etc.
   If you don't currently set data-status or classes, it will still
   look better with the base treatment below.
   ========================================================= */

#remindersBody .reminderCard .pill{
  transform: translateY(-2px);
  border-width: 2px;
  box-shadow:
    inset 0 0 22px rgba(0,220,255,0.10),
    0 0 24px rgba(0,220,255,0.12);
}

#remindersBody .reminderCard .pill::before{
  width: 10px;
  height: 10px;
  box-shadow: 0 0 14px rgba(0,220,255,0.22);
}

/* --- NEW (cyan) --- */
#remindersBody .reminderCard .pill[data-status="new"],
#remindersBody .reminderCard .pill.status-new{
  border-color: rgba(0,220,255,0.55) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.22), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
}
#remindersBody .reminderCard .pill[data-status="new"]::before,
#remindersBody .reminderCard .pill.status-new::before{
  background: rgba(0,220,255,0.95) !important;
}

/* --- PAID (purple) --- */
#remindersBody .reminderCard .pill[data-status="paid"],
#remindersBody .reminderCard .pill.status-paid{
  border-color: rgba(127,0,255,0.62) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(127,0,255,0.22), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
  box-shadow:
    inset 0 0 24px rgba(127,0,255,0.12),
    0 0 26px rgba(127,0,255,0.14);
}
#remindersBody .reminderCard .pill[data-status="paid"]::before,
#remindersBody .reminderCard .pill.status-paid::before{
  background: rgba(127,0,255,0.98) !important;
  box-shadow: 0 0 16px rgba(127,0,255,0.22);
}

/* --- REVIEW (yellow) --- */
#remindersBody .reminderCard .pill[data-status="review"],
#remindersBody .reminderCard .pill.status-review{
  border-color: rgba(255,214,0,0.62) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(255,214,0,0.20), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
  box-shadow:
    inset 0 0 24px rgba(255,214,0,0.10),
    0 0 26px rgba(255,214,0,0.12);
}
#remindersBody .reminderCard .pill[data-status="review"]::before,
#remindersBody .reminderCard .pill.status-review::before{
  background: rgba(255,214,0,0.98) !important;
  box-shadow: 0 0 16px rgba(255,214,0,0.18);
}

/* --- REFUNDED (green) --- */
#remindersBody .reminderCard .pill[data-status="refunded"],
#remindersBody .reminderCard .pill.status-refunded{
  border-color: rgba(0,255,145,0.58) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,255,145,0.18), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
  box-shadow:
    inset 0 0 24px rgba(0,255,145,0.10),
    0 0 26px rgba(0,255,145,0.12);
}
#remindersBody .reminderCard .pill[data-status="refunded"]::before,
#remindersBody .reminderCard .pill.status-refunded::before{
  background: rgba(0,255,145,0.98) !important;
  box-shadow: 0 0 16px rgba(0,255,145,0.18);
}

/* --- COMPLETED (cyan-blue) --- */
#remindersBody .reminderCard .pill[data-status="completed"],
#remindersBody .reminderCard .pill.status-completed{
  border-color: rgba(0,220,255,0.52) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(0,220,255,0.18), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
}
#remindersBody .reminderCard .pill[data-status="completed"]::before,
#remindersBody .reminderCard .pill.status-completed::before{
  background: rgba(0,220,255,0.98) !important;
}

/* --- CANCELLED (red) --- */
#remindersBody .reminderCard .pill[data-status="cancelled"],
#remindersBody .reminderCard .pill.status-cancelled,
#remindersBody .reminderCard .pill[data-status="canceled"],
#remindersBody .reminderCard .pill.status-canceled{
  border-color: rgba(255,90,90,0.60) !important;
  background:
    radial-gradient(140% 220% at 50% 0%, rgba(255,90,90,0.18), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.26) !important;
  box-shadow:
    inset 0 0 24px rgba(255,90,90,0.10),
    0 0 26px rgba(255,90,90,0.12);
}
#remindersBody .reminderCard .pill[data-status="cancelled"]::before,
#remindersBody .reminderCard .pill.status-cancelled::before,
#remindersBody .reminderCard .pill[data-status="canceled"]::before,
#remindersBody .reminderCard .pill.status-canceled::before{
  background: rgba(255,90,90,0.98) !important;
  box-shadow: 0 0 16px rgba(255,90,90,0.18);
}

/* =========================================================
   REMINDERS — STATUS BADGE POP + COLOR CODING (FIX)
   Your reminders use: <div class="reminderBadge">PAID</div>
   We now add: class="reminderBadge status-paid" and data-status="paid"
   ========================================================= */

#remindersBody .reminderCard .reminderBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(0,220,255,0.45);
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(0,220,255,0.20), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.22);
  color: rgba(233,246,255,0.95);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 3px rgba(0,220,255,0.10),
    0 0 26px rgba(0,220,255,0.14),
    inset 0 0 22px rgba(0,220,255,0.10);
  transform: translateY(-2px);
}

#remindersBody .reminderCard .reminderBadge::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,220,255,0.95);
  box-shadow: 0 0 16px rgba(0,220,255,0.18);
}

/* PAID (purple) */
#remindersBody .reminderCard .reminderBadge[data-status="paid"],
#remindersBody .reminderCard .reminderBadge.status-paid{
  border-color: rgba(127,0,255,0.65) !important;
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(127,0,255,0.22), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.22) !important;
  box-shadow:
    0 0 0 3px rgba(127,0,255,0.10),
    0 0 26px rgba(127,0,255,0.14),
    inset 0 0 22px rgba(127,0,255,0.10);
}
#remindersBody .reminderCard .reminderBadge[data-status="paid"]::before,
#remindersBody .reminderCard .reminderBadge.status-paid::before{
  background: rgba(127,0,255,0.98) !important;
  box-shadow: 0 0 16px rgba(127,0,255,0.22);
}

/* REVIEW (yellow) */
#remindersBody .reminderCard .reminderBadge[data-status="review"],
#remindersBody .reminderCard .reminderBadge.status-review{
  border-color: rgba(255,214,0,0.65) !important;
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(255,214,0,0.20), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.22) !important;
  box-shadow:
    0 0 0 3px rgba(255,214,0,0.10),
    0 0 26px rgba(255,214,0,0.12),
    inset 0 0 22px rgba(255,214,0,0.08);
}
#remindersBody .reminderCard .reminderBadge[data-status="review"]::before,
#remindersBody .reminderCard .reminderBadge.status-review::before{
  background: rgba(255,214,0,0.98) !important;
  box-shadow: 0 0 16px rgba(255,214,0,0.18);
}

/* REFUNDED (green) */
#remindersBody .reminderCard .reminderBadge[data-status="refunded"],
#remindersBody .reminderCard .reminderBadge.status-refunded{
  border-color: rgba(0,255,145,0.62) !important;
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(0,255,145,0.18), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.22) !important;
  box-shadow:
    0 0 0 3px rgba(0,255,145,0.10),
    0 0 26px rgba(0,255,145,0.12),
    inset 0 0 22px rgba(0,255,145,0.08);
}
#remindersBody .reminderCard .reminderBadge[data-status="refunded"]::before,
#remindersBody .reminderCard .reminderBadge.status-refunded::before{
  background: rgba(0,255,145,0.98) !important;
  box-shadow: 0 0 16px rgba(0,255,145,0.18);
}

/* CANCELLED (red) */
#remindersBody .reminderCard .reminderBadge[data-status="cancelled"],
#remindersBody .reminderCard .reminderBadge.status-cancelled,
#remindersBody .reminderCard .reminderBadge[data-status="canceled"],
#remindersBody .reminderCard .reminderBadge.status-canceled{
  border-color: rgba(255,90,90,0.62) !important;
  background:
    radial-gradient(160% 240% at 50% 0%, rgba(255,90,90,0.18), rgba(0,0,0,0) 62%),
    rgba(0,0,0,0.22) !important;
  box-shadow:
    0 0 0 3px rgba(255,90,90,0.10),
    0 0 26px rgba(255,90,90,0.12),
    inset 0 0 22px rgba(255,90,90,0.08);
}
#remindersBody .reminderCard .reminderBadge[data-status="cancelled"]::before,
#remindersBody .reminderCard .reminderBadge.status-cancelled::before,
#remindersBody .reminderCard .reminderBadge[data-status="canceled"]::before,
#remindersBody .reminderCard .reminderBadge.status-canceled::before{
  background: rgba(255,90,90,0.98) !important;
  box-shadow: 0 0 16px rgba(255,90,90,0.18);
}

/* COMPLETED / NEW (cyan) */
#remindersBody .reminderCard .reminderBadge[data-status="completed"],
#remindersBody .reminderCard .reminderBadge.status-completed,
#remindersBody .reminderCard .reminderBadge[data-status="new"],
#remindersBody .reminderCard .reminderBadge.status-new{
  border-color: rgba(0,220,255,0.58) !important;
}