@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/**
 * PiHub Universal Design System
 *
 * One palette for the whole suite, taken from PiSky (slate + sky).
 * - Tokens: colour, type, spacing, shape (dark default, designed light theme)
 * - Shell: shared header, container, buttons, inputs, panels, menus, sheets
 * - Fluid layout: phone, Pi 7" (800x480), tablet, desktop, TV
 * - .pi-app polish layer and light-theme bridge for Tailwind-built pages
 *
 * Accent and status colours are also exposed as "r g b" channels
 * (--pi-a-*, --pi-ok-*, --pi-warn-*, --pi-bad-*). /static/js/pi-ui.js maps
 * Tailwind's colour families onto them, so one accent drives every app.
 */

:root {
  /* ── Colour: dark (default) ─────────────────────────────── */
  --pi-bg: #020617;
  --pi-bg-2: #0B1222;
  --pi-panel: #0F172A;
  --pi-raised: #1E293B;
  --pi-border: #1E293B;
  --pi-border-strong: #334155;
  --pi-text: #F1F5F9;
  --pi-muted: #94A3B8;
  --pi-dim: #64748B;
  --pi-accent: #0EA5E9;
  --pi-accent-hover: #38BDF8;
  --pi-accent-text: #38BDF8;
  --pi-on-accent: #020617;
  --pi-accent-soft: rgba(14, 165, 233, 0.12);
  --pi-success: #34D399;
  --pi-warning: #FBBF24;
  --pi-danger: #FB7185;
  --pi-info: var(--pi-accent);
  --pi-hover: rgba(148, 163, 184, 0.08);
  --pi-scrim: rgba(2, 6, 23, 0.7);
  --pi-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);

  /* Accent ramp (sky) as RGB channels — light values below */
  --pi-a-50: 240 249 255;  --pi-a-100: 224 242 254; --pi-a-200: 186 230 253;
  --pi-a-300: 125 211 252; --pi-a-400: 56 189 248;  --pi-a-500: 14 165 233;
  --pi-a-600: 14 165 233;  --pi-a-700: 2 132 199;   --pi-a-800: 7 89 133;
  --pi-a-900: 12 74 110;   --pi-a-950: 8 47 73;
  /* Status ramps: success (emerald), warning (amber), danger (rose) */
  --pi-ok-50: 236 253 245; --pi-ok-100: 209 250 229; --pi-ok-200: 167 243 208;
  --pi-ok-300: 110 231 183; --pi-ok-400: 52 211 153; --pi-ok-500: 16 185 129;
  --pi-ok-600: 5 150 105;  --pi-ok-700: 4 120 87;   --pi-ok-800: 6 95 70;
  --pi-ok-900: 6 78 59;    --pi-ok-950: 2 44 34;
  --pi-warn-50: 255 251 235; --pi-warn-100: 254 243 199; --pi-warn-200: 253 230 138;
  --pi-warn-300: 252 211 77; --pi-warn-400: 251 191 36; --pi-warn-500: 245 158 11;
  --pi-warn-600: 217 119 6;  --pi-warn-700: 180 83 9;   --pi-warn-800: 146 64 14;
  --pi-warn-900: 120 53 15;  --pi-warn-950: 69 26 3;
  --pi-bad-50: 255 241 242; --pi-bad-100: 255 228 230; --pi-bad-200: 254 205 211;
  --pi-bad-300: 253 164 175; --pi-bad-400: 251 113 133; --pi-bad-500: 244 63 94;
  --pi-bad-600: 225 29 72;  --pi-bad-700: 190 18 60;   --pi-bad-800: 159 18 57;
  --pi-bad-900: 136 19 55;  --pi-bad-950: 76 5 25;

  /* ── Type ───────────────────────────────────────────────── */
  --pi-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pi-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pi-fs-xs: 12px;
  --pi-fs-sm: clamp(12.5px, 0.74rem + 0.1vw, 13.5px);
  --pi-fs-base: clamp(14px, 0.84rem + 0.15vw, 15px);
  --pi-fs-lg: clamp(15.5px, 0.92rem + 0.3vw, 18px);
  --pi-fs-xl: clamp(18px, 1rem + 0.6vw, 22px);
  --pi-fs-2xl: clamp(22px, 1.15rem + 1.1vw, 30px);

  /* ── Layout & shape ─────────────────────────────────────── */
  --pi-max: 1280px;
  --pi-gutter: clamp(16px, 3.2vw, 40px);
  --pi-gap: clamp(12px, 1.6vw, 20px);
  --pi-header-h: 52px;
  --pihub-nav-h: var(--pi-header-h);
  --pi-btn-h: 36px;
  --pi-btn-h-sm: 32px;
  --pi-input-h: 40px;
  --pi-radius-sm: 8px;
  --pi-radius: 8px;
  --pi-radius-panel: 12px;
  --pi-radius-lg: 14px;
  --app-height: 100dvh;
  --vh: 1dvh;

  /* Safe area */
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(0px, env(safe-area-inset-left));
  --safe-right: max(0px, env(safe-area-inset-right));

  /* ── Legacy aliases (older pages and arcade) ────────────── */
  --pi-bg-secondary: var(--pi-bg-2);
  --pi-surface: var(--pi-panel);
  --pi-surface-card: var(--pi-panel);
  --pi-surface-dock: var(--pi-panel);
  --pi-surface-hover: var(--pi-hover);
  --pi-text-muted: var(--pi-muted);
  --pi-text-dim: var(--pi-dim);
  --pi-specular: transparent;
  --pi-shadow: none;
  --pi-glass-blur: blur(12px);
  --pi-glass-blur-sm: none;
  --pi-cyan: var(--pi-accent);
  --pi-cyan-glow: transparent;
  --pi-indigo: var(--pi-accent);
  --pi-emerald: var(--pi-success);
  --pi-amber: var(--pi-warning);
  --pi-rose: var(--pi-danger);
  --font-fluid-sm: var(--pi-fs-sm);
  --font-fluid-base: var(--pi-fs-base);
  --font-fluid-title: var(--pi-fs-2xl);
  color-scheme: dark;
}

/* ── Colour: light (designed, not inverted) ───────────────── */
[data-theme="light"],
html.light {
  --pi-bg: #F8FAFC;
  --pi-bg-2: #F1F5F9;
  --pi-panel: #FFFFFF;
  --pi-raised: #F1F5F9;
  --pi-border: #E2E8F0;
  --pi-border-strong: #CBD5E1;
  --pi-text: #0F172A;
  --pi-muted: #475569;
  --pi-dim: #94A3B8;
  --pi-accent: #0284C7;
  --pi-accent-hover: #0369A1;
  --pi-accent-text: #0369A1;
  --pi-on-accent: #FFFFFF;
  --pi-accent-soft: rgba(2, 132, 199, 0.1);
  --pi-success: #059669;
  --pi-warning: #D97706;
  --pi-danger: #E11D48;
  --pi-hover: rgba(15, 23, 42, 0.05);
  --pi-scrim: rgba(15, 23, 42, 0.4);
  --pi-shadow-pop: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);

  /* Ramps: 50–400 are text tints in dark, so they darken here;
     800–950 are dark fills in dark, so they become pale tints. */
  --pi-a-50: 8 47 73;     --pi-a-100: 12 74 110;  --pi-a-200: 7 89 133;
  --pi-a-300: 3 105 161;  --pi-a-400: 3 105 161;  --pi-a-500: 2 132 199;
  --pi-a-600: 2 132 199;  --pi-a-700: 3 105 161;  --pi-a-800: 186 230 253;
  --pi-a-900: 224 242 254; --pi-a-950: 240 249 255;
  --pi-ok-50: 2 44 34;    --pi-ok-100: 6 78 59;   --pi-ok-200: 6 95 70;
  --pi-ok-300: 4 120 87;  --pi-ok-400: 5 150 105; --pi-ok-500: 5 150 105;
  --pi-ok-600: 5 150 105; --pi-ok-700: 4 120 87;  --pi-ok-800: 167 243 208;
  --pi-ok-900: 209 250 229; --pi-ok-950: 236 253 245;
  --pi-warn-50: 69 26 3;   --pi-warn-100: 120 53 15; --pi-warn-200: 146 64 14;
  --pi-warn-300: 180 83 9; --pi-warn-400: 217 119 6; --pi-warn-500: 217 119 6;
  --pi-warn-600: 217 119 6; --pi-warn-700: 180 83 9; --pi-warn-800: 253 230 138;
  --pi-warn-900: 254 243 199; --pi-warn-950: 255 251 235;
  --pi-bad-50: 76 5 25;    --pi-bad-100: 136 19 55; --pi-bad-200: 159 18 57;
  --pi-bad-300: 190 18 60; --pi-bad-400: 225 29 72; --pi-bad-500: 225 29 72;
  --pi-bad-600: 225 29 72; --pi-bad-700: 190 18 60; --pi-bad-800: 254 205 211;
  --pi-bad-900: 255 228 230; --pi-bad-950: 255 241 242;
  color-scheme: light;
}

/* -------------------------------------------------------------
   BASE
   ------------------------------------------------------------- */
html, body {
  background-color: var(--pi-bg);
  color: var(--pi-text);
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-theme] { background-color: var(--pi-bg); }

body {
  font-family: var(--pi-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";
}

/* TV and large screens: scale the rem-based UI up */
@media (min-width: 1920px) {
  html { font-size: 17px; }
  :root { --pi-max: 1440px; --pi-header-h: 60px; }
}

/* Ambient glow mesh: kept for arcade pages only */
.ambient-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 15% 12%, var(--app-accent-glow, rgba(14, 165, 233, 0.18)) 0%, transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(14, 165, 233, 0.08) 0%, transparent 45%);
}
[data-theme="light"] .ambient-mesh { opacity: 0.5; }

/* -------------------------------------------------------------
   SHELL: HEADER
   The header and the page content share one container:
   the header's first child is the container (the app switcher
   slot is injected into it), sized like .pi-container.
   ------------------------------------------------------------- */
.liquid-glass-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  height: var(--pi-header-h);
  background: color-mix(in srgb, var(--pi-bg) 88%, transparent);
  backdrop-filter: var(--pi-glass-blur);
  -webkit-backdrop-filter: var(--pi-glass-blur);
  border-bottom: 1px solid var(--pi-border);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pi-gutter);
  box-sizing: border-box;
  flex-shrink: 0;
  gap: 8px;
}

.pi-app .liquid-glass-header { padding: 0; }
.pi-app .liquid-glass-header > div:first-child {
  width: 100%;
  max-width: var(--pi-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--pi-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.liquid-glass-dock {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* -------------------------------------------------------------
   CONTROLS
   ------------------------------------------------------------- */
.liquid-glass-btn,
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--pi-btn-h);
  padding: 0 14px;
  border-radius: var(--pi-radius);
  border: 1px solid var(--pi-border-strong);
  background: transparent;
  color: var(--pi-text);
  font: 500 var(--pi-fs-sm)/1 var(--pi-font);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: none;
  touch-action: manipulation;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.liquid-glass-btn:hover,
.pi-btn:hover { background: var(--pi-hover); border-color: var(--pi-border-strong); }
.pi-btn:disabled, .liquid-glass-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pi-btn i, .liquid-glass-btn i { font-size: 0.8125rem; }

.pi-btn-primary {
  background: var(--pi-accent);
  border-color: var(--pi-accent);
  color: var(--pi-on-accent);
  font-weight: 600;
}
.pi-btn-primary:hover { background: var(--pi-accent-hover); border-color: var(--pi-accent-hover); }

.pi-btn-danger { color: var(--pi-danger); border-color: color-mix(in srgb, var(--pi-danger) 40%, transparent); }
.pi-btn-danger:hover { background: color-mix(in srgb, var(--pi-danger) 10%, transparent); }

.pi-btn-ghost { background: transparent; border-color: transparent; color: var(--pi-muted); }
.pi-btn-ghost:hover { color: var(--pi-text); border-color: transparent; }

.pi-btn-sm { height: var(--pi-btn-h-sm); padding: 0 10px; }
.pi-btn-icon { width: var(--pi-btn-h); padding: 0; }
.pi-btn-sm.pi-btn-icon { width: var(--pi-btn-h-sm); }

.liquid-glass-btn-icon {
  width: var(--pi-btn-h-sm);
  height: var(--pi-btn-h-sm);
  padding: 0;
  border-radius: var(--pi-radius);
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--pi-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.liquid-glass-btn-icon:hover { background: var(--pi-hover); color: var(--pi-text); }

.pi-input {
  height: var(--pi-input-h);
  width: 100%;
  padding: 0 12px;
  border-radius: var(--pi-radius);
  border: 1px solid var(--pi-border-strong);
  background: var(--pi-bg-2);
  color: var(--pi-text);
  font: 400 var(--pi-fs-base) var(--pi-font);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pi-input::placeholder { color: var(--pi-dim); }
.pi-input:focus {
  border-color: var(--pi-accent);
  box-shadow: 0 0 0 3px var(--pi-accent-soft);
}

/* Segmented control (tabs). Scrolls in its own box on narrow screens. */
.pi-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-bg-2);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pi-segment::-webkit-scrollbar { display: none; }
.pi-segment > button,
.pi-segment > a {
  height: calc(var(--pi-btn-h-sm) - 4px);
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--pi-muted);
  font: 500 var(--pi-fs-sm)/1 var(--pi-font);
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pi-segment > button:hover { color: var(--pi-text); }
.pi-segment > .active,
.pi-segment > [aria-selected="true"] {
  background: var(--pi-raised);
  color: var(--pi-text);
}
[data-theme="light"] .pi-segment > .active,
[data-theme="light"] .pi-segment > [aria-selected="true"] {
  background: var(--pi-panel);
  box-shadow: 0 0 0 1px var(--pi-border-strong);
}

/* -------------------------------------------------------------
   SURFACES
   Panels: border only, no shadow. Shadows only on menus,
   dialogs and toasts.
   ------------------------------------------------------------- */
.pi-card,
.pi-panel,
.liquid-glass-card {
  background: var(--pi-panel);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-panel);
  box-shadow: none;
  box-sizing: border-box;
}
.liquid-glass-card { padding: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }

.pi-menu,
.pi-pop {
  background: var(--pi-panel);
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius-panel);
  box-shadow: var(--pi-shadow-pop);
}

.pi-section-title {
  font-size: var(--pi-fs-sm);
  font-weight: 600;
  color: var(--pi-muted);
  margin: 0;
}

.pi-badge,
.liquid-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font: 500 var(--pi-fs-xs)/1 var(--pi-font);
  color: var(--pi-muted);
  background: var(--pi-hover);
  border: 1px solid var(--pi-border);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.pi-badge-accent { color: var(--pi-accent-text); background: var(--pi-accent-soft); border-color: transparent; }
.pi-badge-success { color: var(--pi-success); }
.pi-badge-warning { color: var(--pi-warning); }
.pi-badge-danger { color: var(--pi-danger); }

.pi-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
.pi-divider-v { width: 1px; height: 20px; background: var(--pi-border); flex-shrink: 0; }

/* Country code chip (replaces flag emoji, which render as boxes on the Pi) */
.pi-cc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 1.6em;
  padding: 0 0.35em;
  border-radius: 6px;
  background: var(--pi-raised);
  border: 1px solid var(--pi-border);
  color: var(--pi-text);
  font: 600 0.75em/1 var(--pi-font);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Numbers that should line up (prices, times, counts) */
.pi-num { font-variant-numeric: tabular-nums; }
/* Codes only: flight numbers, IATA codes, file hashes */
.pi-code { font-family: var(--pi-font-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Tables and wide bars scroll inside their own box */
.pi-scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------- */
.pi-container {
  width: 100%;
  max-width: var(--pi-max);
  margin-inline: auto;
  padding-inline: var(--pi-gutter);
  box-sizing: border-box;
}

/* Full-bleed apps (media players): header and content span the viewport */
.pi-wide { --pi-max: 100%; }

/* Auto-fill grid: cards keep a sensible width and wrap evenly */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pi-grid-min, 280px)), 1fr));
  gap: var(--pi-gap);
}
.pi-grid.hidden { display: none; }
.universal-grid,
.pihub-grid-adaptive {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pi-grid-min, 280px)), 1fr)) !important;
  gap: var(--pi-gap) !important;
}

/* Brand block inside the header */
.pi-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pi-brand-icon { color: var(--pi-accent); font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.pi-brand-name {
  font-size: var(--pi-fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Header actions: inline on wide screens, an overflow menu on phones.
   Markup: <div class="pi-overflow" data-pi-overflow>
             <button class="pi-overflow-toggle" ...>…</button>
             <div class="pi-overflow-menu"> actions </div>
           </div>
   /static/js/pi-ui.js toggles .is-open. */
.pi-overflow { position: relative; display: inline-flex; align-items: center; }
.pi-overflow-toggle { display: none !important; }
.pi-overflow-menu { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 639px) {
  .pi-overflow-toggle { display: inline-flex !important; }
  .pi-overflow-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    background: var(--pi-panel);
    border: 1px solid var(--pi-border-strong);
    border-radius: var(--pi-radius-panel);
    box-shadow: var(--pi-shadow-pop);
  }
  .pi-overflow.is-open .pi-overflow-menu { display: flex; }
  .pi-overflow-menu > * { justify-content: flex-start !important; width: 100%; }
  .pi-overflow-menu > .pi-btn { border-color: transparent; }
  .pi-overflow-menu .pi-hide-in-menu { display: none !important; }
  .pi-overflow-menu .pi-show-in-menu { display: inline !important; }
}

/* Dialogs: centred card on wide screens, full-height sheet on phones.
   Markup: <div class="pi-dialog-scrim"><div class="pi-dialog">…</div></div> */
.pi-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--pi-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pi-dialog {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--pi-panel);
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius-lg);
  box-shadow: var(--pi-shadow-pop);
  box-sizing: border-box;
}
@media (max-width: 639px) {
  .pi-dialog-scrim { padding: 0; align-items: stretch; }
  .pi-dialog { max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: none; }
}

/* -------------------------------------------------------------
   STARTUP SPLASH (arcade only; apps open straight into content)
   ------------------------------------------------------------- */
.liquid-splash-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--pi-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s ease;
  will-change: opacity, transform;
}
.liquid-splash-backdrop.dismissed {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  pointer-events: none !important;
}
.liquid-splash-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  max-width: 90vw;
}
.liquid-splash-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.45;
  pointer-events: none;
}
.liquid-splash-capsule {
  position: relative;
  z-index: 10;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-border-strong);
  box-shadow: var(--pi-shadow-pop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--pi-text);
  animation: glassAperturePop 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes glassAperturePop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.liquid-splash-meta {
  position: relative;
  z-index: 10;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.liquid-splash-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--pi-text); }
.liquid-splash-sub { font-size: 0.8rem; font-weight: 500; color: var(--pi-muted); }
.liquid-splash-track {
  width: 140px;
  height: 3px;
  background: var(--pi-border);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 12px;
  position: relative;
}
.liquid-splash-shimmer {
  width: 100%;
  height: 100%;
  background: var(--app-accent-gradient, var(--pi-accent));
  animation: liquidShimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes liquidShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* -------------------------------------------------------------
   VIEWPORT BUDGETING & GAME BOARDS
   ------------------------------------------------------------- */
.universal-screen,
.pihub-screen-adaptive {
  height: calc(100dvh - var(--pihub-nav-h)) !important;
  min-height: unset !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

.universal-board,
.pihub-board-adaptive {
  width: min(94vw, calc(100dvh - var(--pihub-nav-h) - 160px), 720px) !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
   DEVICE ADAPTATIONS
   ------------------------------------------------------------- */

/* Raspberry Pi 7" (800x480) and other short screens: compact chrome */
@media (max-height: 560px) {
  :root {
    --pi-header-h: 44px;
    --pi-gap: 10px;
  }
  .liquid-glass-header h1 { font-size: 0.9375rem !important; }
  /* Secondary copy (subtitles, hints) gives way to content on short screens */
  .pi-hide-short { display: none !important; }
  .universal-board,
  .pihub-board-adaptive {
    width: min(90vw, calc(100dvh - var(--pihub-nav-h) - 110px), 340px) !important;
  }
  .liquid-splash-capsule { width: 58px; height: 58px; font-size: 1.8rem; }
  .liquid-splash-title { font-size: 1.15rem; }
}

@media (max-width: 420px) {
  .liquid-glass-header .badge-pill-hide { display: none !important; }
}

@media (min-width: 1440px) {
  .universal-board,
  .pihub-board-adaptive {
    width: min(65vw, calc(100dvh - var(--pihub-nav-h) - 170px), 760px) !important;
  }
}

/* Touch screens: 44px targets */
@media (pointer: coarse) {
  .pi-btn,
  .liquid-glass-btn,
  .pi-input,
  .touch-target { min-height: 44px; }
  .pi-btn-icon,
  .liquid-glass-btn-icon,
  #pihub-nav-slot .pihub-icon-btn { min-width: 44px; min-height: 44px; }
  .pi-segment > button,
  .pi-segment > a { min-height: 40px; }
}

[data-screen="phone"] .desktop-only { display: none !important; }


/* Artwork (card art, media) keeps its own colours in both themes */
[data-theme="light"] .pi-art {
  --pi-a-50: 240 249 255;  --pi-a-100: 224 242 254; --pi-a-200: 186 230 253;
  --pi-a-300: 125 211 252; --pi-a-400: 56 189 248;  --pi-a-500: 14 165 233;
  --pi-a-600: 14 165 233;  --pi-a-700: 2 132 199;   --pi-a-800: 7 89 133;
  --pi-a-900: 12 74 110;   --pi-a-950: 8 47 73;
    --pi-ok-50: 236 253 245; --pi-ok-100: 209 250 229; --pi-ok-200: 167 243 208;
  --pi-ok-300: 110 231 183; --pi-ok-400: 52 211 153; --pi-ok-500: 16 185 129;
  --pi-ok-600: 5 150 105;  --pi-ok-700: 4 120 87;   --pi-ok-800: 6 95 70;
  --pi-ok-900: 6 78 59;    --pi-ok-950: 2 44 34;
  --pi-warn-50: 255 251 235; --pi-warn-100: 254 243 199; --pi-warn-200: 253 230 138;
  --pi-warn-300: 252 211 77; --pi-warn-400: 251 191 36; --pi-warn-500: 245 158 11;
  --pi-warn-600: 217 119 6;  --pi-warn-700: 180 83 9;   --pi-warn-800: 146 64 14;
  --pi-warn-900: 120 53 15;  --pi-warn-950: 69 26 3;
  --pi-bad-50: 255 241 242; --pi-bad-100: 255 228 230; --pi-bad-200: 254 205 211;
  --pi-bad-300: 253 164 175; --pi-bad-400: 251 113 133; --pi-bad-500: 244 63 94;
  --pi-bad-600: 225 29 72;  --pi-bad-700: 190 18 60;   --pi-bad-800: 159 18 57;
  --pi-bad-900: 136 19 55;  --pi-bad-950: 76 5 25;
}
/* =============================================================
   .pi-app POLISH LAYER
   Opt-in via <body class="pi-app">. Normalises the Tailwind in
   app pages so every app reads as one product.
   ============================================================= */

body.pi-app {
  background-color: var(--pi-bg) !important;
  color: var(--pi-text);
  font-family: var(--pi-font) !important;
  font-size: var(--pi-fs-base);
}
.pi-app .font-sans:not(.pi-art, .pi-art *) { font-family: var(--pi-font); }

/* Monospace is for codes only (.pi-code); numbers use tabular Inter */
.pi-app .font-mono:not(.pi-art, .pi-art *) {
  font-family: var(--pi-font) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}
.pi-app .tabular-nums:not(.pi-art, .pi-art *) { font-variant-numeric: tabular-nums; }

/* No splash screens, glows or pulsing dots on apps */
.pi-app .liquid-splash-backdrop:not(.pi-art, .pi-art *),
.pi-app .ambient-mesh:not(.pi-art, .pi-art *) { display: none !important; }
.pi-app .animate-pulse:not(.pi-art, .pi-art *),
.pi-app .animate-ping:not(.pi-art, .pi-art *) { animation: none !important; }
.pi-app .animate-ping:not(.pi-art, .pi-art *) { display: none !important; }
.pi-app [class*="blur-3xl"]:not(.pi-art, .pi-art *),
.pi-app [class*="blur-2xl"]:not(.pi-art, .pi-art *),
.pi-app [class*="rounded-full"][class*=" blur-["]:not(.pi-art, .pi-art *) { display: none !important; }

/* Header typography */
.pi-app .liquid-glass-header h1:not(.pi-art, .pi-art *),
.pi-app .liquid-glass-header .brand-title:not(.pi-art, .pi-art *) {
  font-size: var(--pi-fs-base) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* No uppercase micro labels */
.pi-app .uppercase:not(.pi-art, .pi-art *) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.pi-app :is(.tracking-wider, .tracking-widest, [class*="tracking-[0."]):not(.pi-art, .pi-art *) { letter-spacing: 0 !important; }

/* Legibility floor: nothing below 12px */
.pi-app :is(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[0\.6rem\], .text-\[0\.65rem\], .text-\[0\.7rem\]):not(.pi-art, .pi-art *) {
  font-size: 12px !important;
}

/* Shape: controls 8px, panels 12–14px */
.pi-app :is(.rounded-3xl, .rounded-\[2rem\], .rounded-\[28px\], .rounded-\[24px\]):not(.pi-art, .pi-art *) { border-radius: var(--pi-radius-lg) !important; }
.pi-app .rounded-2xl:not(.pi-art, .pi-art *) { border-radius: var(--pi-radius-panel); }
.pi-app :is(button, a, input, select, textarea).rounded-xl:not(.pi-art, .pi-art *),
.pi-app :is(button, a, input, select, textarea).rounded-2xl:not(.pi-art, .pi-art *) { border-radius: var(--pi-radius); }
.pi-app .rounded-xl:not(.pi-art, .pi-art *) { border-radius: var(--pi-radius-panel); }

/* Panels: border only, no shadow and no blur. Shadows stay on
   menus, dialogs and toasts (fixed/absolute layers). */
.pi-app :is([class*="shadow-"]):not(:is(.fixed, .absolute, [role="dialog"], [role="menu"], .pi-menu, .pi-pop, .pi-dialog)):not(.pi-art, .pi-art *) {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: none !important;
}
.pi-app :is(.fixed, .absolute):not(.pi-art, .pi-art *) :is([class*="shadow-"]) { box-shadow: var(--pi-shadow-pop) !important; }
.pi-app :is([class*="shadow-"][class*="-500/"], [class*="shadow-[0_0"]):not(.pi-art, .pi-art *) { box-shadow: none !important; }
.pi-app :is(.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl):not(:is(.fixed, .sticky, header, nav)):not(.pi-art, .pi-art *) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Gradient fills are decoration: flatten them to the accent (buttons)
   or to a panel (surfaces). Card artwork and media are excluded. */
.pi-app :is(button, a)[class*="bg-gradient-to-"]:not(.pi-art):not(.pi-art, .pi-art *) {
  background-image: none !important;
  background-color: var(--pi-accent) !important;
  color: var(--pi-on-accent) !important;
  border-color: transparent !important;
}
.pi-app :is(button, a)[class*="bg-gradient-to-"]:not(.pi-art):hover:not(.pi-art, .pi-art *) { background-color: var(--pi-accent-hover) !important; }
.pi-app :is(div, section, aside, header, main, span)[class*="bg-gradient-to-"]:not(.pi-art, .pi-art *):not(.pi-art, .pi-art *) {
  background-image: none !important;
}
.pi-app :is(.bg-clip-text, .text-transparent):not(.pi-art *):not(.pi-art, .pi-art *) {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--pi-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Solid accent fills get on-accent text (dark on sky, like PiSky) */
.pi-app :is(
  [class^="bg-sky-500"]:not([class^="bg-sky-500/"]), [class*=" bg-sky-500"]:not([class*=" bg-sky-500/"]),
  [class^="bg-sky-600"]:not([class^="bg-sky-600/"]), [class*=" bg-sky-600"]:not([class*=" bg-sky-600/"]),
  [class^="bg-indigo-500"]:not([class^="bg-indigo-500/"]), [class*=" bg-indigo-500"]:not([class*=" bg-indigo-500/"]),
  [class^="bg-indigo-600"]:not([class^="bg-indigo-600/"]), [class*=" bg-indigo-600"]:not([class*=" bg-indigo-600/"]),
  [class^="bg-violet-500"]:not([class^="bg-violet-500/"]), [class*=" bg-violet-500"]:not([class*=" bg-violet-500/"]),
  [class^="bg-violet-600"]:not([class^="bg-violet-600/"]), [class*=" bg-violet-600"]:not([class*=" bg-violet-600/"]),
  [class^="bg-purple-500"]:not([class^="bg-purple-500/"]), [class*=" bg-purple-500"]:not([class*=" bg-purple-500/"]),
  [class^="bg-purple-600"]:not([class^="bg-purple-600/"]), [class*=" bg-purple-600"]:not([class*=" bg-purple-600/"]),
  [class^="bg-blue-500"]:not([class^="bg-blue-500/"]), [class*=" bg-blue-500"]:not([class*=" bg-blue-500/"]),
  [class^="bg-blue-600"]:not([class^="bg-blue-600/"]), [class*=" bg-blue-600"]:not([class*=" bg-blue-600/"]),
  [class^="bg-cyan-500"]:not([class^="bg-cyan-500/"]), [class*=" bg-cyan-500"]:not([class*=" bg-cyan-500/"]),
  [class^="bg-cyan-600"]:not([class^="bg-cyan-600/"]), [class*=" bg-cyan-600"]:not([class*=" bg-cyan-600/"]),
  [class^="bg-teal-500"]:not([class^="bg-teal-500/"]), [class*=" bg-teal-500"]:not([class*=" bg-teal-500/"]),
  [class^="bg-teal-600"]:not([class^="bg-teal-600/"]), [class*=" bg-teal-600"]:not([class*=" bg-teal-600/"]),
  [class^="bg-fuchsia-500"]:not([class^="bg-fuchsia-500/"]), [class*=" bg-fuchsia-500"]:not([class*=" bg-fuchsia-500/"]),
  [class^="bg-fuchsia-600"]:not([class^="bg-fuchsia-600/"]), [class*=" bg-fuchsia-600"]:not([class*=" bg-fuchsia-600/"]),
  [class^="bg-pink-500"]:not([class^="bg-pink-500/"]), [class*=" bg-pink-500"]:not([class*=" bg-pink-500/"]),
  [class^="bg-pink-600"]:not([class^="bg-pink-600/"]), [class*=" bg-pink-600"]:not([class*=" bg-pink-600/"]),
  [class^="bg-brand-500"]:not([class^="bg-brand-500/"]), [class*=" bg-brand-500"]:not([class*=" bg-brand-500/"]),
  [class^="bg-brand-600"]:not([class^="bg-brand-600/"]), [class*=" bg-brand-600"]:not([class*=" bg-brand-600/"])
):not(.pi-art, .pi-art *) { color: var(--pi-on-accent) !important; }
.pi-app :is(
  [class^="bg-sky-500"]:not([class^="bg-sky-500/"]), [class*=" bg-sky-500"]:not([class*=" bg-sky-500/"]),
  [class^="bg-sky-600"]:not([class^="bg-sky-600/"]), [class*=" bg-sky-600"]:not([class*=" bg-sky-600/"]),
  [class^="bg-indigo-500"]:not([class^="bg-indigo-500/"]), [class*=" bg-indigo-500"]:not([class*=" bg-indigo-500/"]),
  [class^="bg-indigo-600"]:not([class^="bg-indigo-600/"]), [class*=" bg-indigo-600"]:not([class*=" bg-indigo-600/"]),
  [class^="bg-violet-500"]:not([class^="bg-violet-500/"]), [class*=" bg-violet-500"]:not([class*=" bg-violet-500/"]),
  [class^="bg-violet-600"]:not([class^="bg-violet-600/"]), [class*=" bg-violet-600"]:not([class*=" bg-violet-600/"]),
  [class^="bg-purple-500"]:not([class^="bg-purple-500/"]), [class*=" bg-purple-500"]:not([class*=" bg-purple-500/"]),
  [class^="bg-purple-600"]:not([class^="bg-purple-600/"]), [class*=" bg-purple-600"]:not([class*=" bg-purple-600/"]),
  [class^="bg-blue-500"]:not([class^="bg-blue-500/"]), [class*=" bg-blue-500"]:not([class*=" bg-blue-500/"]),
  [class^="bg-blue-600"]:not([class^="bg-blue-600/"]), [class*=" bg-blue-600"]:not([class*=" bg-blue-600/"]),
  [class^="bg-cyan-500"]:not([class^="bg-cyan-500/"]), [class*=" bg-cyan-500"]:not([class*=" bg-cyan-500/"]),
  [class^="bg-cyan-600"]:not([class^="bg-cyan-600/"]), [class*=" bg-cyan-600"]:not([class*=" bg-cyan-600/"]),
  [class^="bg-teal-500"]:not([class^="bg-teal-500/"]), [class*=" bg-teal-500"]:not([class*=" bg-teal-500/"]),
  [class^="bg-teal-600"]:not([class^="bg-teal-600/"]), [class*=" bg-teal-600"]:not([class*=" bg-teal-600/"]),
  [class^="bg-fuchsia-500"]:not([class^="bg-fuchsia-500/"]), [class*=" bg-fuchsia-500"]:not([class*=" bg-fuchsia-500/"]),
  [class^="bg-fuchsia-600"]:not([class^="bg-fuchsia-600/"]), [class*=" bg-fuchsia-600"]:not([class*=" bg-fuchsia-600/"]),
  [class^="bg-pink-500"]:not([class^="bg-pink-500/"]), [class*=" bg-pink-500"]:not([class*=" bg-pink-500/"]),
  [class^="bg-pink-600"]:not([class^="bg-pink-600/"]), [class*=" bg-pink-600"]:not([class*=" bg-pink-600/"]),
  [class^="bg-brand-500"]:not([class^="bg-brand-500/"]), [class*=" bg-brand-500"]:not([class*=" bg-brand-500/"]),
  [class^="bg-brand-600"]:not([class^="bg-brand-600/"]), [class*=" bg-brand-600"]:not([class*=" bg-brand-600/"])
):not(.pi-art, .pi-art *) :is(i, span, svg) { color: inherit !important; }

/* Keyboard focus */
.pi-app :focus-visible:not(.pi-art, .pi-art *) { outline: 2px solid var(--pi-accent); outline-offset: 2px; }
.pi-app :is(input, textarea, select):focus-visible:not(.pi-art, .pi-art *) { outline: none; }
.pi-app :is(input, textarea, select):focus:not(.pi-art, .pi-art *) { border-color: var(--pi-accent) !important; }

.pi-app :not(.pi-art, .pi-art *)::selection { background: color-mix(in srgb, var(--pi-accent) 35%, transparent); }

/* Native selects follow the theme */
.pi-app select option:not(.pi-art, .pi-art *) { background: var(--pi-panel); color: var(--pi-text); }

/* Media and content stay on black in both themes */
.pi-app :is(video, .pi-media):not(.pi-art, .pi-art *) { background: #000; }

@media (prefers-reduced-motion: reduce) {
  .pi-app *, .pi-app *:not(.pi-art, .pi-art *)::before, .pi-app *:not(.pi-art, .pi-art *)::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbars */
.pi-app :not(.pi-art, .pi-art *)::-webkit-scrollbar { width: 8px; height: 8px; }
.pi-app :not(.pi-art, .pi-art *)::-webkit-scrollbar-track { background: transparent; }
.pi-app :not(.pi-art, .pi-art *)::-webkit-scrollbar-thumb { background: var(--pi-border-strong); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }

/* -------------------------------------------------------------
   `xs:` BREAKPOINT (420px) for pages without it in their config
   ------------------------------------------------------------- */
@media (min-width: 420px) {
  html .xs\:inline { display: inline; }
  html .xs\:inline-block { display: inline-block; }
  html .xs\:inline-flex { display: inline-flex; }
  html .xs\:flex { display: flex; }
  html .xs\:block { display: block; }
  html .xs\:w-48 { width: 12rem; }
}

/* -------------------------------------------------------------
   LIGHT-THEME BRIDGE
   Older pages hard-code dark slate utilities (bg-slate-900,
   text-white…). Under data-theme="light" these map to the light
   palette. Accent and status colours need no bridge: they follow
   the --pi-a-*, --pi-ok-*, --pi-warn-*, --pi-bad-* channels.
   ------------------------------------------------------------- */
html[data-theme="light"] .pi-app :is([class^="bg-slate-950"], [class*=" bg-slate-950"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-slate-900"], [class*=" bg-slate-900"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-zinc-950"], [class*=" bg-zinc-950"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-zinc-900"], [class*=" bg-zinc-900"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-gray-950"], [class*=" bg-gray-950"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-gray-900"], [class*=" bg-gray-900"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-[#0"], [class*=" bg-[#0"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-[#1"], [class*=" bg-[#1"]):not(.pi-art, .pi-art *) { background-color: var(--pi-panel); }
html[data-theme="light"] .pi-app :is([class^="bg-slate-800"], [class*=" bg-slate-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-zinc-800"], [class*=" bg-zinc-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-gray-800"], [class*=" bg-gray-800"]):not(.pi-art, .pi-art *) { background-color: var(--pi-raised); }
html[data-theme="light"] .pi-app :is([class^="bg-slate-700"], [class*=" bg-slate-700"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-zinc-700"], [class*=" bg-zinc-700"]):not(.pi-art, .pi-art *) { background-color: #e2e8f0; }
html[data-theme="light"] .pi-app :is([class^="bg-slate-600"], [class*=" bg-slate-600"]):not(.pi-art, .pi-art *) { background-color: #cbd5e1; }
html[data-theme="light"] .pi-app :is([class^="bg-white/"], [class*=" bg-white/"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-black/10"], [class*=" bg-black/10"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-black/20"], [class*=" bg-black/20"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-black/30"], [class*=" bg-black/30"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="bg-black/40"], [class*=" bg-black/40"]):not(.pi-art, .pi-art *) { background-color: rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .pi-app :is([class*="hover:bg-slate-900"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:bg-slate-800"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:bg-zinc-800"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:bg-white/"]:hover):not(.pi-art, .pi-art *) { background-color: #e9edf2; }
html[data-theme="light"] .pi-app :is([class*="hover:bg-slate-700"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:bg-slate-600"]:hover):not(.pi-art, .pi-art *) { background-color: #dde3ea; }
html[data-theme="light"] .pi-app :is([class*="via-slate-9"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="to-slate-9"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="from-slate-9"]):not(.pi-art, .pi-art *) { --tw-gradient-from: #ffffff; --tw-gradient-to: var(--pi-raised); --tw-gradient-stops: #ffffff, #f8fafc, var(--pi-raised); }
html[data-theme="light"] .pi-app :is([class^="border-slate-800"], [class*=" border-slate-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="border-slate-700"], [class*=" border-slate-700"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="border-zinc-800"], [class*=" border-zinc-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="border-gray-800"], [class*=" border-gray-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="border-white/"], [class*=" border-white/"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="border-[#1"], [class*=" border-[#1"]):not(.pi-art, .pi-art *) { border-color: var(--pi-border); }
html[data-theme="light"] .pi-app :is([class^="border-slate-600"], [class*=" border-slate-600"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:border-slate-700"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:border-slate-600"]:hover):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class*="hover:border-white/"]:hover):not(.pi-art, .pi-art *) { border-color: var(--pi-border-strong); }
html[data-theme="light"] .pi-app :is([class^="divide-slate-800"], [class*=" divide-slate-800"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="divide-white/"], [class*=" divide-white/"]):not(.pi-art, .pi-art *) { --tw-divide-opacity: 1; border-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .pi-app :is(.text-white, .text-slate-50, .text-slate-100, .text-zinc-100, .text-gray-100):not(:is([class*="bg-black"], [style*="background"], video, img, [class^="bg-red-4"], [class*=" bg-red-4"], [class^="bg-red-5"], [class*=" bg-red-5"], [class^="bg-red-6"], [class*=" bg-red-6"], [class^="bg-red-7"], [class*=" bg-red-7"], [class^="bg-red-8"], [class*=" bg-red-8"], [class^="bg-orange-4"], [class*=" bg-orange-4"], [class^="bg-orange-5"], [class*=" bg-orange-5"], [class^="bg-orange-6"], [class*=" bg-orange-6"], [class^="bg-orange-7"], [class*=" bg-orange-7"], [class^="bg-orange-8"], [class*=" bg-orange-8"], [class^="bg-amber-4"], [class*=" bg-amber-4"], [class^="bg-amber-5"], [class*=" bg-amber-5"], [class^="bg-amber-6"], [class*=" bg-amber-6"], [class^="bg-amber-7"], [class*=" bg-amber-7"], [class^="bg-amber-8"], [class*=" bg-amber-8"], [class^="bg-yellow-4"], [class*=" bg-yellow-4"], [class^="bg-yellow-5"], [class*=" bg-yellow-5"], [class^="bg-yellow-6"], [class*=" bg-yellow-6"], [class^="bg-yellow-7"], [class*=" bg-yellow-7"], [class^="bg-yellow-8"], [class*=" bg-yellow-8"], [class^="bg-lime-4"], [class*=" bg-lime-4"], [class^="bg-lime-5"], [class*=" bg-lime-5"], [class^="bg-lime-6"], [class*=" bg-lime-6"], [class^="bg-lime-7"], [class*=" bg-lime-7"], [class^="bg-lime-8"], [class*=" bg-lime-8"], [class^="bg-green-4"], [class*=" bg-green-4"], [class^="bg-green-5"], [class*=" bg-green-5"], [class^="bg-green-6"], [class*=" bg-green-6"], [class^="bg-green-7"], [class*=" bg-green-7"], [class^="bg-green-8"], [class*=" bg-green-8"], [class^="bg-emerald-4"], [class*=" bg-emerald-4"], [class^="bg-emerald-5"], [class*=" bg-emerald-5"], [class^="bg-emerald-6"], [class*=" bg-emerald-6"], [class^="bg-emerald-7"], [class*=" bg-emerald-7"], [class^="bg-emerald-8"], [class*=" bg-emerald-8"], [class^="bg-teal-4"], [class*=" bg-teal-4"], [class^="bg-teal-5"], [class*=" bg-teal-5"], [class^="bg-teal-6"], [class*=" bg-teal-6"], [class^="bg-teal-7"], [class*=" bg-teal-7"], [class^="bg-teal-8"], [class*=" bg-teal-8"], [class^="bg-cyan-4"], [class*=" bg-cyan-4"], [class^="bg-cyan-5"], [class*=" bg-cyan-5"], [class^="bg-cyan-6"], [class*=" bg-cyan-6"], [class^="bg-cyan-7"], [class*=" bg-cyan-7"], [class^="bg-cyan-8"], [class*=" bg-cyan-8"], [class^="bg-sky-4"], [class*=" bg-sky-4"], [class^="bg-sky-5"], [class*=" bg-sky-5"], [class^="bg-sky-6"], [class*=" bg-sky-6"], [class^="bg-sky-7"], [class*=" bg-sky-7"], [class^="bg-sky-8"], [class*=" bg-sky-8"], [class^="bg-blue-4"], [class*=" bg-blue-4"], [class^="bg-blue-5"], [class*=" bg-blue-5"], [class^="bg-blue-6"], [class*=" bg-blue-6"], [class^="bg-blue-7"], [class*=" bg-blue-7"], [class^="bg-blue-8"], [class*=" bg-blue-8"], [class^="bg-indigo-4"], [class*=" bg-indigo-4"], [class^="bg-indigo-5"], [class*=" bg-indigo-5"], [class^="bg-indigo-6"], [class*=" bg-indigo-6"], [class^="bg-indigo-7"], [class*=" bg-indigo-7"], [class^="bg-indigo-8"], [class*=" bg-indigo-8"], [class^="bg-violet-4"], [class*=" bg-violet-4"], [class^="bg-violet-5"], [class*=" bg-violet-5"], [class^="bg-violet-6"], [class*=" bg-violet-6"], [class^="bg-violet-7"], [class*=" bg-violet-7"], [class^="bg-violet-8"], [class*=" bg-violet-8"], [class^="bg-purple-4"], [class*=" bg-purple-4"], [class^="bg-purple-5"], [class*=" bg-purple-5"], [class^="bg-purple-6"], [class*=" bg-purple-6"], [class^="bg-purple-7"], [class*=" bg-purple-7"], [class^="bg-purple-8"], [class*=" bg-purple-8"], [class^="bg-fuchsia-4"], [class*=" bg-fuchsia-4"], [class^="bg-fuchsia-5"], [class*=" bg-fuchsia-5"], [class^="bg-fuchsia-6"], [class*=" bg-fuchsia-6"], [class^="bg-fuchsia-7"], [class*=" bg-fuchsia-7"], [class^="bg-fuchsia-8"], [class*=" bg-fuchsia-8"], [class^="bg-pink-4"], [class*=" bg-pink-4"], [class^="bg-pink-5"], [class*=" bg-pink-5"], [class^="bg-pink-6"], [class*=" bg-pink-6"], [class^="bg-pink-7"], [class*=" bg-pink-7"], [class^="bg-pink-8"], [class*=" bg-pink-8"], [class^="bg-rose-4"], [class*=" bg-rose-4"], [class^="bg-rose-5"], [class*=" bg-rose-5"], [class^="bg-rose-6"], [class*=" bg-rose-6"], [class^="bg-rose-7"], [class*=" bg-rose-7"], [class^="bg-rose-8"], [class*=" bg-rose-8"])):not(:is([class*="bg-black"], [style*="background"], video, img, [class^="bg-red-4"], [class*=" bg-red-4"], [class^="bg-red-5"], [class*=" bg-red-5"], [class^="bg-red-6"], [class*=" bg-red-6"], [class^="bg-red-7"], [class*=" bg-red-7"], [class^="bg-red-8"], [class*=" bg-red-8"], [class^="bg-orange-4"], [class*=" bg-orange-4"], [class^="bg-orange-5"], [class*=" bg-orange-5"], [class^="bg-orange-6"], [class*=" bg-orange-6"], [class^="bg-orange-7"], [class*=" bg-orange-7"], [class^="bg-orange-8"], [class*=" bg-orange-8"], [class^="bg-amber-4"], [class*=" bg-amber-4"], [class^="bg-amber-5"], [class*=" bg-amber-5"], [class^="bg-amber-6"], [class*=" bg-amber-6"], [class^="bg-amber-7"], [class*=" bg-amber-7"], [class^="bg-amber-8"], [class*=" bg-amber-8"], [class^="bg-yellow-4"], [class*=" bg-yellow-4"], [class^="bg-yellow-5"], [class*=" bg-yellow-5"], [class^="bg-yellow-6"], [class*=" bg-yellow-6"], [class^="bg-yellow-7"], [class*=" bg-yellow-7"], [class^="bg-yellow-8"], [class*=" bg-yellow-8"], [class^="bg-lime-4"], [class*=" bg-lime-4"], [class^="bg-lime-5"], [class*=" bg-lime-5"], [class^="bg-lime-6"], [class*=" bg-lime-6"], [class^="bg-lime-7"], [class*=" bg-lime-7"], [class^="bg-lime-8"], [class*=" bg-lime-8"], [class^="bg-green-4"], [class*=" bg-green-4"], [class^="bg-green-5"], [class*=" bg-green-5"], [class^="bg-green-6"], [class*=" bg-green-6"], [class^="bg-green-7"], [class*=" bg-green-7"], [class^="bg-green-8"], [class*=" bg-green-8"], [class^="bg-emerald-4"], [class*=" bg-emerald-4"], [class^="bg-emerald-5"], [class*=" bg-emerald-5"], [class^="bg-emerald-6"], [class*=" bg-emerald-6"], [class^="bg-emerald-7"], [class*=" bg-emerald-7"], [class^="bg-emerald-8"], [class*=" bg-emerald-8"], [class^="bg-teal-4"], [class*=" bg-teal-4"], [class^="bg-teal-5"], [class*=" bg-teal-5"], [class^="bg-teal-6"], [class*=" bg-teal-6"], [class^="bg-teal-7"], [class*=" bg-teal-7"], [class^="bg-teal-8"], [class*=" bg-teal-8"], [class^="bg-cyan-4"], [class*=" bg-cyan-4"], [class^="bg-cyan-5"], [class*=" bg-cyan-5"], [class^="bg-cyan-6"], [class*=" bg-cyan-6"], [class^="bg-cyan-7"], [class*=" bg-cyan-7"], [class^="bg-cyan-8"], [class*=" bg-cyan-8"], [class^="bg-sky-4"], [class*=" bg-sky-4"], [class^="bg-sky-5"], [class*=" bg-sky-5"], [class^="bg-sky-6"], [class*=" bg-sky-6"], [class^="bg-sky-7"], [class*=" bg-sky-7"], [class^="bg-sky-8"], [class*=" bg-sky-8"], [class^="bg-blue-4"], [class*=" bg-blue-4"], [class^="bg-blue-5"], [class*=" bg-blue-5"], [class^="bg-blue-6"], [class*=" bg-blue-6"], [class^="bg-blue-7"], [class*=" bg-blue-7"], [class^="bg-blue-8"], [class*=" bg-blue-8"], [class^="bg-indigo-4"], [class*=" bg-indigo-4"], [class^="bg-indigo-5"], [class*=" bg-indigo-5"], [class^="bg-indigo-6"], [class*=" bg-indigo-6"], [class^="bg-indigo-7"], [class*=" bg-indigo-7"], [class^="bg-indigo-8"], [class*=" bg-indigo-8"], [class^="bg-violet-4"], [class*=" bg-violet-4"], [class^="bg-violet-5"], [class*=" bg-violet-5"], [class^="bg-violet-6"], [class*=" bg-violet-6"], [class^="bg-violet-7"], [class*=" bg-violet-7"], [class^="bg-violet-8"], [class*=" bg-violet-8"], [class^="bg-purple-4"], [class*=" bg-purple-4"], [class^="bg-purple-5"], [class*=" bg-purple-5"], [class^="bg-purple-6"], [class*=" bg-purple-6"], [class^="bg-purple-7"], [class*=" bg-purple-7"], [class^="bg-purple-8"], [class*=" bg-purple-8"], [class^="bg-fuchsia-4"], [class*=" bg-fuchsia-4"], [class^="bg-fuchsia-5"], [class*=" bg-fuchsia-5"], [class^="bg-fuchsia-6"], [class*=" bg-fuchsia-6"], [class^="bg-fuchsia-7"], [class*=" bg-fuchsia-7"], [class^="bg-fuchsia-8"], [class*=" bg-fuchsia-8"], [class^="bg-pink-4"], [class*=" bg-pink-4"], [class^="bg-pink-5"], [class*=" bg-pink-5"], [class^="bg-pink-6"], [class*=" bg-pink-6"], [class^="bg-pink-7"], [class*=" bg-pink-7"], [class^="bg-pink-8"], [class*=" bg-pink-8"], [class^="bg-rose-4"], [class*=" bg-rose-4"], [class^="bg-rose-5"], [class*=" bg-rose-5"], [class^="bg-rose-6"], [class*=" bg-rose-6"], [class^="bg-rose-7"], [class*=" bg-rose-7"], [class^="bg-rose-8"], [class*=" bg-rose-8"]) *):not(.pi-art, .pi-art *) { color: var(--pi-text); }
html[data-theme="light"] .pi-app :is([class^="text-slate-200"], [class*=" text-slate-200"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="text-zinc-200"], [class*=" text-zinc-200"]):not(.pi-art, .pi-art *) { color: #1e293b; }
html[data-theme="light"] .pi-app :is([class^="text-slate-300"], [class*=" text-slate-300"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="text-zinc-300"], [class*=" text-zinc-300"]):not(.pi-art, .pi-art *) { color: #334155; }
html[data-theme="light"] .pi-app :is([class^="text-slate-400"], [class*=" text-slate-400"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="text-zinc-400"], [class*=" text-zinc-400"]):not(.pi-art, .pi-art *),
html[data-theme="light"] .pi-app :is([class^="text-gray-400"], [class*=" text-gray-400"]):not(.pi-art, .pi-art *) { color: var(--pi-muted); }
html[data-theme="light"] .pi-app :is([class*="hover:text-white"]:hover, [class*="hover:text-slate-100"]:hover, [class*="hover:text-slate-200"]:hover):not(:is([class*="bg-black"], [style*="background"], video, img, [class^="bg-red-4"], [class*=" bg-red-4"], [class^="bg-red-5"], [class*=" bg-red-5"], [class^="bg-red-6"], [class*=" bg-red-6"], [class^="bg-red-7"], [class*=" bg-red-7"], [class^="bg-red-8"], [class*=" bg-red-8"], [class^="bg-orange-4"], [class*=" bg-orange-4"], [class^="bg-orange-5"], [class*=" bg-orange-5"], [class^="bg-orange-6"], [class*=" bg-orange-6"], [class^="bg-orange-7"], [class*=" bg-orange-7"], [class^="bg-orange-8"], [class*=" bg-orange-8"], [class^="bg-amber-4"], [class*=" bg-amber-4"], [class^="bg-amber-5"], [class*=" bg-amber-5"], [class^="bg-amber-6"], [class*=" bg-amber-6"], [class^="bg-amber-7"], [class*=" bg-amber-7"], [class^="bg-amber-8"], [class*=" bg-amber-8"], [class^="bg-yellow-4"], [class*=" bg-yellow-4"], [class^="bg-yellow-5"], [class*=" bg-yellow-5"], [class^="bg-yellow-6"], [class*=" bg-yellow-6"], [class^="bg-yellow-7"], [class*=" bg-yellow-7"], [class^="bg-yellow-8"], [class*=" bg-yellow-8"], [class^="bg-lime-4"], [class*=" bg-lime-4"], [class^="bg-lime-5"], [class*=" bg-lime-5"], [class^="bg-lime-6"], [class*=" bg-lime-6"], [class^="bg-lime-7"], [class*=" bg-lime-7"], [class^="bg-lime-8"], [class*=" bg-lime-8"], [class^="bg-green-4"], [class*=" bg-green-4"], [class^="bg-green-5"], [class*=" bg-green-5"], [class^="bg-green-6"], [class*=" bg-green-6"], [class^="bg-green-7"], [class*=" bg-green-7"], [class^="bg-green-8"], [class*=" bg-green-8"], [class^="bg-emerald-4"], [class*=" bg-emerald-4"], [class^="bg-emerald-5"], [class*=" bg-emerald-5"], [class^="bg-emerald-6"], [class*=" bg-emerald-6"], [class^="bg-emerald-7"], [class*=" bg-emerald-7"], [class^="bg-emerald-8"], [class*=" bg-emerald-8"], [class^="bg-teal-4"], [class*=" bg-teal-4"], [class^="bg-teal-5"], [class*=" bg-teal-5"], [class^="bg-teal-6"], [class*=" bg-teal-6"], [class^="bg-teal-7"], [class*=" bg-teal-7"], [class^="bg-teal-8"], [class*=" bg-teal-8"], [class^="bg-cyan-4"], [class*=" bg-cyan-4"], [class^="bg-cyan-5"], [class*=" bg-cyan-5"], [class^="bg-cyan-6"], [class*=" bg-cyan-6"], [class^="bg-cyan-7"], [class*=" bg-cyan-7"], [class^="bg-cyan-8"], [class*=" bg-cyan-8"], [class^="bg-sky-4"], [class*=" bg-sky-4"], [class^="bg-sky-5"], [class*=" bg-sky-5"], [class^="bg-sky-6"], [class*=" bg-sky-6"], [class^="bg-sky-7"], [class*=" bg-sky-7"], [class^="bg-sky-8"], [class*=" bg-sky-8"], [class^="bg-blue-4"], [class*=" bg-blue-4"], [class^="bg-blue-5"], [class*=" bg-blue-5"], [class^="bg-blue-6"], [class*=" bg-blue-6"], [class^="bg-blue-7"], [class*=" bg-blue-7"], [class^="bg-blue-8"], [class*=" bg-blue-8"], [class^="bg-indigo-4"], [class*=" bg-indigo-4"], [class^="bg-indigo-5"], [class*=" bg-indigo-5"], [class^="bg-indigo-6"], [class*=" bg-indigo-6"], [class^="bg-indigo-7"], [class*=" bg-indigo-7"], [class^="bg-indigo-8"], [class*=" bg-indigo-8"], [class^="bg-violet-4"], [class*=" bg-violet-4"], [class^="bg-violet-5"], [class*=" bg-violet-5"], [class^="bg-violet-6"], [class*=" bg-violet-6"], [class^="bg-violet-7"], [class*=" bg-violet-7"], [class^="bg-violet-8"], [class*=" bg-violet-8"], [class^="bg-purple-4"], [class*=" bg-purple-4"], [class^="bg-purple-5"], [class*=" bg-purple-5"], [class^="bg-purple-6"], [class*=" bg-purple-6"], [class^="bg-purple-7"], [class*=" bg-purple-7"], [class^="bg-purple-8"], [class*=" bg-purple-8"], [class^="bg-fuchsia-4"], [class*=" bg-fuchsia-4"], [class^="bg-fuchsia-5"], [class*=" bg-fuchsia-5"], [class^="bg-fuchsia-6"], [class*=" bg-fuchsia-6"], [class^="bg-fuchsia-7"], [class*=" bg-fuchsia-7"], [class^="bg-fuchsia-8"], [class*=" bg-fuchsia-8"], [class^="bg-pink-4"], [class*=" bg-pink-4"], [class^="bg-pink-5"], [class*=" bg-pink-5"], [class^="bg-pink-6"], [class*=" bg-pink-6"], [class^="bg-pink-7"], [class*=" bg-pink-7"], [class^="bg-pink-8"], [class*=" bg-pink-8"], [class^="bg-rose-4"], [class*=" bg-rose-4"], [class^="bg-rose-5"], [class*=" bg-rose-5"], [class^="bg-rose-6"], [class*=" bg-rose-6"], [class^="bg-rose-7"], [class*=" bg-rose-7"], [class^="bg-rose-8"], [class*=" bg-rose-8"])):not(.pi-art, .pi-art *) { color: var(--pi-text); }