:root {
  color-scheme: light;
  --pepe-navy-950: #091426;
  --pepe-navy-900: #101f3d;
  --pepe-navy-800: #172b50;
  --pepe-navy-700: #243e6b;
  --pepe-navy-600: #345384;
  --pepe-orange-700: #b84a08;
  --pepe-orange-600: #d85b0b;
  --pepe-orange-500: #f06a18;
  --pepe-orange-100: #fff0e5;
  --pepe-orange-050: #fff8f3;
  --pepe-neutral-1000: #fff;
  --pepe-neutral-050: #f8f9fb;
  --pepe-neutral-100: #f1f3f6;
  --pepe-neutral-200: #e3e7ed;
  --pepe-neutral-300: #cdd3dd;
  --pepe-neutral-500: #778196;
  --pepe-neutral-700: #465269;
  --pepe-neutral-900: #1d293d;
  --pepe-blue-700: #2457a6;
  --pepe-blue-100: #eaf2ff;
  --pepe-red-700: #b42318;
  --pepe-red-100: #feeceb;
  --pepe-black-1000: #000;
  --pepe-surface-canvas: var(--pepe-neutral-050);
  --pepe-surface-primary: var(--pepe-neutral-1000);
  --pepe-surface-secondary: var(--pepe-neutral-100);
  --pepe-surface-nav: var(--pepe-navy-950);
  --pepe-surface-action: var(--pepe-orange-600);
  --pepe-surface-action-subtle: var(--pepe-orange-050);
  --pepe-surface-info: var(--pepe-blue-100);
  --pepe-surface-critical: var(--pepe-red-100);
  --pepe-text-primary: var(--pepe-neutral-900);
  --pepe-text-secondary: var(--pepe-neutral-700);
  --pepe-text-inverse: var(--pepe-neutral-1000);
  --pepe-text-action: var(--pepe-orange-700);
  --pepe-text-information: var(--pepe-blue-700);
  --pepe-text-critical: var(--pepe-red-700);
  --pepe-border-subtle: var(--pepe-neutral-200);
  --pepe-border-default: var(--pepe-neutral-300);
  --pepe-border-action: var(--pepe-orange-600);
  --pepe-border-focus: var(--pepe-blue-700);
  --pepe-border-critical: var(--pepe-red-700);
  --pepe-icon-primary: var(--pepe-navy-900);
  --pepe-icon-secondary: var(--pepe-neutral-500);
  --pepe-icon-action: var(--pepe-orange-600);
  --pepe-space-0: 0;
  --pepe-space-1: 4px;
  --pepe-space-2: 8px;
  --pepe-space-3: 12px;
  --pepe-space-4: 16px;
  --pepe-space-5: 20px;
  --pepe-space-6: 24px;
  --pepe-space-8: 32px;
  --pepe-space-10: 40px;
  --pepe-space-12: 48px;
  --pepe-space-16: 64px;
  --pepe-radius-sm: 6px;
  --pepe-radius-md: 10px;
  --pepe-radius-lg: 16px;
  --pepe-radius-xl: 24px;
  --pepe-radius-full: 999px;
  --pepe-control-sm: 36px;
  --pepe-control-md: 44px;
  --pepe-control-lg: 52px;
  --pepe-touch-min: 44px;
  --pepe-stroke-default: 1px;
  --pepe-opacity-disabled: .45;
  --pepe-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pepe-font-size-label: 12px;
  --pepe-font-size-body-sm: 14px;
  --pepe-font-size-body: 16px;
  --pepe-font-size-title-sm: 20px;
  --pepe-font-size-title: 28px;
  --pepe-font-size-display: 44px;
  --pepe-line-height-body-sm: 20px;
  --pepe-line-height-body: 24px;
  --pepe-line-height-title-sm: 28px;
  --pepe-line-height-title: 36px;
  --pepe-line-height-display: 52px;
  --pepe-shadow-card: 0 8px 24px rgba(9, 20, 38, .06);
  --pepe-shadow-overlay: 0 18px 55px rgba(9, 20, 38, .16);
  --pepe-content-max: 1200px;
  --pepe-nav-width: 264px;
  font-family: var(--pepe-font-sans);
}

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--pepe-surface-canvas); color: var(--pepe-text-primary); }
button, input, select, textarea { min-height: var(--pepe-touch-min); font: inherit; }
button { min-width: var(--pepe-touch-min); }
.sidebar a, .brand-link, .feature-controls a { display: inline-flex; min-width: var(--pepe-touch-min); min-height: var(--pepe-touch-min); align-items: center; }
a, button, input, select, textarea, summary { scroll-margin: 8px; }
:focus-visible { outline: 2px solid var(--pepe-border-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.app-shell { grid-template-columns: var(--pepe-nav-width) minmax(0, 1fr); }
.sidebar { background: var(--pepe-surface-nav); }
.brand-mark { background: var(--pepe-surface-action); color: var(--pepe-text-inverse); }
.eyebrow { color: var(--pepe-text-action); }
.primary, form button { background: var(--pepe-surface-action); border-color: var(--pepe-border-action); color: var(--pepe-text-inverse); }
.primary:hover, form button:hover { background: var(--pepe-orange-700); }
.secondary { background: var(--pepe-surface-primary); border-color: var(--pepe-border-default); color: var(--pepe-text-primary); }
.app-shell > main { max-width: var(--pepe-content-max); }
.pepe-page-header { max-width: none; margin: 0; padding: 28px clamp(20px, 4vw, 64px); background: var(--pepe-surface-nav); color: var(--pepe-text-inverse); }
.pepe-page-header .eyebrow { color: var(--pepe-orange-500); }
.pepe-page-header .muted { color: var(--pepe-neutral-300); }
.pepe-page-header nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pepe-page-header nav a, .pepe-page-header nav button { min-height: 44px; border: 1px solid rgba(255,255,255,.26); border-radius: var(--pepe-radius-md); background: transparent; color: var(--pepe-text-inverse); padding: 10px 14px; text-decoration: none; }
.pepe-page-header nav .primary { background: var(--pepe-surface-action); border-color: var(--pepe-border-action); }

.pepe-nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--pepe-radius-md);
  background: transparent;
  color: var(--pepe-text-inverse);
  cursor: pointer;
}

.system-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--pepe-border-subtle);
  border-radius: var(--pepe-radius-lg);
  background: var(--pepe-surface-primary);
  color: var(--pepe-text-secondary);
}
.system-state[hidden], .system-state:empty { display: none; }
.system-state__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pepe-surface-secondary); color: var(--pepe-text-primary); font-size: 12px; font-weight: 700; }
.system-state__content { min-width: 0; }
.system-state__title { margin: 0; color: var(--pepe-text-primary); font-size: 16px; font-weight: 600; line-height: 24px; }
.system-state__message { margin: 2px 0 0; color: var(--pepe-text-secondary); font-size: 14px; line-height: 20px; }
.system-state--loading .system-state__icon { background: var(--pepe-surface-info); color: var(--pepe-text-information); }
.system-state--empty .system-state__icon, .system-state--success .system-state__icon { background: var(--pepe-surface-secondary); color: var(--pepe-navy-700); }
.system-state--unavailable { background: var(--pepe-surface-action-subtle); border-color: var(--pepe-orange-100); }
.system-state--unavailable .system-state__icon { background: var(--pepe-orange-100); color: var(--pepe-text-action); }
.system-state--error { background: var(--pepe-surface-critical); border-color: var(--pepe-border-critical); color: var(--pepe-text-critical); }
.system-state--error .system-state__icon { background: var(--pepe-red-700); color: var(--pepe-text-inverse); }

@media (max-width: 1024px) and (min-width: 721px) {
  :root { --pepe-nav-width: 220px; }
  .app-shell > main { padding-inline: 28px; }
  .sidebar { padding-inline: 14px; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; min-height: 72px; padding: 14px 16px; flex-flow: row wrap; align-items: center; box-shadow: 0 1px 0 rgba(255,255,255,.12); }
  .sidebar .brand { padding: 0; }
  .pepe-nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .sidebar .views, .sidebar .page-links, .sidebar .sidebar-footer { display: none; width: 100%; }
  .sidebar[data-nav-open="true"] .views, .sidebar[data-nav-open="true"] .page-links { display: grid; margin-top: 12px; }
  .sidebar[data-nav-open="true"] .sidebar-footer { display: flex; margin: 12px 0 0; padding-top: 12px; }
  .app-shell > main { padding: 24px 16px 40px; }
  .topbar { align-items: flex-start; }
  .system-state { padding: 14px; }
  .pepe-page-header { display: block; padding: 22px 16px; }
  .pepe-page-header nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .pepe-page-header nav a, .pepe-page-header nav button { flex: 0 0 auto; white-space: nowrap; }
}