/* `.help-page` rejoint le systeme (centre d'aide, 2026-08-03) : meme socle
   de jetons que le Wiki et le catalogue, aucune seconde identite a
   maintenir. Les ecarts propres au centre d'aide vivent dans
   css/help-center.css. */
:where(.wiki-page, .brainrot-detail-page, .brainrots-page, .help-page) {
  --kui-bg: #0d0f1a;
  --kui-panel: #13172a;
  --kui-panel-raised: #171d35;
  --kui-panel-soft: #101629;
  --kui-line: rgba(118, 146, 255, .24);
  --kui-line-soft: rgba(255, 255, 255, .1);
  --kui-text: #f4f7ff;
  --kui-muted: #a9b2c9;
  --kui-subtle: #7f8aa8;
  --kui-green: #6ee85c;
  --kui-green-soft: rgba(110, 232, 92, .12);
  --kui-purple: #7750f8;
  --kui-purple-soft: rgba(119, 80, 248, .16);
  --kui-warning: #ffbd59;
  --kui-danger: #ff6b7d;
  --kui-radius-sm: 10px;
  --kui-radius: 14px;
  --kui-radius-lg: 18px;
  --kui-shadow: 0 18px 38px rgba(7, 11, 29, .34);
  --kui-focus: 0 0 0 3px rgba(110, 232, 92, .28);
}

.kui-panel {
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius-lg);
  color: var(--kui-text);
  background: var(--kui-panel);
  box-shadow: var(--kui-shadow);
}

.kui-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kui-kpi {
  min-width: 0;
  border: 1px solid var(--kui-line-soft);
  border-radius: var(--kui-radius);
  padding: 15px 16px;
  color: var(--kui-text);
  background: var(--kui-panel-soft);
}

.kui-kpi > span {
  display: block;
  margin-bottom: 6px;
  color: var(--kui-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.kui-kpi > strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--kui-text);
  font-size: 1.15rem;
  line-height: 1.2;
}

.kui-kpi.is-missing > strong { color: var(--kui-muted); font-size: .95rem; }

.kui-empty,
.kui-error,
.kui-warning {
  display: grid;
  gap: 5px;
  border: 1px dashed var(--kui-line);
  border-radius: var(--kui-radius);
  padding: 16px;
  color: var(--kui-muted);
  background: rgba(255, 255, 255, .025);
}

.kui-empty strong,
.kui-error strong,
.kui-warning strong { color: var(--kui-text); }
.kui-error { border-color: rgba(255, 107, 125, .45); }
.kui-warning { border-style: solid; border-color: rgba(255, 189, 89, .42); }

.kui-control {
  min-height: 44px;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius-sm);
  padding: 0 13px;
  color: var(--kui-text);
  background: #111827;
}

.kui-control:hover { border-color: rgba(118, 146, 255, .48); }
.kui-control:focus-visible { outline: 0; border-color: var(--kui-green); box-shadow: var(--kui-focus); }
.kui-control:disabled { color: #8d96ad; border-color: rgba(255, 255, 255, .08); background: #171b29; cursor: not-allowed; }

.kui-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(118, 146, 255, .32);
  border-radius: 999px;
  padding: 6px 11px;
  color: #e8ecff;
  background: rgba(119, 80, 248, .14);
  font-weight: 800;
}

.kui-chip:hover { color: #fff; border-color: rgba(110, 232, 92, .55); background: rgba(110, 232, 92, .11); }
.kui-chip:focus-visible { outline: 0; box-shadow: var(--kui-focus); }
.kui-chip.is-selected { color: #0d0f1a; border-color: var(--kui-green); background: var(--kui-green); }
.kui-chip:disabled,
.kui-chip[aria-disabled="true"] { color: #9099af; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); cursor: not-allowed; }

@media (max-width: 820px) {
  .kui-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .kui-kpi-grid { grid-template-columns: 1fr; }
}