/* ============================================================================
   PP Engines Admin Console tokens — extracted from engines/admin-console
   (groupe-brain, public/styles.css). Light/warm platform-site skin, distinct
   from the dark neon theme used by the MRCL MAKE module itself.
   ========================================================================== */
:root {
  --pp-ink: #050607;
  --pp-canvas: #0b0c0e;
  --pp-admin-canvas: #f5f4ee;
  --pp-admin-sheet: #ffffff;
  --pp-admin-inset: #efede5;
  --pp-admin-navy: #0e1b34;
  --pp-admin-hairline: rgba(5, 6, 7, 0.08);
  --pp-admin-quiet: rgba(5, 6, 7, 0.14);
  --pp-admin-secondary: rgba(5, 6, 7, 0.72);
  --pp-admin-tertiary: rgba(5, 6, 7, 0.55);
  --pp-admin-muted: rgba(5, 6, 7, 0.38);

  --pp-charge: #f3ff57;
  --pp-cyan: #5ee9cb;
  --pp-violet: #6149ff;
  --pp-pink: #de7bff;
  --pp-coral: #ff6449;
  --pp-amber: #fbae40;
  --pp-sealed: #c54a3c;
  --pp-success: #3ddc97;

  --pp-r-sm: 14px;
  --pp-r-md: 20px;
  --pp-r-lg: 24px;
  --pp-r-xl: 28px;
  --pp-r-pill: 9999px;

  --pp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --pp-serif: "DM Serif Display", Georgia, serif;
  --pp-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pp-cond: "Barlow Condensed", "Barlow", sans-serif;

  --pp-shadow-sm: 0 8px 24px rgba(5, 6, 7, 0.06);
  --pp-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 60px rgba(5, 6, 7, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(135deg, #fbe8e0 0%, #f4f1ea 38%, #e8f4f2 100%);
  color: var(--pp-ink);
  font-family: var(--pp-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.glass {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: var(--pp-shadow-glass);
  backdrop-filter: blur(24px);
  border-radius: var(--pp-r-xl);
}

.mrcl-make-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.mrcl-make-plaque img {
  display: block;
  width: 100%;
  height: auto;
}

.eyebrow {
  font-family: var(--pp-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--pp-admin-muted);
}

h1.display, h2.display {
  font-family: var(--pp-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}

.runtime-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-admin-navy);
  color: #f5f5f3;
  font-family: var(--pp-cond);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  box-shadow: 0 12px 30px rgba(8, 15, 40, 0.2);
  white-space: nowrap;
}
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--pp-cyan); box-shadow: 0 0 0 4px rgba(94, 233, 203, 0.22); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--pp-r-pill);
  cursor: pointer; font-weight: 700; font-family: var(--pp-body);
  transition: transform .2s ease, background .2s ease;
  text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--pp-admin-navy); color: #fff; }
.button-pill { border: 1px solid var(--pp-admin-hairline); background: rgba(255,255,255,.72); color: var(--pp-ink); }

.card {
  background: var(--pp-admin-sheet);
  border: 1px solid var(--pp-admin-hairline);
  box-shadow: var(--pp-shadow-sm);
  border-radius: var(--pp-r-lg);
  padding: 22px;
}

.metric-card { position: relative; overflow: hidden; }
.metric-card::after {
  content: ""; position: absolute; inset: auto -20% -26% auto; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  pointer-events: none;
}
.metric-card strong { display: block; margin-top: 10px; font-family: var(--pp-serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; }
.metric-card p { position: relative; z-index: 1; margin: 10px 0 0; font-size: .92rem; color: var(--pp-admin-secondary); }
.tone-info { background: rgba(94, 233, 203, 0.1); }
.tone-warning { background: rgba(251, 174, 64, 0.14); }
.tone-critical { background: rgba(255, 100, 73, 0.1); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
  border-radius: var(--pp-r-pill); border: 1px solid var(--pp-admin-hairline);
  font-family: var(--pp-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 11px; color: var(--pp-admin-secondary); background: rgba(255,255,255,.6);
}
.chip.tone-info { color: #0e7c68; border-color: rgba(94,233,203,.4); }
.chip.tone-warning { color: #8a5a00; border-color: rgba(251,174,64,.5); }
.chip.tone-critical { color: #a3341f; border-color: rgba(255,100,73,.4); }

.mono { font-family: var(--pp-mono); }
.hairline { height: 1px; background: var(--pp-admin-hairline); border: 0; }