/* ============================================================
   Aurora Flow – Global Design System
   Premium Dark Glassmorphism for COWE Blazor WASM
   ============================================================ */

/* ── Fonts ──
   Outfit + Inter are self-hosted via lib/fonts/ui-fonts.css (linked in index.html before this
   file). Material Symbols via lib/fonts/material-symbols.css. No runtime Google Fonts dependency. */

/* ── CSS Variables ── */
:root {
  /* Space Gray Default */
  --bg-base:          #1c1c1e;
  --bg-surface:       #2c2c2e;
  --bg-elevated:      #3a3a3c;

  /* Dimming scrim behind the tutorial spotlight. Read by js/tutorial.js at runtime; light themes
     below soften it so the page underneath is not crushed to near-black. */
  --tutorial-overlay: rgba(5, 5, 8, 0.75);

  --glass-bg:         rgba(44, 44, 46, 0.85);
  --glass-border:     rgba(255, 255, 255, 0.1);
  --glass-hover:      rgba(255, 255, 255, 0.05);

  --gold:             #0a84ff;
  --gold-dim:         rgba(10, 132, 255, 0.15);
  --gold-glow:        rgba(10, 132, 255, 0.35);
  --gold-light:       #64d2ff;
  
  --silver:           #98989d;
  --fire-red:         #ff453a;
  
  --accent-blue:      #0a84ff;
  --accent-purple:    #bf5af2;
  --accent-cyan:      #64d2ff;
  --accent-green:     #32d74b;
  --accent-red:       #ff453a;
  --accent-orange:    #ff9f0a;

  --glow-blue:        rgba(10, 132, 255, 0.15);
  --glow-purple:      rgba(191, 90, 242, 0.15);
  --glow-cyan:        rgba(100, 210, 255, 0.15);
  --glow-green:       rgba(50, 215, 75, 0.15);
  --glow-red:         rgba(255, 69, 58, 0.15);
  --glow-orange:      rgba(255, 159, 10, 0.15);

  --text-primary:     #f5f5f7;
  --text-secondary:   #d1d1d6;
  --text-muted:       #8e8e93;

  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        24px;

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:        0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg:        0 16px 48px rgba(0,0,0,0.4);
  --shadow-gold:      0 0 32px rgba(10,132,255,0.15);

  --transition:       all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  --sidebar-width:    260px;
  --topbar-height:    64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Loading Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 12px var(--gold-glow); }
  50%       { box-shadow: 0 0 28px var(--gold-glow), 0 0 48px rgba(212,175,55,0.15); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Auth Layout ── */
.auth-root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-elevated) 0%, #000000 100%);
  position: relative;
  overflow: hidden;
}

/* ── Pure CSS Embers Effect ── */
.auth-root::before, .auth-root::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}

.auth-root::before {
  width: 4px; height: 4px;
  box-shadow: 
    10vw 100vh 2px var(--fire-red), 
    20vw 110vh 3px var(--gold),
    35vw 90vh 1px var(--silver),
    50vw 120vh 4px var(--fire-red),
    65vw 95vh 2px var(--gold-light),
    80vw 105vh 3px var(--fire-red),
    90vw 115vh 1px var(--silver),
    15vw 85vh 2px var(--gold),
    45vw 100vh 4px var(--fire-red),
    75vw 110vh 2px var(--gold);
  animation: drift-up 25s linear infinite;
  opacity: 0.6;
}

.auth-root::after {
  width: 6px; height: 6px;
  box-shadow: 
    5vw 95vh 2px var(--gold-light), 
    25vw 115vh 4px var(--fire-red),
    40vw 105vh 2px var(--silver),
    55vw 85vh 3px var(--gold),
    70vw 100vh 2px var(--fire-red),
    85vw 120vh 1px var(--silver),
    95vw 90vh 4px var(--gold-light);
  animation: drift-up 18s linear infinite;
  animation-delay: 5s;
  opacity: 0.4;
}

@keyframes drift-up {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

/* ── Shell Layout ── */
.aurora-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  /* Fixed viewport height so the content column scrolls internally and the sidebar/topbar
     stay pinned (previously min-height let the shell grow, so the whole page scrolled and the
     sidebar drifted out of view). */
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* ── Animated Backdrops (Aurora Flow Blobs) ── */
.aurora-blobs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: float-aurora 25s ease-in-out infinite alternate;
}

.blob-1 {
  background: radial-gradient(circle, var(--gold) 0%, transparent 80%);
  top: -10%;
  left: 10%;
  animation-duration: 28s;
}

.blob-2 {
  background: radial-gradient(circle, var(--accent-blue) 0%, transparent 80%);
  bottom: 5%;
  right: 5%;
  animation-delay: -5s;
  animation-duration: 34s;
}

.blob-3 {
  background: radial-gradient(circle, var(--accent-purple) 0%, transparent 80%);
  top: 45%;
  left: 50%;
  width: 380px;
  height: 380px;
  opacity: 0.08;
  animation-delay: -12s;
  animation-duration: 22s;
}

@keyframes float-aurora {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(80px, 60px) scale(1.15) rotate(180deg); }
  100% { transform: translate(-40px, -80px) scale(0.9) rotate(360deg); }
}

/* The flex column that holds topbar + main content */
.aurora-content-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* allow the scrollable <main> child to constrain within the fixed-height shell */
}

/* ── Sidebar ── */
.aurora-sidebar {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

.aurora-sidebar::-webkit-scrollbar { width: 4px; }
.aurora-sidebar::-webkit-scrollbar-track { background: transparent; }
.aurora-sidebar::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--glass-border);
  text-decoration: none;
}

.sidebar-brand-icon {
  width: 36px;
  height: 36px;
  background: var(--gold);
  color: #ffffff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-gold);
  flex-shrink: 0;
}

/* White-label custom logo (replaces the default brand icon) */
.sidebar-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
}

.sidebar-brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.sidebar-brand-sub {
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.sidebar-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 20px 20px 8px;
  font-weight: 600;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 2px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}

.sidebar-nav-item:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
  border-color: var(--glass-border);
}

.sidebar-nav-item.active {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(212,175,55,0.25);
}

.sidebar-nav-item.active .nav-icon { color: var(--gold); }

.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-footer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-footer-info { flex: 1; min-width: 0; }
.sidebar-footer-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer-role {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Topbar ── */
.aurora-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px;
  min-height: var(--topbar-height);
  /* Theme-aware surface — was hardcoded near-black, which made the bar look grey and its
     dark-on-dark actions invisible until hover in the light theme. */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Ensure topbar actions read clearly on the themed surface */
.aurora-topbar .logout-btn,
.aurora-topbar .btn-ghost {
  color: var(--text-secondary);
  border-color: var(--glass-border);
  background: var(--glass-hover);
}
.aurora-topbar .logout-btn:hover,
.aurora-topbar .btn-ghost:hover { color: var(--text-primary); border-color: var(--gold); }

.topbar-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Mobile nav toggle (hamburger) — hidden on desktop, shown < 900px ── */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.sidebar-toggle:hover { background: var(--glass-hover); border-color: var(--gold); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Backdrop behind the off-canvas drawer (mobile only) */
.sidebar-backdrop { display: none; }

.topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--accent-green);
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── Credits pill (the single balance readout in the top bar) ── */
.topbar-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-glow, var(--glass-border));
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.topbar-credits:hover { background: var(--glass-hover); }

/* Overage: balance is spent and usage is now billable, so it reads as a warning. */
.topbar-credits.is-overage {
  color: #ffb703;
  background: rgba(255, 183, 3, 0.12);
  border-color: rgba(255, 183, 3, 0.35);
}
.credits-overage-chip {
  font-size: 0.7rem;
  background: rgba(255, 183, 3, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Main Content ── */
.aurora-main {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  animation: fadeInUp 0.3s ease;
}

/* ── Login Card ── */
.login-card {
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
}

.login-header {
  text-align: center;
  padding: 32px 24px 20px;
  border-bottom: 1px solid var(--glass-border);
}

.login-brand-icon {
  width: 56px;
  height: 56px;
  background: var(--gold);
  color: #ffffff;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow-gold);
  margin-bottom: 14px;
}

.login-header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.login-header p {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
}

.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.login-tab:hover {
  color: var(--text-primary);
  background: var(--glass-hover);
}

.login-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(212, 175, 55, 0.03);
}

.login-body {
  padding: 28px 32px 36px;
}

.auth-error-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  color: var(--accent-red);
  font-size: 0.82rem;
}

.alert-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.alert-content {
  line-height: 1.4;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

.justify-center { justify-content: center; }

/* ── Glass Card ── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.glass-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: var(--shadow-md);
}

.glass-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border);
}

.glass-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.glass-card-body { padding: 22px; }

/* ── Page Header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-header-left h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-header-left p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ── Stat Cards ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
  cursor: default;
}

.stat-card:hover {
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.gold    { background: var(--gold-dim);               color: var(--gold); }
.stat-icon.blue    { background: rgba(91,141,238,0.15);         color: var(--accent-blue); }
.stat-icon.green   { background: rgba(52,211,153,0.15);         color: var(--accent-green); }
.stat-icon.purple  { background: rgba(139,92,246,0.15);         color: var(--accent-purple); }
.stat-icon.red     { background: rgba(248,113,113,0.15);        color: var(--accent-red); }
.stat-icon.cyan    { background: rgba(34,211,238,0.15);         color: var(--accent-cyan); }
.stat-icon.orange  { background: rgba(251,146,60,0.15);         color: var(--accent-orange); }

.stat-info { flex: 1; min-width: 0; }

.stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ── Table ── */
.aurora-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  /* A six-column table still needs ~300px more than a phone has, so it scrolls sideways. Without a
     cue that is invisible — the row just looks truncated. This paints a soft fade on the right edge
     that disappears once scrolled to the end (background-attachment: local on the gradient layers),
     so the scrollability is discoverable. */
  background:
    linear-gradient(to right, var(--bg-surface) 30%, rgba(0, 0, 0, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-surface) 30%, rgba(0, 0, 0, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
  /* Momentum scrolling on touch, and let the row scroll settle on a column edge. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.aurora-table {
  width: 100%;
  border-collapse: collapse;
}

.aurora-table thead tr {
  background: rgba(255,255,255,0.02);
}

.aurora-table th {
  padding: 12px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.aurora-table td {
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
}

.aurora-table tbody tr {
  transition: var(--transition);
  cursor: pointer;
}

.aurora-table tbody tr:hover td {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.aurora-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Badge / Status Pills ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-running  { background: rgba(52,211,153,0.15);  color: var(--accent-green);  border: 1px solid rgba(52,211,153,0.25); }
.badge-waiting  { background: rgba(251,146,60,0.15);  color: var(--accent-orange); border: 1px solid rgba(251,146,60,0.25); }
.badge-stopped  { background: rgba(248,113,113,0.15); color: var(--accent-red);    border: 1px solid rgba(248,113,113,0.25); }
.badge-completed{ background: rgba(91,141,238,0.15);  color: var(--accent-blue);   border: 1px solid rgba(91,141,238,0.25); }
.badge-faulted  { background: rgba(248,113,113,0.15); color: var(--accent-red);    border: 1px solid rgba(248,113,113,0.25); }
.badge-sim      { background: rgba(212,175,55,0.15);  color: var(--gold);          border: 1px solid rgba(212,175,55,0.25); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

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

.btn-primary {
  background: var(--gold);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 12px var(--gold-glow);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  background: var(--gold-light);
  color: #ffffff;
  box-shadow: 0 4px 20px var(--gold-glow);
  transform: translateY(-1px);
}

body[data-theme="obsidian"] .btn-primary,
body[data-theme="obsidian"] .sidebar-brand-icon,
body[data-theme="obsidian"] .login-brand-icon,
body[data-theme="obsidian"] .sidebar-footer-avatar,
body[data-theme="obsidian"] .aurora-driver-popover .driver-popover-next-btn,
body[data-theme="phantom"] .btn-primary,
body[data-theme="phantom"] .sidebar-brand-icon,
body[data-theme="phantom"] .login-brand-icon,
body[data-theme="phantom"] .sidebar-footer-avatar,
body[data-theme="phantom"] .aurora-driver-popover .driver-popover-next-btn {
  color: #000000 !important;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--glass-border);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--glass-hover);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.12);
}

.btn-danger {
  background: rgba(248,113,113,0.15);
  color: var(--accent-red);
  border-color: rgba(248,113,113,0.25);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(248,113,113,0.25);
}

.btn-success {
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
  border-color: rgba(52,211,153,0.25);
}
.btn-success:hover:not(:disabled) { background: rgba(52,211,153,0.25); }

.btn-sm { padding: 5px 11px; font-size: 0.77rem; }
.btn-xs { padding: 3px 8px; font-size: 0.72rem; }
.btn-icon { padding: 8px; min-width: 34px; justify-content: center; }
.btn-icon.btn-sm { padding: 5px; min-width: 28px; }

/* ── Form Controls ── */
.form-control {
  width: 100%;
  /* Was rgba(255,255,255,0.04) — a white wash that vanishes on the light themes (Zenith, Silver,
     Sandstone, Retro Blue), leaving inputs indistinguishable from the card behind them. Every theme
     defines --bg-elevated, which reads as a distinct surface on both dark and light. */
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 9px 13px;
  transition: var(--transition);
  outline: none;
}

.form-control:focus {
  /* Follows the theme accent instead of a hardcoded gold that clashed on every non-gold theme. */
  border-color: var(--gold);
  background: var(--glass-hover);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

.form-control::placeholder { color: var(--text-muted); }

/* ── Native dropdowns ──────────────────────────────────────────────────────
   A <select> renders its option list with the UA's own colours unless both the
   control and the options are given explicit ones. Without the `option` rule the
   list stays white-on-white in light themes and unreadable in dark ones. */
select.form-control,
select {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--glass-border);
}
select.form-control option,
select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}
select.form-control option:checked,
select option:checked {
  background-color: var(--gold-dim);
  color: var(--text-primary);
}

/* ── Modals, popovers and menus ────────────────────────────────────────────
   Themed shells so a dialog cannot stay dark on a light theme. Inline background
   colours on individual modals override these, so they are being removed as the
   components are touched. */
.modal-overlay,
.modal-backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.modal-content,
.glass-modal,
.dropdown-menu,
.popover-panel {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.dropdown-menu .dropdown-item {
  color: var(--text-secondary);
  background: transparent;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus-visible {
  background: var(--glass-hover);
  color: var(--text-primary);
}
.form-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; display: block; text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Additional button variants referenced by pages ── */
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--glass-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--glass-hover); border-color: var(--gold); }

.btn-outline, .btn-outline-light {
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border-color: var(--glass-border);
}
.btn-outline:hover:not(:disabled),
.btn-outline-light:hover:not(:disabled) {
  background: var(--glass-hover);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}

.btn-primary-border {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: var(--gold);
}
.btn-primary-border:hover:not(:disabled) { background: var(--gold-glow); color: var(--text-primary); }

/* ── Accessibility: keyboard focus rings ── */
.btn:focus-visible,
.sidebar-nav-item:focus-visible,
.topbar-credits:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.form-control:focus-visible { outline: none; } /* handled by the :focus glow above */

/* ── Accessibility: honour reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora-blob { animation: none; }
}

/* ============================================================
   Auth status pages (login/logout transitions)
   ============================================================ */
.auth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px;
}
.auth-status-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.35s ease;
}
.auth-status-card h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: 18px 0 8px;
}
.auth-status-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 22px; }
.auth-status-card .btn { display: inline-flex; }
.auth-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold);
  margin: 0 auto;
}
.auth-status-icon .material-symbols-rounded { font-size: 2.2rem; }
.auth-status-icon.error { background: rgba(230,57,70,0.12); color: var(--accent-red); }
.auth-status-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 4px solid var(--glass-border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* ============================================================
   Connector Catalog
   ============================================================ */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Keep search + sector filters reachable while the card grid scrolls under them. */
.connector-filter-bar {
  position: sticky;
  top: -4px;
  z-index: 20;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.connector-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}
.connector-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-purple);
  box-shadow: var(--shadow-md);
}

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

.connector-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(191,90,242,0.15);
  border: 1px solid rgba(191,90,242,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
}
.connector-icon .material-symbols-rounded { font-size: 1.7rem; }
/* Brand logo when supplied; sits in the same 46px tile as the glyph fallback. object-fit keeps
   varied logo aspect ratios inside the tile without distortion. */
.connector-icon .connector-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.connector-credit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(50,215,75,0.12);
  color: var(--accent-green);
  border: 1px solid rgba(50,215,75,0.28);
  white-space: nowrap;
}

.connector-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.connector-category { font-size: 0.75rem; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.connector-category > span { color: var(--accent-purple); }
.connector-pillar {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold) !important;
}

.connector-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}

.connector-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
}
.connector-status.regulated   { color: #f87171; }
.connector-status.unregulated { color: #34d399; }

.connector-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Sector filter chips */
.sector-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  transition: var(--transition);
}
.sector-tab:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.25); }
.sector-tab.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

/* ── Search Bar ── */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.search-wrap .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}
.search-wrap .form-control { padding-left: 35px; }

/* ── BPMN Canvas ── */
.bpmn-canvas-host {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.bpmn-canvas-container {
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
}

.bpmn-canvas-container .djs-container { height: 100%; }

/* Canvas toolbar */
.canvas-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

/* ── Variables Inspector ── */
.var-inspector {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

.var-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: fadeInUp 0.15s ease;
}

.var-row:last-child { border-bottom: none; }
.var-key { font-size: 0.8rem; font-weight: 600; color: var(--accent-cyan); font-family: 'Outfit', monospace; word-break: break-all; }
.var-val { font-size: 0.8rem; color: var(--text-secondary); word-break: break-all; }
.var-val.editing .form-control { font-family: monospace; font-size: 0.8rem; padding: 4px 8px; }

.var-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Log Timeline ── */
.log-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 28px;
}

.log-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--glass-border) 10%, var(--glass-border) 90%, transparent);
}

.log-entry {
  position: relative;
  padding: 10px 0 10px 16px;
  animation: fadeInUp 0.2s ease;
}

.log-entry::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glass-border);
  border: 2px solid var(--bg-base);
}

.log-entry.log-info::before    { background: var(--accent-blue); }
.log-entry.log-success::before { background: var(--accent-green); }
.log-entry.log-warning::before { background: var(--accent-orange); }
.log-entry.log-error::before   { background: var(--accent-red); }

.log-time  { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 2px; font-family: monospace; }
.log-step  { font-size: 0.75rem; font-weight: 600; color: var(--accent-cyan); margin-bottom: 3px; }
.log-msg   { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Detail Panel ── */
.detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Was 900px, which left a genuinely cramped band: at ~950px the sidebar was still docked and the
   content column measured only 690px — narrow enough that the instances table already overflowed.
   Collapsing to the drawer at 1024px instead gives small laptops the full width back, and is where
   the "needs a big screen" complaint came from. */
@media (max-width: 1024px) {
  .detail-split { grid-template-columns: 1fr; }

  /* Single-column shell; the sidebar becomes an off-canvas drawer. */
  .aurora-shell { grid-template-columns: 1fr; }

  .aurora-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(84vw, var(--sidebar-width));
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: var(--shadow-lg);
  }
  .aurora-shell.sidebar-open .aurora-sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .aurora-shell.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

  /* Reveal the hamburger and keep the topbar tidy on small screens. */
  .sidebar-toggle { display: inline-flex; }
  .aurora-topbar { padding: 0 16px; }
  .aurora-main { padding: 16px; }

  .login-body { padding: 24px 20px 28px; }
  .login-card { max-width: 100%; }
}

/* ── Phone layout ──────────────────────────────────────────────────────────
   Below this the top bar cannot hold the status pill, org name, credits and
   Logout on one line, and page padding starts costing more than it gives. */
@media (max-width: 640px) {
  .aurora-topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  /* Keep the hamburger and title on the first line, actions on the second. */
  .topbar-actions {
    width: 100%;
    order: 3;
    justify-content: flex-start;
    gap: 6px;
  }
  .topbar-title { font-size: 0.95rem; }
  /* The org name is the least load-bearing of the pills — it is already shown on
     the Team page and in the sidebar footer. */
  .topbar-org { display: none; }

  .aurora-main { padding: 12px; }
  .page-title { font-size: 1.35rem; }

  /* Cards and stat grids go single-column rather than squeezing two up. */
  .stat-grid,
  .detail-split { grid-template-columns: 1fr; }

  .glass-card-body { padding: 14px; }
  .aurora-table th,
  .aurora-table td { padding: 10px 12px; }

  /* Full-width primary actions are easier to hit than right-aligned buttons. */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Mono text ── */
.mono { font-family: 'Courier New', monospace; font-size: 0.82rem; }

/* ============================================================
   Modern Utility Layer
   A compact, responsive utility set (Tailwind- + Bootstrap-style
   aliases) that the Razor markup relies on. Mobile-first: base
   rules apply everywhere, `md:`/`lg:` variants layer on at
   breakpoints. Keeps page markup declarative and consistent.
   ============================================================ */

/* ── Display ── */
.block, .d-block { display: block; }
.inline-block    { display: inline-block; }
.hidden          { display: none !important; }
.flex, .d-flex   { display: flex; }
.inline-flex     { display: inline-flex; }
.grid            { display: grid; }

/* ── Flex direction / wrap / grow ── */
.flex-row     { flex-direction: row; }
.flex-col, .flex-column { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-grow-1, .flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Align / justify (Tailwind + Bootstrap aliases) ── */
.items-start,  .align-items-start   { align-items: flex-start; }
.items-center, .align-items-center  { align-items: center; }
.items-end,    .align-items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start,   .justify-content-start   { justify-content: flex-start; }
.justify-center,  .justify-content-center  { justify-content: center; }
.justify-between, .justify-content-between  { justify-content: space-between; }
.justify-around,  .justify-content-around   { justify-content: space-around; }
.justify-end,     .justify-content-end      { justify-content: flex-end; }
.self-start { align-self: flex-start; }
.self-end   { align-self: flex-end; }

/* ── Grid columns ── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2, .grid-2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Responsive auto-fit grids used by specific pages */
.templates-grid, .agreement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }

/* ── Gap ── */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* ── Padding / margin scale (4px base) ── */
.p-0 { padding: 0; }      .p-1 { padding: 4px; }   .p-2 { padding: 8px; }
.p-3 { padding: 12px; }   .p-4 { padding: 16px; }  .p-5 { padding: 20px; }
.p-6 { padding: 24px; }   .p-8 { padding: 32px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-2 { padding-top: 8px; }  .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; }
.pb-2 { padding-bottom: 8px; } .pb-4 { padding-bottom: 16px; }
.m-0 { margin: 0; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }

/* ── Sizing ── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* ── Typography ── */
.text-xs   { font-size: 0.72rem; }
.text-sm, .font-size-sm { font-size: 0.82rem; }
.text-base { font-size: 1rem; }
.text-lg, .font-size-lg  { font-size: 1.125rem; }
.font-size-xs { font-size: 0.72rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono, .font-monospace { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-words { word-break: break-word; overflow-wrap: anywhere; }

/* ── Text colors ── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-white     { color: #ffffff; }
.text-light     { color: var(--text-secondary); }
.text-gold      { color: var(--gold); }
.text-green, .text-success, .text-emerald { color: var(--accent-green); }
.text-red, .text-danger { color: var(--accent-red); }
.text-warning   { color: var(--accent-orange); }
.text-blue      { color: var(--accent-blue); }
.text-cyan      { color: var(--accent-cyan); }
.text-purple    { color: var(--accent-purple); }

/* ── Borders ── */
.border    { border: 1px solid var(--glass-border); }
.border-t, .border-top    { border-top: 1px solid var(--glass-border); }
.border-b, .border-bottom { border-bottom: 1px solid var(--glass-border); }
.border-end { border-right: 1px solid var(--glass-border); }
.border-secondary { border-color: var(--glass-border); }
.border-gray-700 { border-color: rgba(255,255,255,0.12); }
.border-gray-800 { border-color: rgba(255,255,255,0.08); }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

/* ── Responsive variants (mobile-first) ── */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Blazor error UI ── */
#blazor-error-ui {
  background: rgba(248,113,113,0.15);
  border-top: 1px solid rgba(248,113,113,0.3);
  color: var(--accent-red);
  display: none;
  font-size: 0.82rem;
  padding: 12px 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#blazor-error-ui.blazor-error-boundary::after {
  content: "An error has occurred. ";
}

#blazor-error-ui .reload  { color: var(--gold); text-decoration: underline; cursor: pointer; margin-left: 6px; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, var(--glass-bg) 25%, var(--glass-hover) 50%, var(--glass-bg) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}

@keyframes pulse-executing {
  0% { stroke: #10b981; fill: rgba(16, 185, 129, 0.08); }
  50% { stroke: #34d399; fill: rgba(16, 185, 129, 0.22); }
  100% { stroke: #10b981; fill: rgba(16, 185, 129, 0.08); }
}

@keyframes flash-failed {
  0% { stroke: #ef4444; fill: rgba(239, 68, 68, 0.1); }
  50% { stroke: #f87171; fill: rgba(239, 68, 68, 0.35); }
  100% { stroke: #ef4444; fill: rgba(239, 68, 68, 0.1); }
}

/* ── Highlight for executing BPMN nodes (injected by bpmn-js markers) ── */
.highlight-active-node .djs-visual > :nth-child(1) {
  stroke: #10b981 !important;
  stroke-width: 3.5px !important;
  fill: rgba(16, 185, 129, 0.12) !important;
  animation: pulse-executing 2s infinite ease-in-out !important;
}

/* ── Highlight for failed BPMN nodes (injected by bpmn-js markers) ── */
.highlight-failed-node .djs-visual > :nth-child(1) {
  stroke: #ef4444 !important;
  stroke-width: 4px !important;
  fill: rgba(239, 68, 68, 0.18) !important;
  animation: flash-failed 1.2s infinite ease-in-out !important;
}

/* ── Highlight for executed BPMN nodes (injected by bpmn-js markers) ── */
.highlight-executed-node .djs-visual > :nth-child(1) {
  stroke: #3b82f6 !important;
  stroke-width: 2.5px !important;
  fill: rgba(59, 130, 246, 0.08) !important;
  transition: all 0.3s ease;
}

/* ── Replay controls toolbar styling ── */
.replay-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  margin-top: 12px;
}
.replay-progress-bar {
  flex-grow: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--glass-border);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.replay-progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.replay-progress-bar::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}


/* ── Canvas Designer Fixes ── */
/* ── Workflow canvas: premium bpmn-js theme, aligned with the marketing simulator ── */
:root {
  --canvas-accent:      #4f8fff;   /* marketing primary blue */
  --canvas-accent-soft: rgba(79, 143, 255, 0.14);
  --canvas-accent-glow: rgba(79, 143, 255, 0.45);
}

.bjs-container {
  background-color: var(--bg-base) !important;
  /* soft brand glow from the top + a fine dot grid, matching the marketing depth */
  background-image:
    radial-gradient(circle at 50% -10%, var(--canvas-accent-soft), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) !important;
  background-size: auto, 24px 24px !important;
}

/* Nodes — elevated surface with a crisp brand-blue outline */
.djs-visual > circle,
.djs-visual > rect,
.djs-visual > polygon,
.djs-visual > path {
  stroke: var(--canvas-accent) !important;
  fill: var(--bg-elevated) !important;
  stroke-width: 2px !important;
}

/* Depth: a soft drop shadow on every shape so nodes read as floating cards */
.djs-shape .djs-visual { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)); }

/* Selection — cyan focus ring + glow */
.djs-element.selected .djs-visual > :first-child {
  stroke: var(--accent-cyan) !important;
  stroke-width: 2.5px !important;
}
.djs-element.selected .djs-visual { filter: drop-shadow(0 0 9px var(--glow-cyan)); }

/* Connections — brand blue, rounded, subtly glowing */
.djs-connection > path {
  stroke: var(--canvas-accent) !important;
  stroke-width: 2.25px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.bjs-container marker > path,
.djs-connection marker path {
  fill: var(--canvas-accent) !important;
  stroke: var(--canvas-accent) !important;
}

/* Text labels */
.djs-label, .djs-label > tspan {
  fill: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Palette + context pad + popups — glassmorphism to match the app chrome */
.djs-palette,
.djs-context-pad,
.djs-popup {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
.djs-palette .entry,
.djs-palette .djs-palette-toggle,
.djs-context-pad .entry {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}
.djs-palette .entry:hover,
.djs-context-pad .entry:hover {
  background: var(--canvas-accent-soft) !important;
  color: var(--canvas-accent) !important;
  border-radius: 8px !important;
}

.bjs-powered-by {
  display: none !important;
}


/* ── Theming System ── */

/* Light themes get a gentler scrim — the default near-black one buries a light page. */
body[data-theme="zenith"],
body[data-theme="silver"],
body[data-theme="sandstone"],
body[data-theme="retro-blue"],
body[data-theme="aero"],
body[data-theme="mint"] {
  --tutorial-overlay: rgba(30, 41, 59, 0.45);
}

/* 1. "Equinox" Theme (calm charcoal, coral accent)
   Charcoal slate base with soft coral node accents and eye-soothing contrast */
body[data-theme="equinox"] {
  --bg-base:          #181b20;
  --bg-surface:       #21252b;
  --bg-elevated:      #282c34;

  --glass-bg:         rgba(33, 37, 43, 0.85);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-hover:      rgba(255, 255, 255, 0.12);

  --gold:             #ff6d5a;
  --gold-dim:         rgba(255, 109, 90, 0.15);
  --gold-glow:        rgba(255, 109, 90, 0.35);
  --gold-light:       #ff8f80;
  
  --silver:           #abb2bf;
  --fire-red:         #ff6d5a;

  --text-primary:     #ffffff;
  --text-secondary:   #abb2bf;
  --text-muted:       #5c6370;

  --accent-blue:      #61afef;
  --accent-purple:    #c678dd;
  --accent-cyan:      #4ecdc4;
  --accent-green:     #98c379;
  --accent-red:       #e06c75;
  --accent-orange:    #d19a66;
}

/* 2. "Zenith" Theme (Clean Slate Light) 
   Crisp porcelain base with high-contrast slate text and signal-orange accents */
body[data-theme="zenith"] {
  --bg-base:          #f8fafc;
  --bg-surface:       #ffffff;
  --bg-elevated:      #f1f5f9;

  --glass-bg:         #ffffff;
  --glass-border:     #e2e8f0;
  --glass-hover:      #f8fafc;

  --gold:             #ff4f00;
  --gold-dim:         rgba(255, 79, 0, 0.1);
  --gold-glow:        rgba(255, 79, 0, 0.25);
  --gold-light:       #ff7033;
  
  --silver:           #475569;
  --fire-red:         #4f46e5;

  --text-primary:     #0f172a;
  --text-secondary:   #334155;
  --text-muted:       #64748b;

  --accent-blue:      #0284c7;
  --accent-purple:    #7c3aed;
  --accent-cyan:      #0891b2;
  --accent-green:     #059669;
  --accent-red:       #e11d48;
  --accent-orange:    #ff4f00;
}

/* 3. "Pulse" Theme (Inspired by Technology / Cyber) 
   Dark Matrix, Neon Green, Cyan */
body[data-theme="pulse"] {
  --bg-base:          #0d1117;
  --bg-surface:       #161b22;
  --bg-elevated:      #21262d;

  --glass-bg:         #21262d;
  --glass-border:     #3fb950;
  --glass-hover:      #30363d;

  --gold:             #3fb950; /* Neon Green */
  --gold-dim:         rgba(63,185,80,0.15);
  --gold-glow:        rgba(63,185,80,0.35);
  --gold-light:       #56d364;
  
  --silver:           #8b949e;
  --fire-red:         #58a6ff; /* Cyan/Blue */

  --text-primary:     #c9d1d9;
  --text-secondary:   #8b949e;
  --text-muted:       #484f58;

  --accent-blue:      #58a6ff;
  --accent-purple:    #bc8cff;
  --accent-cyan:      #56d364;
  --accent-green:     #3fb950;
  --accent-red:       #f85149;
  --accent-orange:    #db6d28;
}

/* 4. "Nebula" Theme (Inspired by Creative / Digital Agency) 
   Deep Indigo, Vibrant Purple, Hot Pink */
body[data-theme="nebula"] {
  --bg-base:          #10002b;
  --bg-surface:       #240046;
  --bg-elevated:      #3c096c;

  --glass-bg:         rgba(224, 170, 255, 0.05);
  --glass-border:     rgba(224, 170, 255, 0.15);
  --glass-hover:      rgba(224, 170, 255, 0.1);

  --gold:             #e0aaff; /* Light Purple */
  --gold-dim:         rgba(224,170,255,0.15);
  --gold-glow:        rgba(224,170,255,0.35);
  --gold-light:       #f5d0ff;
  
  --silver:           #c77dff; /* Medium Purple */
  --fire-red:         #ff0a54; /* Hot Pink */

  --text-primary:     #ffffff;
  --text-secondary:   #e0aaff;
  --text-muted:       #9d4edd;

  --accent-blue:      #4cc9f0;
  --accent-purple:    #b5179e;
  --accent-cyan:      #7209b7;
  --accent-green:     #4ecdc4;
  --accent-red:       #ff0a54;
  --accent-orange:    #ff70a6;
}

/* ── Driver.js Custom Overrides ── */
.aurora-driver-popover {
  /* Was a hardcoded dark rgba(13,13,18,0.96); on the light themes that put dark --text-primary on a
     dark card. --bg-surface is defined by every theme and reads as a raised panel on both. */
  background: var(--bg-surface) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
  max-width: 380px !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
}

.aurora-driver-popover .driver-popover-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  color: var(--text-primary) !important;
  margin-bottom: 8px !important;
}

.aurora-driver-popover .driver-popover-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 16px !important;
}

.aurora-driver-popover .driver-popover-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid var(--glass-border) !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.aurora-driver-popover .driver-popover-progress-text {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

.aurora-driver-popover .driver-popover-close-btn {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  transition: var(--transition) !important;
}
.aurora-driver-popover .driver-popover-close-btn:hover {
  color: var(--accent-red) !important;
}

/* Tutorial Buttons styling */
.aurora-driver-popover .driver-popover-btn {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--glass-border) !important;
  /* Was a white wash invisible on light themes; --bg-elevated reads as a control on every theme. */
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.aurora-driver-popover .driver-popover-btn:hover {
  background: var(--glass-hover) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
}

/* Primary/Next button gets the premium golden flow look */
.aurora-driver-popover .driver-popover-next-btn {
  background: var(--gold) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--gold-glow) !important;
}

.aurora-driver-popover .driver-popover-next-btn:hover {
  box-shadow: 0 4px 14px var(--gold-glow) !important;
  transform: translateY(-0.5px) !important;
  background: var(--gold-light) !important;
  color: #ffffff !important;
}

/* The arrow is a CSS triangle, so the visible edge must match the popover surface. Hardcoded dark
   before, which left a black wedge pointing off a light-theme popover. */
.aurora-driver-popover .driver-popover-arrow {
  border-color: var(--bg-surface) !important;
}
.aurora-driver-popover .driver-popover-arrow-side-left {
  border-left-color: var(--bg-surface) !important;
}
.aurora-driver-popover .driver-popover-arrow-side-right {
  border-right-color: var(--bg-surface) !important;
}
.aurora-driver-popover .driver-popover-arrow-side-top {
  border-top-color: var(--bg-surface) !important;
}
.aurora-driver-popover .driver-popover-arrow-side-bottom {
  border-bottom-color: var(--bg-surface) !important;
}


/* 5. "Obsidian" Theme (Deep Black, Monochrome) */
body[data-theme="obsidian"] {
  --bg-base:          #000000;
  --bg-surface:       #0a0a0a;
  --bg-elevated:      #121212;

  --glass-bg:         rgba(255, 255, 255, 0.02);
  --glass-border:     rgba(255, 255, 255, 0.1);
  --glass-hover:      rgba(255, 255, 255, 0.05);

  --gold:             #ffffff; 
  --gold-dim:         rgba(255,255,255,0.1);
  --gold-glow:        rgba(255,255,255,0.25);
  --gold-light:       #e0e0e0;
  
  --silver:           #888888;
  --fire-red:         #aaaaaa;

  --text-primary:     #ffffff;
  --text-secondary:   #cccccc;
  --text-muted:       #666666;

  --accent-blue:      #ffffff;
  --accent-purple:    #ffffff;
  --accent-cyan:      #ffffff;
  --accent-green:     #ffffff;
  --accent-red:       #888888;
  --accent-orange:    #aaaaaa;
}

/* 6. "Crimson" Theme (Vampire Dark, Deep Blood Red) */
body[data-theme="crimson"] {
  --bg-base:          #0f0505;
  --bg-surface:       #1a0a0a;
  --bg-elevated:      #261010;

  --glass-bg:         rgba(255, 50, 50, 0.02);
  --glass-border:     rgba(255, 50, 50, 0.12);
  --glass-hover:      rgba(255, 50, 50, 0.06);

  --gold:             #ff3333; 
  --gold-dim:         rgba(255,51,51,0.15);
  --gold-glow:        rgba(255,51,51,0.35);
  --gold-light:       #ff6666;
  
  --silver:           #b38b8b;
  --fire-red:         #cc0000;

  --text-primary:     #ffeaeb;
  --text-secondary:   #d1a3a3;
  --text-muted:       #8a5e5e;

  --accent-blue:      #ff3333;
  --accent-purple:    #aa0000;
  --accent-cyan:      #ff6666;
  --accent-green:     #ff4d4d;
  --accent-red:       #cc0000;
  --accent-orange:    #ff9999;
}

/* 7. "Oceanic" Theme (Deep Sea Blue, Turquoise) */
body[data-theme="oceanic"] {
  --bg-base:          #001220;
  --bg-surface:       #001d36;
  --bg-elevated:      #002b4d;

  --glass-bg:         rgba(0, 255, 255, 0.03);
  --glass-border:     rgba(0, 255, 255, 0.15);
  --glass-hover:      rgba(0, 255, 255, 0.08);

  --gold:             #00e6e6; 
  --gold-dim:         rgba(0,230,230,0.15);
  --gold-glow:        rgba(0,230,230,0.35);
  --gold-light:       #66ffff;
  
  --silver:           #80b3ff;
  --fire-red:         #0099ff;

  --text-primary:     #e6f2ff;
  --text-secondary:   #99ccff;
  --text-muted:       #4d99cc;

  --accent-blue:      #00e6e6;
  --accent-purple:    #0099ff;
  --accent-cyan:      #66ffff;
  --accent-green:     #00ff99;
  --accent-red:       #ff3366;
  --accent-orange:    #ffaa00;
}

/* 8. "Forest" Theme (Dark Moss Green, Earthy Tones) */
body[data-theme="forest"] {
  --bg-base:          #0b140b;
  --bg-surface:       #122012;
  --bg-elevated:      #1a2d1a;

  --glass-bg:         rgba(153, 255, 102, 0.03);
  --glass-border:     rgba(153, 255, 102, 0.12);
  --glass-hover:      rgba(153, 255, 102, 0.06);

  --gold:             #88cc00; 
  --gold-dim:         rgba(136,204,0,0.15);
  --gold-glow:        rgba(136,204,0,0.35);
  --gold-light:       #aadd33;
  
  --silver:           #a3b39a;
  --fire-red:         #559900;

  --text-primary:     #eef9e6;
  --text-secondary:   #bcd6b0;
  --text-muted:       #7a8f6d;

  --accent-blue:      #338800;
  --accent-purple:    #88cc00;
  --accent-cyan:      #aadd33;
  --accent-green:     #559900;
  --accent-red:       #cc3300;
  --accent-orange:    #ffaa00;
}

/* 9. "Sunset" Theme (Warm Twilight, Dark Purple/Magenta) */
body[data-theme="sunset"] {
  --bg-base:          #1a0916;
  --bg-surface:       #291022;
  --bg-elevated:      #3d1733;

  --glass-bg:         rgba(255, 102, 153, 0.04);
  --glass-border:     rgba(255, 102, 153, 0.15);
  --glass-hover:      rgba(255, 102, 153, 0.08);

  --gold:             #ff6699; 
  --gold-dim:         rgba(255,102,153,0.15);
  --gold-glow:        rgba(255,102,153,0.35);
  --gold-light:       #ff99bb;
  
  --silver:           #d6b0c3;
  --fire-red:         #ff9933;

  --text-primary:     #ffe6f2;
  --text-secondary:   #f0c2db;
  --text-muted:       #b37c9a;

  --accent-blue:      #ff6699;
  --accent-purple:    #cc3399;
  --accent-cyan:      #ff99bb;
  --accent-green:     #ff9933;
  --accent-red:       #cc0052;
  --accent-orange:    #ffaa66;
}

/* 10. "Glacier" Theme (Icy blue, very transparent glass) */
body[data-theme="glacier"] {
  --bg-base:          #000508;
  --bg-surface:       #031016;
  --bg-elevated:      #051821;

  --glass-bg:         rgba(153, 221, 255, 0.04);
  --glass-border:     rgba(153, 221, 255, 0.18);
  --glass-hover:      rgba(153, 221, 255, 0.1);

  --gold:             #80d4ff; 
  --gold-dim:         rgba(128,212,255,0.15);
  --gold-glow:        rgba(128,212,255,0.35);
  --gold-light:       #b3e6ff;
  
  --silver:           #8da4b3;
  --fire-red:         #33bbff;

  --text-primary:     #e6f7ff;
  --text-secondary:   #99ddff;
  --text-muted:       #5c99b3;

  --accent-blue:      #80d4ff;
  --accent-purple:    #33bbff;
  --accent-cyan:      #b3e6ff;
  --accent-green:     #00e6b8;
  --accent-red:       #ff5050;
  --accent-orange:    #ffa366;
}

/* 11. "Neon Tokyo" Theme (Cyberpunk pink and cyan glass) */
body[data-theme="neon-tokyo"] {
  --bg-base:          #080112;
  --bg-surface:       #100224;
  --bg-elevated:      #170433;

  --glass-bg:         rgba(255, 0, 128, 0.05);
  --glass-border:     rgba(0, 255, 255, 0.25);
  --glass-hover:      rgba(255, 0, 128, 0.12);

  --gold:             #ff0080; 
  --gold-dim:         rgba(255,0,128,0.2);
  --gold-glow:        rgba(255,0,128,0.45);
  --gold-light:       #ff4d94;
  
  --silver:           #917d99;
  --fire-red:         #00ffff;

  --text-primary:     #ffffff;
  --text-secondary:   #ff99cc;
  --text-muted:       #8a4d7a;

  --accent-blue:      #00ffff;
  --accent-purple:    #ff0080;
  --accent-cyan:      #00ffcc;
  --accent-green:     #39ff14;
  --accent-red:       #ff0055;
  --accent-orange:    #ff9900;
}

/* 12. "Amethyst" Theme (Deep purple ethereal glass) */
body[data-theme="amethyst"] {
  --bg-base:          #0a050f;
  --bg-surface:       #130a1c;
  --bg-elevated:      #1a0f26;

  --glass-bg:         rgba(170, 0, 255, 0.05);
  --glass-border:     rgba(170, 0, 255, 0.18);
  --glass-hover:      rgba(170, 0, 255, 0.1);

  --gold:             #aa00ff; 
  --gold-dim:         rgba(170,0,255,0.15);
  --gold-glow:        rgba(170,0,255,0.35);
  --gold-light:       #cc66ff;
  
  --silver:           #a38fb3;
  --fire-red:         #6600cc;

  --text-primary:     #f5e6ff;
  --text-secondary:   #d499ff;
  --text-muted:       #8d66b3;

  --accent-blue:      #aa00ff;
  --accent-purple:    #8a2be2;
  --accent-cyan:      #e0b0ff;
  --accent-green:     #00e6ac;
  --accent-red:       #ff3399;
  --accent-orange:    #ff9933;
}

/* 13. "Amber" Theme (Warm orange/gold heavy glass) */
body[data-theme="amber"] {
  --bg-base:          #120800;
  --bg-surface:       #1f0e00;
  --bg-elevated:      #2e1500;

  --glass-bg:         rgba(255, 170, 0, 0.05);
  --glass-border:     rgba(255, 170, 0, 0.2);
  --glass-hover:      rgba(255, 170, 0, 0.1);

  --gold:             #ffaa00; 
  --gold-dim:         rgba(255,170,0,0.15);
  --gold-glow:        rgba(255,170,0,0.35);
  --gold-light:       #ffcc66;
  
  --silver:           #b3967d;
  --fire-red:         #ff6600;

  --text-primary:     #fff5e6;
  --text-secondary:   #ffd480;
  --text-muted:       #b38b4d;

  --accent-blue:      #ffaa00;
  --accent-purple:    #ff6600;
  --accent-cyan:      #ffcc66;
  --accent-green:     #a3e635;
  --accent-red:       #ef4444;
  --accent-orange:    #f97316;
}

/* 14. "Emerald" Theme (Vivid green glass) */
body[data-theme="emerald"] {
  --bg-base:          #000f08;
  --bg-surface:       #001a0e;
  --bg-elevated:      #002615;

  --glass-bg:         rgba(0, 230, 115, 0.04);
  --glass-border:     rgba(0, 230, 115, 0.18);
  --glass-hover:      rgba(0, 230, 115, 0.1);

  --gold:             #00e673; 
  --gold-dim:         rgba(0,230,115,0.15);
  --gold-glow:        rgba(0,230,115,0.35);
  --gold-light:       #66ffb3;
  
  --silver:           #80b399;
  --fire-red:         #00b359;

  --text-primary:     #e6fff2;
  --text-secondary:   #80ffbf;
  --text-muted:       #4d9973;

  --accent-blue:      #00e673;
  --accent-purple:    #00ff80;
  --accent-cyan:      #66ffb3;
  --accent-green:     #10b981;
  --accent-red:       #ff3b30;
  --accent-orange:    #ff9500;
}

/* 15. "Phantom" Theme (Almost completely transparent monochrome glass) */
body[data-theme="phantom"] {
  --bg-base:          #050505;
  --bg-surface:       #0d0d0d;
  --bg-elevated:      #141414;

  --glass-bg:         rgba(255, 255, 255, 0.01);
  --glass-border:     rgba(255, 255, 255, 0.06);
  --glass-hover:      rgba(255, 255, 255, 0.03);

  --gold:             #ffffff; 
  --gold-dim:         rgba(255,255,255,0.05);
  --gold-glow:        rgba(255,255,255,0.15);
  --gold-light:       #e6e6e6;
  
  --silver:           #888888;
  --fire-red:         #cccccc;

  --text-primary:     #ffffff;
  --text-secondary:   #a6a6a6;
  --text-muted:       #595959;

  --accent-blue:      #ffffff;
  --accent-purple:    #cccccc;
  --accent-cyan:      #e6e6e6;
  --accent-green:     #cccccc;
  --accent-red:       #888888;
  --accent-orange:    #aaaaaa;
}

/* =========================================
   BPMN Minimap Custom Glassmorphism Styles
   ========================================= */
.djs-minimap {
  background-color: rgba(5, 5, 8, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  color: var(--text-primary) !important;
}

.djs-minimap .viewport-dom {
  border: solid 2px var(--gold) !important;
  border-radius: 4px !important;
  background-color: rgba(228, 182, 83, 0.1) !important;
}

.djs-minimap.open .overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

.djs-minimap .toggle {
  color: var(--text-muted) !important;
}
.djs-minimap .toggle:hover {
  color: var(--gold) !important;
}

[data-theme="zenith"] .djs-minimap {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="zenith"] .djs-minimap .viewport-dom {
  border: solid 2px var(--accent-blue) !important;
  background-color: rgba(10, 132, 255, 0.1) !important;
}

/* ── New OS & Pixel Themes ── */

body[data-theme="silver"] {
  --bg-base: #f2f2f7;
  --bg-surface: #ffffff;
  --bg-elevated: #e5e5ea;
  --glass-bg: #ffffff;
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-hover: #f8f8f8;
  --text-primary: #1c1c1e;
  --text-secondary: #3a3a3c;
  --text-muted: #8e8e93;
  --gold: #007aff;
  --gold-dim: rgba(0, 122, 255, 0.1);
  --gold-glow: rgba(0, 122, 255, 0.2);
  --gold-light: #5856d6;
  --silver: #8e8e93;
  --fire-red: #ff3b30;
  --accent-blue: #007aff;
  --accent-purple: #af52de;
  --accent-cyan: #32ade6;
  --accent-green: #34c759;
  --accent-red:       #ff3b30;
  --accent-orange: #ff9500;
}

/* ── Additional premium themes ──────────────────────────────────────────────
   Each sets the full variable set. Partial themes inherit :root's dark accents,
   which is what made the light ones unreadable (see retro-blue above). Body text
   is kept at or above 7:1 against --bg-base, and accents at or above 4.5:1. */

/* "Meridian" — deep navy with brass. Warm accent on a cool base for long sessions. */
body[data-theme="meridian"] {
  --bg-base:          #0b1220;
  --bg-surface:       #121b2d;
  --bg-elevated:      #1a2540;

  --glass-bg:         rgba(255, 255, 255, 0.04);
  --glass-border:     rgba(197, 160, 89, 0.18);
  --glass-hover:      rgba(255, 255, 255, 0.07);

  --gold:             #c5a059;
  --gold-dim:         rgba(197, 160, 89, 0.15);
  --gold-glow:        rgba(197, 160, 89, 0.35);
  --gold-light:       #dcbe7e;

  --silver:           #93a4c3;
  --fire-red:         #c5a059;

  --text-primary:     #eaf0fb;
  --text-secondary:   #a9bad8;
  --text-muted:       #6c7f9f;

  --accent-blue:      #5b9dff;
  --accent-purple:    #a78bfa;
  --accent-cyan:      #4fd1c5;
  --accent-green:     #4ade80;
  --accent-red:       #f87171;
  --accent-orange:    #fbbf24;
}

/* "Sandstone" — warm light. The counterpart to the cool Zenith/Silver light themes. */
body[data-theme="sandstone"] {
  --bg-base:          #f5f1ea;
  --bg-surface:       #fffdf9;
  --bg-elevated:      #ebe4d8;

  --glass-bg:         #fffdf9;
  --glass-border:     #ddd3c2;
  --glass-hover:      #f0ebe1;

  --gold:             #a4622a;
  --gold-dim:         rgba(164, 98, 42, 0.12);
  --gold-glow:        rgba(164, 98, 42, 0.28);
  --gold-light:       #c07c3f;

  --silver:           #6b6255;
  --fire-red:         #b3402c;

  --text-primary:     #2b2419;
  --text-secondary:   #574c3c;
  --text-muted:       #857a68;

  --accent-blue:      #1f6f8b;
  --accent-purple:    #7a4fa3;
  --accent-cyan:      #16798a;
  --accent-green:     #4a7c31;
  --accent-red:       #b3402c;
  --accent-orange:    #a4622a;
}

/* "Nordic" — cool desaturated dark. Low chroma for people who find coral/gold noisy. */
body[data-theme="nordic"] {
  --bg-base:          #2e3440;
  --bg-surface:       #3b4252;
  --bg-elevated:      #434c5e;

  --glass-bg:         rgba(255, 255, 255, 0.04);
  --glass-border:     rgba(216, 222, 233, 0.14);
  --glass-hover:      rgba(255, 255, 255, 0.08);

  --gold:             #88c0d0;
  --gold-dim:         rgba(136, 192, 208, 0.15);
  --gold-glow:        rgba(136, 192, 208, 0.3);
  --gold-light:       #8fbcbb;

  --silver:           #d8dee9;
  --fire-red:         #bf616a;

  --text-primary:     #eceff4;
  --text-secondary:   #d8dee9;
  --text-muted:       #9aa5b8;

  --accent-blue:      #81a1c1;
  --accent-purple:    #b48ead;
  --accent-cyan:      #8fbcbb;
  --accent-green:     #a3be8c;
  --accent-red:       #bf616a;
  --accent-orange:    #d08770;
}

/* "Vellum" — high-contrast near-monochrome. Deliberately quiet: the only colour is
   in status accents, so the workflow graph carries the visual weight. */
body[data-theme="vellum"] {
  --bg-base:          #16161a;
  --bg-surface:       #1e1e23;
  --bg-elevated:      #26262c;

  --glass-bg:         rgba(255, 255, 255, 0.03);
  --glass-border:     rgba(255, 255, 255, 0.12);
  --glass-hover:      rgba(255, 255, 255, 0.06);

  --gold:             #e8e6e3;
  --gold-dim:         rgba(232, 230, 227, 0.1);
  --gold-glow:        rgba(232, 230, 227, 0.25);
  --gold-light:       #ffffff;

  --silver:           #a8a5a0;
  --fire-red:         #e06c75;

  --text-primary:     #f5f3f0;
  --text-secondary:   #c4c1bc;
  --text-muted:       #8a8781;

  --accent-blue:      #7aa2f7;
  --accent-purple:    #bb9af7;
  --accent-cyan:      #7dcfff;
  --accent-green:     #9ece6a;
  --accent-red:       #f7768e;
  --accent-orange:    #e0af68;
}

body[data-theme="8-bit-pixel"] {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  --bg-base: #0c0f0c;
  --bg-surface: #141a14;
  --bg-elevated: #1b241b;
  --glass-bg: rgba(20, 26, 20, 0.9);
  --glass-border: rgba(51, 204, 51, 0.25);
  --glass-hover: rgba(51, 204, 51, 0.1);
  --text-primary: #5ce65c;
  --text-secondary: #47b347;
  --text-muted: #2e7a2e;
  --gold: #5ce65c;
}
body[data-theme="8-bit-pixel"] .glass-card {
  border: 1px solid rgba(51, 204, 51, 0.3);
  box-shadow: 2px 2px 0px rgba(0, 85, 0, 0.4);
  background: #101410;
}
body[data-theme="8-bit-pixel"] .btn { font-family: 'Press Start 2P', monospace; font-size: 0.7rem; border-radius: 0; border: 1px solid rgba(51, 204, 51, 0.5); }

body[data-theme="32-bit-pixel"] {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  --bg-base: #222426;
  --bg-surface: #2f3235;
  --bg-elevated: #3b3f42;
  --glass-bg: rgba(47, 50, 53, 0.9);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --text-primary: #d1d7db;
  --text-secondary: #cc7832;
  --text-muted: #808890;
  --gold: #cc7832;
}
body[data-theme="32-bit-pixel"] .glass-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #2f3235;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body[data-theme="32-bit-pixel"] .btn { font-family: 'VT323', monospace; font-size: 1.2rem; border-radius: 2px; }

body[data-theme="retro-blue"] {
  /* --bg-base was #1e4bb8, a mid-blue, while --text-primary stayed near-black. The shell (sidebar,
     top bar, page background) is painted with --bg-base, so most of the interface was #1a1a1a text
     on mid-blue — around 2.5:1, well under the 4.5:1 minimum and the reason this theme looked
     broken. Lightened to a pale steel blue that keeps the period feel and clears 10:1 against the
     same text colour; the strong blue survives where it belongs, on card headers below. */
  --bg-base: #b6c8e4;
  --bg-surface: #ece9d8;
  --bg-elevated: #ffffff;
  --glass-bg: #ece9d8;
  --glass-border: #003399;
  --glass-hover: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #003399;
  --text-muted: #5e5e5e;
  --gold: #00a12d;
  /* A light surface with accent-less defaults: without these it inherited :root's dark-theme
     accents, and #32d74b / #ff9f0a on #ece9d8 beige is close to unreadable. */
  --gold-dim:         rgba(0, 161, 45, 0.15);
  --gold-glow:        rgba(0, 161, 45, 0.3);
  --gold-light:       #33b85c;
  --silver:           #4a5568;
  --fire-red:         #c22b1f;
  --accent-blue:      #0055e5;
  --accent-purple:    #7a1fa2;
  --accent-cyan:      #00707f;
  --accent-green:     #1a7f30;
  --accent-red:       #c22b1f;
  --accent-orange:    #a35400;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 3px;
}
body[data-theme="retro-blue"] .glass-card { background: #ece9d8; border: 1px solid #0055e5; border-radius: 3px; }
body[data-theme="retro-blue"] .glass-card-header { background: linear-gradient(to bottom, #0058e6 0%, #3a93ff 100%); color: white; border-bottom: none; }
body[data-theme="retro-blue"] .glass-card-title { color: white !important; font-weight: bold; }

body[data-theme="aero"] {
  --bg-base: #0f1724;
  --bg-surface: rgba(30, 41, 59, 0.85);
  --bg-elevated: #1e293b;
  --glass-bg: rgba(30, 41, 59, 0.85);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-hover: rgba(255, 255, 255, 0.1);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --gold: #38bdf8;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}
body[data-theme="aero"] .glass-card {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
}

body[data-theme="space-gray"],
body[data-theme="dusk"] {
  --bg-base: #141415;
  --bg-surface: #1e1e20;
  --bg-elevated: #28282a;
  --glass-bg: rgba(30, 30, 32, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted: #6e6e73;
  --gold: #0a84ff;
  --gold-dim: rgba(10, 132, 255, 0.15);
  --gold-glow: rgba(10, 132, 255, 0.35);
  --gold-light: #5ac8fa;
  --radius-md: 10px;
}
body[data-theme="space-gray"] .glass-card,
body[data-theme="dusk"] .glass-card {
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

body[data-theme="ember"] {
  font-family: 'Ubuntu', 'Inter', sans-serif;
  --bg-base: #1e141d;
  --bg-surface: #281e28;
  --bg-elevated: #332834;
  --glass-bg: rgba(40, 30, 40, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #ffffff;
  --text-secondary: #dcd6db;
  --text-muted: #8b8089;
  --gold: #e95420;
  --gold-dim: rgba(233, 84, 32, 0.15);
  --gold-glow: rgba(233, 84, 32, 0.35);
  --gold-light: #f37746;
}
body[data-theme="ember"] .glass-card {
  background: rgba(40, 30, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
body[data-theme="ember"] .glass-card-header {
  background: #300a24;
  color: white;
  border-bottom: 2px solid #e95420;
}
body[data-theme="ember"] .glass-card-title {
  color: white !important;
}

body[data-theme="mint"] {
  --bg-base: #242824;
  --bg-surface: #2f342f;
  --bg-elevated: #3b403b;
  --glass-bg: rgba(47, 52, 47, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f2f0;
  --text-secondary: #9ebb76;
  --text-muted: #788574;
  --gold: #87a556;
  --radius-md: 6px;
}
body[data-theme="mint"] .glass-card {
  background: rgba(47, 52, 47, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid #87a556;
  border-radius: 6px;
}