/* Pop UI style — an opt-in reskin of the whole app.
 *
 * Everything here is scoped to :root[data-ui="pop"], set by js/uiStyle.js from
 * the user's choice in Settings → Appearance. With the attribute absent (the
 * default, "Classic"), not one rule in this file matches, so the classic look is
 * untouched. Rules use !important because they re-map existing Tailwind utility
 * classes and the .light-panel overrides in styles.css, which are more specific.
 *
 * Class families are matched as whole tokens: [class^="text-red-"],
 * [class*=" text-red-"] hits text-red-300 but not hover:text-red-300, so state
 * variants are styled only in their state (the hover rules further down).
 *
 * Visual language: "Pop Panel" — flat newsprint, heavy ink outlines, hard offset
 * shadows, square corners, Ben-Day dots, one loud red. Fonts: Bangers (display),
 * Archivo (text).
 */

:root[data-ui="pop"] {
  --pp-paper: #fbf6e9; --pp-raised: #ffffff; --pp-ink: #111111; --pp-muted: #4a4438;
  --pp-red: #d81e16; --pp-yellow: #ffd400; --pp-blue: #1c58b5; --pp-green: #13703a; --pp-amber: #7a5200;
  --pp-on-red: #ffffff; --pp-on-blue: #ffffff; --pp-on-yellow: #111111;
  --pp-tint: rgba(17, 17, 17, 0.06); --pp-tint-2: rgba(17, 17, 17, 0.11);
  --pp-red-tint: rgba(216, 30, 22, 0.12); --pp-blue-tint: rgba(28, 88, 181, 0.12);
  --pp-green-tint: rgba(19, 112, 58, 0.13); --pp-yellow-tint: rgba(255, 212, 0, 0.38);
  --pp-shadow: 4px 4px 0 0 var(--pp-ink); --pp-shadow-lg: 6px 6px 0 0 var(--pp-ink);
  --pp-display: Bangers, Impact, "Arial Narrow", sans-serif;
  --pp-text: Archivo, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-ui="pop"] {
  /* The standard us-* classes (styles.css) read their colours from --us-*;
     point those at the Pop palette so they follow Pop and Night too. */
  --us-ink: var(--pp-ink); --us-ink-soft: var(--pp-muted); --us-ink-faint: var(--pp-muted);
  --us-line: var(--pp-ink); --us-tint: var(--pp-tint-2); --us-wash: var(--pp-tint); --us-surface: var(--pp-raised);
  --us-amber: var(--pp-yellow); --us-amber-hover: var(--pp-yellow); --us-on-dark: var(--pp-paper);
  --us-todo: var(--pp-blue); --us-progress: var(--pp-amber); --us-done: var(--pp-green); --us-danger: var(--pp-red);
}
:root[data-ui="pop"][data-pop-theme="night"] {
  --pp-paper: #1a1917; --pp-raised: #25231f; --pp-ink: #f5f0e2; --pp-muted: #bdb6a6;
  --pp-red: #ff4d40; --pp-blue: #6a9af2; --pp-green: #4ade80; --pp-amber: #ffd400;
  --pp-on-red: #111111; --pp-on-blue: #111111;
  --pp-tint: rgba(245, 240, 226, 0.07); --pp-tint-2: rgba(245, 240, 226, 0.13);
  --pp-red-tint: rgba(255, 77, 64, 0.18); --pp-blue-tint: rgba(106, 154, 242, 0.18);
  --pp-green-tint: rgba(74, 222, 128, 0.15); --pp-yellow-tint: rgba(255, 212, 0, 0.22);
  color-scheme: dark;
}

/* ---------- canvas, type ---------- */
:root[data-ui="pop"], :root[data-ui="pop"] body { background: var(--pp-paper) !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] body, :root[data-ui="pop"] .font-sans, :root[data-ui="pop"] button, :root[data-ui="pop"] input, :root[data-ui="pop"] textarea, :root[data-ui="pop"] select { font-family: var(--pp-text) !important; }
:root[data-ui="pop"] .font-serif, :root[data-ui="pop"] h1.font-serif, :root[data-ui="pop"] h2.font-serif, :root[data-ui="pop"] h3.font-serif {
  font-family: var(--pp-display) !important; font-weight: 400 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase; font-style: normal !important;
}
:root[data-ui="pop"] ::selection { background: var(--pp-yellow); color: #111111; }
:root[data-ui="pop"] ::-webkit-scrollbar-track { background: var(--pp-paper); border-radius: 0; }
:root[data-ui="pop"] ::-webkit-scrollbar-thumb { background: var(--pp-ink); border-radius: 0; border: 2px solid var(--pp-paper); }

/* Square everything. A rounded-full element with an explicit width and height is a
   circle (avatar, status dot, switch knob) and stays round; one sized by padding
   is a pill, and pills become hard-edged tags. */
:root[data-ui="pop"] *, :root[data-ui="pop"] *::before, :root[data-ui="pop"] *::after { border-radius: 0 !important; }
:root[data-ui="pop"] .rounded-full[class*="w-"][class*="h-"], :root[data-ui="pop"] .rounded-full[class*="w-"][class*="h-"]::before, :root[data-ui="pop"] .rounded-full[class*="w-"][class*="h-"]::after,
:root[data-ui="pop"] [class*="rounded-full"][class*="aspect-square"], :root[data-ui="pop"] [class*="dot"].rounded-full,
:root[data-ui="pop"] canvas, :root[data-ui="pop"] [class*="orb"], :root[data-ui="pop"] [class*="avatar"], :root[data-ui="pop"] [class*="Avatar"] { border-radius: 9999px !important; }
:root[data-ui="pop"] input, :root[data-ui="pop"] textarea, :root[data-ui="pop"] select { border-radius: 4px !important; }

/* No glass, no glow: flat fills only. */
:root[data-ui="pop"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none; }
:root[data-ui="pop"] [class*="bg-gradient-to-"], :root[data-ui="pop"] .bg-gradient-warm { background-image: none !important; }
:root[data-ui="pop"] img[src*="logo_white"] { filter: brightness(0); }
:root[data-ui="pop"][data-pop-theme="night"] img[src*="logo_white"] { filter: none; }

/* ---------- text ---------- */
:root[data-ui="pop"] [class^="text-white"],
:root[data-ui="pop"] [class*=" text-white"],
:root[data-ui="pop"] [class^="text-cream-"],
:root[data-ui="pop"] [class*=" text-cream-"],
:root[data-ui="pop"] [class^="text-gray-"],
:root[data-ui="pop"] [class*=" text-gray-"],
:root[data-ui="pop"] [class^="text-stone-"],
:root[data-ui="pop"] [class*=" text-stone-"],
:root[data-ui="pop"] [class^="text-black"],
:root[data-ui="pop"] [class*=" text-black"],
:root[data-ui="pop"] [class^="text-jaguar-"],
:root[data-ui="pop"] [class*=" text-jaguar-"],
:root[data-ui="pop"] [class^="text-rust-600"],
:root[data-ui="pop"] [class*=" text-rust-600"],
:root[data-ui="pop"] [class^="text-rust-700"],
:root[data-ui="pop"] [class*=" text-rust-700"],
:root[data-ui="pop"] [class^="text-rust-800"],
:root[data-ui="pop"] [class*=" text-rust-800"],
:root[data-ui="pop"] [class^="text-rust-900"],
:root[data-ui="pop"] [class*=" text-rust-900"],
:root[data-ui="pop"] [class^="text-rust-950"],
:root[data-ui="pop"] [class*=" text-rust-950"] { color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class^="text-white/"],
:root[data-ui="pop"] [class*=" text-white/"],
:root[data-ui="pop"] [class^="text-cream-100/"],
:root[data-ui="pop"] [class*=" text-cream-100/"],
:root[data-ui="pop"] [class^="text-cream-200/"],
:root[data-ui="pop"] [class*=" text-cream-200/"],
:root[data-ui="pop"] [class^="text-jaguar-300"],
:root[data-ui="pop"] [class*=" text-jaguar-300"],
:root[data-ui="pop"] [class^="text-jaguar-400"],
:root[data-ui="pop"] [class*=" text-jaguar-400"],
:root[data-ui="pop"] [class^="text-jaguar-500"],
:root[data-ui="pop"] [class*=" text-jaguar-500"],
:root[data-ui="pop"] [class^="text-gray-400"],
:root[data-ui="pop"] [class*=" text-gray-400"],
:root[data-ui="pop"] [class^="text-gray-500"],
:root[data-ui="pop"] [class*=" text-gray-500"],
:root[data-ui="pop"] [class^="text-stone-400"],
:root[data-ui="pop"] [class*=" text-stone-400"],
:root[data-ui="pop"] [class^="text-stone-500"],
:root[data-ui="pop"] [class*=" text-stone-500"] { color: var(--pp-muted) !important; }
:root[data-ui="pop"] [class^="text-white/80"],
:root[data-ui="pop"] [class*=" text-white/80"],
:root[data-ui="pop"] [class^="text-white/85"],
:root[data-ui="pop"] [class*=" text-white/85"],
:root[data-ui="pop"] [class^="text-white/90"],
:root[data-ui="pop"] [class*=" text-white/90"],
:root[data-ui="pop"] [class^="text-white/95"],
:root[data-ui="pop"] [class*=" text-white/95"],
:root[data-ui="pop"] [class^="text-cream-100/80"],
:root[data-ui="pop"] [class*=" text-cream-100/80"] { color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class^="text-rust-200"],
:root[data-ui="pop"] [class*=" text-rust-200"],
:root[data-ui="pop"] [class^="text-rust-300"],
:root[data-ui="pop"] [class*=" text-rust-300"],
:root[data-ui="pop"] [class^="text-rust-400"],
:root[data-ui="pop"] [class*=" text-rust-400"],
:root[data-ui="pop"] [class^="text-rust-500"],
:root[data-ui="pop"] [class*=" text-rust-500"],
:root[data-ui="pop"] [class^="text-gold-"],
:root[data-ui="pop"] [class*=" text-gold-"] { color: var(--pp-red) !important; }
:root[data-ui="pop"] [class^="text-red-"],
:root[data-ui="pop"] [class*=" text-red-"],
:root[data-ui="pop"] [class^="text-rose-"],
:root[data-ui="pop"] [class*=" text-rose-"],
:root[data-ui="pop"] [class^="text-pink-"],
:root[data-ui="pop"] [class*=" text-pink-"],
:root[data-ui="pop"] [class^="text-orange-"],
:root[data-ui="pop"] [class*=" text-orange-"] { color: var(--pp-red) !important; }
:root[data-ui="pop"] [class^="text-green-"],
:root[data-ui="pop"] [class*=" text-green-"],
:root[data-ui="pop"] [class^="text-emerald-"],
:root[data-ui="pop"] [class*=" text-emerald-"],
:root[data-ui="pop"] [class^="text-teal-"],
:root[data-ui="pop"] [class*=" text-teal-"],
:root[data-ui="pop"] [class^="text-lime-"],
:root[data-ui="pop"] [class*=" text-lime-"] { color: var(--pp-green) !important; }
:root[data-ui="pop"] [class^="text-blue-"],
:root[data-ui="pop"] [class*=" text-blue-"],
:root[data-ui="pop"] [class^="text-indigo-"],
:root[data-ui="pop"] [class*=" text-indigo-"],
:root[data-ui="pop"] [class^="text-purple-"],
:root[data-ui="pop"] [class*=" text-purple-"],
:root[data-ui="pop"] [class^="text-violet-"],
:root[data-ui="pop"] [class*=" text-violet-"],
:root[data-ui="pop"] [class^="text-sky-"],
:root[data-ui="pop"] [class*=" text-sky-"],
:root[data-ui="pop"] [class^="text-cyan-"],
:root[data-ui="pop"] [class*=" text-cyan-"] { color: var(--pp-blue) !important; }
:root[data-ui="pop"] [class^="text-amber-"],
:root[data-ui="pop"] [class*=" text-amber-"],
:root[data-ui="pop"] [class^="text-yellow-"],
:root[data-ui="pop"] [class*=" text-yellow-"] { color: var(--pp-amber) !important; }
:root[data-ui="pop"] [class*="placeholder-"]::placeholder,
:root[data-ui="pop"] input::placeholder,
:root[data-ui="pop"] textarea::placeholder { color: var(--pp-muted) !important; opacity: 1 !important; }
:root[data-ui="pop"] [class*="hover:text-"]:hover,
:root[data-ui="pop"] .group:hover [class*="group-hover:text-"],
:root[data-ui="pop"] [class*="focus:text-"]:focus { color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class*="hover:text-red-"]:hover,
:root[data-ui="pop"] [class*="hover:text-rust-"]:hover { color: var(--pp-red) !important; }

/* ---------- surfaces ---------- */
:root[data-ui="pop"] [class^="bg-white/"],
:root[data-ui="pop"] [class*=" bg-white/"],
:root[data-ui="pop"] [class^="bg-cream-100/"],
:root[data-ui="pop"] [class*=" bg-cream-100/"],
:root[data-ui="pop"] [class^="bg-cream-50/"],
:root[data-ui="pop"] [class*=" bg-cream-50/"],
:root[data-ui="pop"] [class^="bg-gray-50"],
:root[data-ui="pop"] [class*=" bg-gray-50"],
:root[data-ui="pop"] [class^="bg-gray-100"],
:root[data-ui="pop"] [class*=" bg-gray-100"],
:root[data-ui="pop"] [class^="bg-stone-50"],
:root[data-ui="pop"] [class*=" bg-stone-50"],
:root[data-ui="pop"] [class^="bg-stone-100"],
:root[data-ui="pop"] [class*=" bg-stone-100"],
:root[data-ui="pop"] [class^="bg-jaguar-50"],
:root[data-ui="pop"] [class*=" bg-jaguar-50"],
:root[data-ui="pop"] [class^="bg-jaguar-100"],
:root[data-ui="pop"] [class*=" bg-jaguar-100"],
:root[data-ui="pop"] [class^="bg-rust-50"],
:root[data-ui="pop"] [class*=" bg-rust-50"] { background-color: var(--pp-tint) !important; }
:root[data-ui="pop"] [class^="bg-white/20"],
:root[data-ui="pop"] [class*=" bg-white/20"],
:root[data-ui="pop"] [class^="bg-white/30"],
:root[data-ui="pop"] [class*=" bg-white/30"],
:root[data-ui="pop"] [class^="bg-cream-100/20"],
:root[data-ui="pop"] [class*=" bg-cream-100/20"],
:root[data-ui="pop"] [class^="bg-gray-200"],
:root[data-ui="pop"] [class*=" bg-gray-200"],
:root[data-ui="pop"] [class^="bg-jaguar-200"],
:root[data-ui="pop"] [class*=" bg-jaguar-200"],
:root[data-ui="pop"] [class^="bg-jaguar-300"],
:root[data-ui="pop"] [class*=" bg-jaguar-300"],
:root[data-ui="pop"] [class^="bg-stone-200"],
:root[data-ui="pop"] [class*=" bg-stone-200"] { background-color: var(--pp-tint-2) !important; }
:root[data-ui="pop"] [class~="bg-white"],
:root[data-ui="pop"] [class~="bg-transparent-white"] { background-color: var(--pp-raised) !important; }
:root[data-ui="pop"] [class*="hover:bg-white"]:hover,
:root[data-ui="pop"] [class*="hover:bg-cream-100/"]:hover,
:root[data-ui="pop"] [class*="hover:bg-gray-"]:hover,
:root[data-ui="pop"] [class*="hover:bg-jaguar-"]:hover,
:root[data-ui="pop"] [class*="hover:bg-stone-"]:hover,
:root[data-ui="pop"] [class*="focus:bg-white"]:focus { background-color: var(--pp-tint-2) !important; }
:root[data-ui="pop"] [class~="bg-cream-50"],
:root[data-ui="pop"] [class~="bg-cream-100"],
:root[data-ui="pop"] [class~="bg-cream-200"] { background-color: var(--pp-yellow) !important; color: var(--pp-on-yellow) !important; }
:root[data-ui="pop"] [class*="hover:bg-cream-100"]:hover:not([class*="hover:bg-cream-100/"]),
:root[data-ui="pop"] [class*="hover:bg-cream-200"]:hover { background-color: var(--pp-yellow) !important; color: var(--pp-on-yellow) !important; }
:root[data-ui="pop"] [class~="bg-rust-300"],
:root[data-ui="pop"] [class~="bg-rust-400"],
:root[data-ui="pop"] [class~="bg-rust-500"],
:root[data-ui="pop"] [class~="bg-rust-600"],
:root[data-ui="pop"] [class~="bg-red-400"],
:root[data-ui="pop"] [class~="bg-red-500"],
:root[data-ui="pop"] [class~="bg-red-600"],
:root[data-ui="pop"] [class~="bg-red-700"],
:root[data-ui="pop"] [class~="bg-rose-400"],
:root[data-ui="pop"] [class~="bg-rose-500"],
:root[data-ui="pop"] [class~="bg-rose-600"],
:root[data-ui="pop"] [class~="bg-rose-700"],
:root[data-ui="pop"] [class~="bg-pink-400"],
:root[data-ui="pop"] [class~="bg-pink-500"],
:root[data-ui="pop"] [class~="bg-pink-600"],
:root[data-ui="pop"] [class~="bg-pink-700"],
:root[data-ui="pop"] [class~="bg-gold-500"],
:root[data-ui="pop"] [class~="bg-gold-600"] { background-color: var(--pp-red) !important; color: var(--pp-on-red) !important; border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class~="bg-rust-300"] *,
:root[data-ui="pop"] [class~="bg-rust-400"] *,
:root[data-ui="pop"] [class~="bg-rust-500"] *,
:root[data-ui="pop"] [class~="bg-rust-600"] *,
:root[data-ui="pop"] [class~="bg-red-400"] *,
:root[data-ui="pop"] [class~="bg-red-500"] *,
:root[data-ui="pop"] [class~="bg-red-600"] *,
:root[data-ui="pop"] [class~="bg-red-700"] *,
:root[data-ui="pop"] [class~="bg-rose-400"] *,
:root[data-ui="pop"] [class~="bg-rose-500"] *,
:root[data-ui="pop"] [class~="bg-rose-600"] *,
:root[data-ui="pop"] [class~="bg-rose-700"] *,
:root[data-ui="pop"] [class~="bg-pink-400"] *,
:root[data-ui="pop"] [class~="bg-pink-500"] *,
:root[data-ui="pop"] [class~="bg-pink-600"] *,
:root[data-ui="pop"] [class~="bg-pink-700"] *,
:root[data-ui="pop"] [class~="bg-gold-500"] *,
:root[data-ui="pop"] [class~="bg-gold-600"] * { color: var(--pp-on-red) !important; }
:root[data-ui="pop"] [class*="hover:bg-rust-"]:hover:not([class*="hover:bg-rust-400/"]):not([class*="hover:bg-rust-500/"]),
:root[data-ui="pop"] [class*="hover:bg-red-5"]:hover:not([class*="hover:bg-red-500/"]) { background-color: var(--pp-red) !important; color: var(--pp-on-red) !important; }
:root[data-ui="pop"] [class~="bg-rust-700"],
:root[data-ui="pop"] [class~="bg-rust-800"],
:root[data-ui="pop"] [class~="bg-rust-900"],
:root[data-ui="pop"] [class~="bg-rust-950"],
:root[data-ui="pop"] [class~="bg-jaguar-700"],
:root[data-ui="pop"] [class~="bg-jaguar-800"],
:root[data-ui="pop"] [class~="bg-jaguar-900"],
:root[data-ui="pop"] [class~="bg-jaguar-950"],
:root[data-ui="pop"] [class~="bg-gray-700"],
:root[data-ui="pop"] [class~="bg-gray-800"],
:root[data-ui="pop"] [class~="bg-gray-900"],
:root[data-ui="pop"] [class~="bg-stone-700"],
:root[data-ui="pop"] [class~="bg-stone-800"],
:root[data-ui="pop"] [class~="bg-stone-900"],
:root[data-ui="pop"] [class~="bg-neutral-700"],
:root[data-ui="pop"] [class~="bg-neutral-800"],
:root[data-ui="pop"] [class~="bg-neutral-900"],
:root[data-ui="pop"] [class~="bg-slate-700"],
:root[data-ui="pop"] [class~="bg-slate-800"],
:root[data-ui="pop"] [class~="bg-slate-900"],
:root[data-ui="pop"] [class~="bg-zinc-700"],
:root[data-ui="pop"] [class~="bg-zinc-800"],
:root[data-ui="pop"] [class~="bg-zinc-900"],
:root[data-ui="pop"] [class~="bg-black"] { background-color: var(--pp-ink) !important; color: var(--pp-paper) !important; }
:root[data-ui="pop"] [class~="bg-rust-700"] *,
:root[data-ui="pop"] [class~="bg-rust-800"] *,
:root[data-ui="pop"] [class~="bg-rust-900"] *,
:root[data-ui="pop"] [class~="bg-rust-950"] *,
:root[data-ui="pop"] [class~="bg-jaguar-700"] *,
:root[data-ui="pop"] [class~="bg-jaguar-800"] *,
:root[data-ui="pop"] [class~="bg-jaguar-900"] *,
:root[data-ui="pop"] [class~="bg-jaguar-950"] *,
:root[data-ui="pop"] [class~="bg-gray-700"] *,
:root[data-ui="pop"] [class~="bg-gray-800"] *,
:root[data-ui="pop"] [class~="bg-gray-900"] *,
:root[data-ui="pop"] [class~="bg-stone-700"] *,
:root[data-ui="pop"] [class~="bg-stone-800"] *,
:root[data-ui="pop"] [class~="bg-stone-900"] *,
:root[data-ui="pop"] [class~="bg-neutral-700"] *,
:root[data-ui="pop"] [class~="bg-neutral-800"] *,
:root[data-ui="pop"] [class~="bg-neutral-900"] *,
:root[data-ui="pop"] [class~="bg-slate-700"] *,
:root[data-ui="pop"] [class~="bg-slate-800"] *,
:root[data-ui="pop"] [class~="bg-slate-900"] *,
:root[data-ui="pop"] [class~="bg-zinc-700"] *,
:root[data-ui="pop"] [class~="bg-zinc-800"] *,
:root[data-ui="pop"] [class~="bg-zinc-900"] *,
:root[data-ui="pop"] [class~="bg-black"] * { color: var(--pp-paper) !important; }
:root[data-ui="pop"] [class~="bg-blue-400"],
:root[data-ui="pop"] [class~="bg-blue-500"],
:root[data-ui="pop"] [class~="bg-blue-600"],
:root[data-ui="pop"] [class~="bg-blue-700"],
:root[data-ui="pop"] [class~="bg-indigo-400"],
:root[data-ui="pop"] [class~="bg-indigo-500"],
:root[data-ui="pop"] [class~="bg-indigo-600"],
:root[data-ui="pop"] [class~="bg-indigo-700"],
:root[data-ui="pop"] [class~="bg-purple-400"],
:root[data-ui="pop"] [class~="bg-purple-500"],
:root[data-ui="pop"] [class~="bg-purple-600"],
:root[data-ui="pop"] [class~="bg-purple-700"],
:root[data-ui="pop"] [class~="bg-violet-400"],
:root[data-ui="pop"] [class~="bg-violet-500"],
:root[data-ui="pop"] [class~="bg-violet-600"],
:root[data-ui="pop"] [class~="bg-violet-700"],
:root[data-ui="pop"] [class~="bg-sky-400"],
:root[data-ui="pop"] [class~="bg-sky-500"],
:root[data-ui="pop"] [class~="bg-sky-600"],
:root[data-ui="pop"] [class~="bg-sky-700"],
:root[data-ui="pop"] [class~="bg-cyan-400"],
:root[data-ui="pop"] [class~="bg-cyan-500"],
:root[data-ui="pop"] [class~="bg-cyan-600"],
:root[data-ui="pop"] [class~="bg-cyan-700"],
:root[data-ui="pop"] [class~="bg-teal-400"],
:root[data-ui="pop"] [class~="bg-teal-500"],
:root[data-ui="pop"] [class~="bg-teal-600"],
:root[data-ui="pop"] [class~="bg-teal-700"] { background-color: var(--pp-blue) !important; color: var(--pp-on-blue) !important; }
:root[data-ui="pop"] [class~="bg-blue-400"] *,
:root[data-ui="pop"] [class~="bg-blue-500"] *,
:root[data-ui="pop"] [class~="bg-blue-600"] *,
:root[data-ui="pop"] [class~="bg-blue-700"] *,
:root[data-ui="pop"] [class~="bg-indigo-400"] *,
:root[data-ui="pop"] [class~="bg-indigo-500"] *,
:root[data-ui="pop"] [class~="bg-indigo-600"] *,
:root[data-ui="pop"] [class~="bg-indigo-700"] *,
:root[data-ui="pop"] [class~="bg-purple-400"] *,
:root[data-ui="pop"] [class~="bg-purple-500"] *,
:root[data-ui="pop"] [class~="bg-purple-600"] *,
:root[data-ui="pop"] [class~="bg-purple-700"] *,
:root[data-ui="pop"] [class~="bg-violet-400"] *,
:root[data-ui="pop"] [class~="bg-violet-500"] *,
:root[data-ui="pop"] [class~="bg-violet-600"] *,
:root[data-ui="pop"] [class~="bg-violet-700"] *,
:root[data-ui="pop"] [class~="bg-sky-400"] *,
:root[data-ui="pop"] [class~="bg-sky-500"] *,
:root[data-ui="pop"] [class~="bg-sky-600"] *,
:root[data-ui="pop"] [class~="bg-sky-700"] *,
:root[data-ui="pop"] [class~="bg-cyan-400"] *,
:root[data-ui="pop"] [class~="bg-cyan-500"] *,
:root[data-ui="pop"] [class~="bg-cyan-600"] *,
:root[data-ui="pop"] [class~="bg-cyan-700"] *,
:root[data-ui="pop"] [class~="bg-teal-400"] *,
:root[data-ui="pop"] [class~="bg-teal-500"] *,
:root[data-ui="pop"] [class~="bg-teal-600"] *,
:root[data-ui="pop"] [class~="bg-teal-700"] * { color: var(--pp-on-blue) !important; }
:root[data-ui="pop"] [class~="bg-green-400"],
:root[data-ui="pop"] [class~="bg-green-500"],
:root[data-ui="pop"] [class~="bg-green-600"],
:root[data-ui="pop"] [class~="bg-green-700"],
:root[data-ui="pop"] [class~="bg-emerald-400"],
:root[data-ui="pop"] [class~="bg-emerald-500"],
:root[data-ui="pop"] [class~="bg-emerald-600"],
:root[data-ui="pop"] [class~="bg-emerald-700"],
:root[data-ui="pop"] [class~="bg-lime-400"],
:root[data-ui="pop"] [class~="bg-lime-500"],
:root[data-ui="pop"] [class~="bg-lime-600"],
:root[data-ui="pop"] [class~="bg-lime-700"] { background-color: var(--pp-green) !important; color: #ffffff !important; }
:root[data-ui="pop"] [class~="bg-green-400"] *,
:root[data-ui="pop"] [class~="bg-green-500"] *,
:root[data-ui="pop"] [class~="bg-green-600"] *,
:root[data-ui="pop"] [class~="bg-green-700"] *,
:root[data-ui="pop"] [class~="bg-emerald-400"] *,
:root[data-ui="pop"] [class~="bg-emerald-500"] *,
:root[data-ui="pop"] [class~="bg-emerald-600"] *,
:root[data-ui="pop"] [class~="bg-emerald-700"] *,
:root[data-ui="pop"] [class~="bg-lime-400"] *,
:root[data-ui="pop"] [class~="bg-lime-500"] *,
:root[data-ui="pop"] [class~="bg-lime-600"] *,
:root[data-ui="pop"] [class~="bg-lime-700"] * { color: #ffffff !important; }
:root[data-ui="pop"] [class~="bg-amber-200"],
:root[data-ui="pop"] [class~="bg-amber-300"],
:root[data-ui="pop"] [class~="bg-amber-400"],
:root[data-ui="pop"] [class~="bg-amber-500"],
:root[data-ui="pop"] [class~="bg-amber-600"],
:root[data-ui="pop"] [class~="bg-yellow-200"],
:root[data-ui="pop"] [class~="bg-yellow-300"],
:root[data-ui="pop"] [class~="bg-yellow-400"],
:root[data-ui="pop"] [class~="bg-yellow-500"],
:root[data-ui="pop"] [class~="bg-yellow-600"],
:root[data-ui="pop"] [class~="bg-orange-200"],
:root[data-ui="pop"] [class~="bg-orange-300"],
:root[data-ui="pop"] [class~="bg-orange-400"],
:root[data-ui="pop"] [class~="bg-orange-500"],
:root[data-ui="pop"] [class~="bg-orange-600"] { background-color: var(--pp-yellow) !important; color: var(--pp-on-yellow) !important; }
:root[data-ui="pop"] [class~="bg-amber-200"] *,
:root[data-ui="pop"] [class~="bg-amber-300"] *,
:root[data-ui="pop"] [class~="bg-amber-400"] *,
:root[data-ui="pop"] [class~="bg-amber-500"] *,
:root[data-ui="pop"] [class~="bg-amber-600"] *,
:root[data-ui="pop"] [class~="bg-yellow-200"] *,
:root[data-ui="pop"] [class~="bg-yellow-300"] *,
:root[data-ui="pop"] [class~="bg-yellow-400"] *,
:root[data-ui="pop"] [class~="bg-yellow-500"] *,
:root[data-ui="pop"] [class~="bg-yellow-600"] *,
:root[data-ui="pop"] [class~="bg-orange-200"] *,
:root[data-ui="pop"] [class~="bg-orange-300"] *,
:root[data-ui="pop"] [class~="bg-orange-400"] *,
:root[data-ui="pop"] [class~="bg-orange-500"] *,
:root[data-ui="pop"] [class~="bg-orange-600"] * { color: var(--pp-on-yellow) !important; }
:root[data-ui="pop"] [class^="bg-rust-300/"],
:root[data-ui="pop"] [class*=" bg-rust-300/"],
:root[data-ui="pop"] [class^="bg-rust-400/"],
:root[data-ui="pop"] [class*=" bg-rust-400/"],
:root[data-ui="pop"] [class^="bg-rust-500/"],
:root[data-ui="pop"] [class*=" bg-rust-500/"],
:root[data-ui="pop"] [class^="bg-rust-600/"],
:root[data-ui="pop"] [class*=" bg-rust-600/"],
:root[data-ui="pop"] [class^="bg-red-"],
:root[data-ui="pop"] [class*=" bg-red-"],
:root[data-ui="pop"] [class^="bg-rose-"],
:root[data-ui="pop"] [class*=" bg-rose-"],
:root[data-ui="pop"] [class^="bg-pink-"],
:root[data-ui="pop"] [class*=" bg-pink-"],
:root[data-ui="pop"] [class^="bg-orange-50"],
:root[data-ui="pop"] [class*=" bg-orange-50"],
:root[data-ui="pop"] [class^="bg-orange-100"],
:root[data-ui="pop"] [class*=" bg-orange-100"] { background-color: var(--pp-red-tint) !important; }
:root[data-ui="pop"] [class^="bg-blue-"],
:root[data-ui="pop"] [class*=" bg-blue-"],
:root[data-ui="pop"] [class^="bg-indigo-"],
:root[data-ui="pop"] [class*=" bg-indigo-"],
:root[data-ui="pop"] [class^="bg-purple-"],
:root[data-ui="pop"] [class*=" bg-purple-"],
:root[data-ui="pop"] [class^="bg-violet-"],
:root[data-ui="pop"] [class*=" bg-violet-"],
:root[data-ui="pop"] [class^="bg-sky-"],
:root[data-ui="pop"] [class*=" bg-sky-"],
:root[data-ui="pop"] [class^="bg-cyan-"],
:root[data-ui="pop"] [class*=" bg-cyan-"],
:root[data-ui="pop"] [class^="bg-teal-"],
:root[data-ui="pop"] [class*=" bg-teal-"] { background-color: var(--pp-blue-tint) !important; }
:root[data-ui="pop"] [class^="bg-green-"],
:root[data-ui="pop"] [class*=" bg-green-"],
:root[data-ui="pop"] [class^="bg-emerald-"],
:root[data-ui="pop"] [class*=" bg-emerald-"],
:root[data-ui="pop"] [class^="bg-lime-"],
:root[data-ui="pop"] [class*=" bg-lime-"] { background-color: var(--pp-green-tint) !important; }
:root[data-ui="pop"] [class^="bg-amber-"],
:root[data-ui="pop"] [class*=" bg-amber-"],
:root[data-ui="pop"] [class^="bg-yellow-"],
:root[data-ui="pop"] [class*=" bg-yellow-"],
:root[data-ui="pop"] [class^="bg-orange-500/"],
:root[data-ui="pop"] [class*=" bg-orange-500/"],
:root[data-ui="pop"] [class^="bg-orange-400/"],
:root[data-ui="pop"] [class*=" bg-orange-400/"] { background-color: var(--pp-yellow-tint) !important; }
:root[data-ui="pop"] [class~="bg-rust-300"],
:root[data-ui="pop"] [class~="bg-rust-400"],
:root[data-ui="pop"] [class~="bg-rust-500"],
:root[data-ui="pop"] [class~="bg-rust-600"],
:root[data-ui="pop"] [class~="bg-red-400"],
:root[data-ui="pop"] [class~="bg-red-500"],
:root[data-ui="pop"] [class~="bg-red-600"],
:root[data-ui="pop"] [class~="bg-red-700"],
:root[data-ui="pop"] [class~="bg-rose-400"],
:root[data-ui="pop"] [class~="bg-rose-500"],
:root[data-ui="pop"] [class~="bg-rose-600"],
:root[data-ui="pop"] [class~="bg-rose-700"],
:root[data-ui="pop"] [class~="bg-pink-400"],
:root[data-ui="pop"] [class~="bg-pink-500"],
:root[data-ui="pop"] [class~="bg-pink-600"],
:root[data-ui="pop"] [class~="bg-pink-700"],
:root[data-ui="pop"] [class~="bg-gold-500"],
:root[data-ui="pop"] [class~="bg-gold-600"] { background-color: var(--pp-red) !important; }
:root[data-ui="pop"] [class~="bg-blue-400"],
:root[data-ui="pop"] [class~="bg-blue-500"],
:root[data-ui="pop"] [class~="bg-blue-600"],
:root[data-ui="pop"] [class~="bg-blue-700"],
:root[data-ui="pop"] [class~="bg-indigo-400"],
:root[data-ui="pop"] [class~="bg-indigo-500"],
:root[data-ui="pop"] [class~="bg-indigo-600"],
:root[data-ui="pop"] [class~="bg-indigo-700"],
:root[data-ui="pop"] [class~="bg-purple-400"],
:root[data-ui="pop"] [class~="bg-purple-500"],
:root[data-ui="pop"] [class~="bg-purple-600"],
:root[data-ui="pop"] [class~="bg-purple-700"],
:root[data-ui="pop"] [class~="bg-violet-400"],
:root[data-ui="pop"] [class~="bg-violet-500"],
:root[data-ui="pop"] [class~="bg-violet-600"],
:root[data-ui="pop"] [class~="bg-violet-700"],
:root[data-ui="pop"] [class~="bg-sky-400"],
:root[data-ui="pop"] [class~="bg-sky-500"],
:root[data-ui="pop"] [class~="bg-sky-600"],
:root[data-ui="pop"] [class~="bg-sky-700"],
:root[data-ui="pop"] [class~="bg-cyan-400"],
:root[data-ui="pop"] [class~="bg-cyan-500"],
:root[data-ui="pop"] [class~="bg-cyan-600"],
:root[data-ui="pop"] [class~="bg-cyan-700"],
:root[data-ui="pop"] [class~="bg-teal-400"],
:root[data-ui="pop"] [class~="bg-teal-500"],
:root[data-ui="pop"] [class~="bg-teal-600"],
:root[data-ui="pop"] [class~="bg-teal-700"] { background-color: var(--pp-blue) !important; }
:root[data-ui="pop"] [class~="bg-green-400"],
:root[data-ui="pop"] [class~="bg-green-500"],
:root[data-ui="pop"] [class~="bg-green-600"],
:root[data-ui="pop"] [class~="bg-green-700"],
:root[data-ui="pop"] [class~="bg-emerald-400"],
:root[data-ui="pop"] [class~="bg-emerald-500"],
:root[data-ui="pop"] [class~="bg-emerald-600"],
:root[data-ui="pop"] [class~="bg-emerald-700"],
:root[data-ui="pop"] [class~="bg-lime-400"],
:root[data-ui="pop"] [class~="bg-lime-500"],
:root[data-ui="pop"] [class~="bg-lime-600"],
:root[data-ui="pop"] [class~="bg-lime-700"] { background-color: var(--pp-green) !important; }
:root[data-ui="pop"] [class~="bg-amber-200"],
:root[data-ui="pop"] [class~="bg-amber-300"],
:root[data-ui="pop"] [class~="bg-amber-400"],
:root[data-ui="pop"] [class~="bg-amber-500"],
:root[data-ui="pop"] [class~="bg-amber-600"],
:root[data-ui="pop"] [class~="bg-yellow-200"],
:root[data-ui="pop"] [class~="bg-yellow-300"],
:root[data-ui="pop"] [class~="bg-yellow-400"],
:root[data-ui="pop"] [class~="bg-yellow-500"],
:root[data-ui="pop"] [class~="bg-yellow-600"],
:root[data-ui="pop"] [class~="bg-orange-200"],
:root[data-ui="pop"] [class~="bg-orange-300"],
:root[data-ui="pop"] [class~="bg-orange-400"],
:root[data-ui="pop"] [class~="bg-orange-500"],
:root[data-ui="pop"] [class~="bg-orange-600"] { background-color: var(--pp-yellow) !important; }
:root[data-ui="pop"] [class^="bg-black/"],
:root[data-ui="pop"] [class*=" bg-black/"] { background-color: rgba(17, 17, 17, 0.55) !important; }

/* ---------- line ---------- */
:root[data-ui="pop"] [class^="border-white"],
:root[data-ui="pop"] [class*=" border-white"],
:root[data-ui="pop"] [class^="border-cream-"],
:root[data-ui="pop"] [class*=" border-cream-"],
:root[data-ui="pop"] [class^="border-jaguar-"],
:root[data-ui="pop"] [class*=" border-jaguar-"],
:root[data-ui="pop"] [class^="border-gray-"],
:root[data-ui="pop"] [class*=" border-gray-"],
:root[data-ui="pop"] [class^="border-stone-"],
:root[data-ui="pop"] [class*=" border-stone-"],
:root[data-ui="pop"] [class^="border-black"],
:root[data-ui="pop"] [class*=" border-black"],
:root[data-ui="pop"] [class^="border-rust-7"],
:root[data-ui="pop"] [class*=" border-rust-7"],
:root[data-ui="pop"] [class^="border-rust-8"],
:root[data-ui="pop"] [class*=" border-rust-8"],
:root[data-ui="pop"] [class^="border-rust-9"],
:root[data-ui="pop"] [class*=" border-rust-9"],
:root[data-ui="pop"] [class^="border-amber-"],
:root[data-ui="pop"] [class*=" border-amber-"],
:root[data-ui="pop"] [class^="border-yellow-"],
:root[data-ui="pop"] [class*=" border-yellow-"] { border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class^="border-rust-3"],
:root[data-ui="pop"] [class*=" border-rust-3"],
:root[data-ui="pop"] [class^="border-rust-4"],
:root[data-ui="pop"] [class*=" border-rust-4"],
:root[data-ui="pop"] [class^="border-rust-5"],
:root[data-ui="pop"] [class*=" border-rust-5"],
:root[data-ui="pop"] [class^="border-rust-6"],
:root[data-ui="pop"] [class*=" border-rust-6"],
:root[data-ui="pop"] [class^="border-red-"],
:root[data-ui="pop"] [class*=" border-red-"],
:root[data-ui="pop"] [class^="border-rose-"],
:root[data-ui="pop"] [class*=" border-rose-"],
:root[data-ui="pop"] [class^="border-pink-"],
:root[data-ui="pop"] [class*=" border-pink-"],
:root[data-ui="pop"] [class^="border-orange-"],
:root[data-ui="pop"] [class*=" border-orange-"] { border-color: var(--pp-red) !important; }
:root[data-ui="pop"] [class^="border-green-"],
:root[data-ui="pop"] [class*=" border-green-"],
:root[data-ui="pop"] [class^="border-emerald-"],
:root[data-ui="pop"] [class*=" border-emerald-"],
:root[data-ui="pop"] [class^="border-teal-"],
:root[data-ui="pop"] [class*=" border-teal-"] { border-color: var(--pp-green) !important; }
:root[data-ui="pop"] [class^="border-blue-"],
:root[data-ui="pop"] [class*=" border-blue-"],
:root[data-ui="pop"] [class^="border-indigo-"],
:root[data-ui="pop"] [class*=" border-indigo-"],
:root[data-ui="pop"] [class^="border-purple-"],
:root[data-ui="pop"] [class*=" border-purple-"],
:root[data-ui="pop"] [class^="border-violet-"],
:root[data-ui="pop"] [class*=" border-violet-"],
:root[data-ui="pop"] [class^="border-sky-"],
:root[data-ui="pop"] [class*=" border-sky-"],
:root[data-ui="pop"] [class^="border-cyan-"],
:root[data-ui="pop"] [class*=" border-cyan-"] { border-color: var(--pp-blue) !important; }
:root[data-ui="pop"] [class*="hover:border-"]:hover,
:root[data-ui="pop"] [class*="focus:border-"]:focus { border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class~="border"] { border-width: 2px !important; }
:root[data-ui="pop"] [class~="border-t"],
:root[data-ui="pop"] [class~="border-b"],
:root[data-ui="pop"] [class~="border-l"],
:root[data-ui="pop"] [class~="border-r"],
:root[data-ui="pop"] [class~="border-y"],
:root[data-ui="pop"] [class~="border-x"] { border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] .divide-y > * + *,
:root[data-ui="pop"] [class*="divide-"] > * + * { border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class*="ring-"] { --tw-ring-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class*="focus:ring-"]:focus,
:root[data-ui="pop"] [class*="focus-visible:ring-"]:focus-visible { --tw-ring-color: var(--pp-blue) !important; }

/* ---------- depth ---------- */
:root[data-ui="pop"] [class^="shadow-sm"],
:root[data-ui="pop"] [class*=" shadow-sm"],
:root[data-ui="pop"] [class^="shadow-md"],
:root[data-ui="pop"] [class*=" shadow-md"],
:root[data-ui="pop"] [class^="shadow-lg"],
:root[data-ui="pop"] [class*=" shadow-lg"],
:root[data-ui="pop"] [class^="shadow-xl"],
:root[data-ui="pop"] [class*=" shadow-xl"],
:root[data-ui="pop"] [class^="shadow-2xl"],
:root[data-ui="pop"] [class*=" shadow-2xl"],
:root[data-ui="pop"] [class~="shadow"] { box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] [class^="shadow-xl"],
:root[data-ui="pop"] [class*=" shadow-xl"],
:root[data-ui="pop"] [class^="shadow-2xl"],
:root[data-ui="pop"] [class*=" shadow-2xl"] { box-shadow: var(--pp-shadow-lg) !important; }

/* ---------- chrome ---------- */
:root[data-ui="pop"] .glass-sidebar { background: var(--pp-paper) !important; border-right: 5px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .glass-header, :root[data-ui="pop"] .m-header { background: var(--pp-paper) !important; background-image: none !important; border-bottom: 5px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .glass-header h2, :root[data-ui="pop"] .m-header__title {
  font-family: var(--pp-display) !important; font-weight: 400 !important; font-size: 26px !important;
  letter-spacing: 0.06em !important; color: var(--pp-ink) !important;
}
:root[data-ui="pop"] .light-panel { background: transparent !important; }

/* Sidebar: section labels in bold text, nav items as hard-edged tabs. */
:root[data-ui="pop"] aside nav > p { color: var(--pp-ink) !important; font-weight: 900 !important; }
:root[data-ui="pop"] aside nav button { font-weight: 700 !important; border: 3px solid transparent !important; }
/* The active item is bg-jaguar-100 (bg-cream-100 before the UI standard). */
:root[data-ui="pop"] aside nav button[class~="bg-cream-100"], :root[data-ui="pop"] aside nav button[class~="bg-jaguar-100"] {
  background: var(--pp-yellow) !important; color: #111111 !important;
  border-color: var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
}
:root[data-ui="pop"] aside nav button[class~="bg-cream-100"] *, :root[data-ui="pop"] aside nav button[class~="bg-jaguar-100"] * { color: #111111 !important; }
:root[data-ui="pop"] aside nav button:not([class~="bg-cream-100"]):not([class~="bg-jaguar-100"]):hover { background: var(--pp-tint) !important; border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] aside h1.font-serif { font-size: 30px !important; }

/* ---------- panels & cards ---------- */
:root[data-ui="pop"] .glass-card, :root[data-ui="pop"] .glass-panel,
:root[data-ui="pop"] [class~="rounded-2xl"][class~="bg-white"], :root[data-ui="pop"] [class~="rounded-3xl"][class~="bg-white"], :root[data-ui="pop"] [class~="rounded-xl"][class~="bg-white"][class*="border"] {
  background: var(--pp-raised) !important; border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
}
:root[data-ui="pop"] .glass-panel { box-shadow: none !important; }
:root[data-ui="pop"] .us-modal {
  background: var(--pp-raised) !important; background-image: none !important;
  border: 5px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow-lg) !important;
}

/* ---------- controls ---------- */
:root[data-ui="pop"] .glass-input, :root[data-ui="pop"] .us-input, :root[data-ui="pop"] input[type="text"], :root[data-ui="pop"] input[type="email"], :root[data-ui="pop"] input[type="search"], :root[data-ui="pop"] input[type="password"],
:root[data-ui="pop"] input[type="number"], :root[data-ui="pop"] input[type="url"], :root[data-ui="pop"] input[type="date"], :root[data-ui="pop"] input[type="time"], :root[data-ui="pop"] input[type="datetime-local"],
:root[data-ui="pop"] textarea, :root[data-ui="pop"] select {
  background-color: var(--pp-raised) !important; color: var(--pp-ink) !important;
  border: 2px solid var(--pp-ink) !important; box-shadow: none !important;
}
:root[data-ui="pop"] input:focus, :root[data-ui="pop"] textarea:focus, :root[data-ui="pop"] select:focus, :root[data-ui="pop"] .glass-input:focus {
  outline: 3px solid var(--pp-blue) !important; outline-offset: 2px !important;
}
:root[data-ui="pop"] input[type="checkbox"], :root[data-ui="pop"] input[type="radio"] { accent-color: var(--pp-red); }
:root[data-ui="pop"] button:focus-visible, :root[data-ui="pop"] a:focus-visible { outline: 3px solid var(--pp-blue) !important; outline-offset: 3px !important; }

/* Buttons: anything filled red or ink, or a primary/secondary class, gets the poster button treatment. */
:root[data-ui="pop"] .us-btn--primary, :root[data-ui="pop"] .us-btn--inverse, :root[data-ui="pop"] .us-btn--danger, :root[data-ui="pop"] .canvas-btn--primary, :root[data-ui="pop"] button[class~="bg-rust-400"], :root[data-ui="pop"] button[class~="bg-rust-500"], :root[data-ui="pop"] button[class~="bg-red-500"], :root[data-ui="pop"] button[class~="bg-red-600"],
:root[data-ui="pop"] a[class~="bg-rust-400"], :root[data-ui="pop"] button[class~="bg-cream-100"]:not(aside button), :root[data-ui="pop"] button[class~="bg-jaguar-900"], :root[data-ui="pop"] button[class~="bg-rust-900"] {
  border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
  font-weight: 700 !important; transition: transform .08s ease-out, box-shadow .08s ease-out !important;
}
:root[data-ui="pop"] .us-btn--primary, :root[data-ui="pop"] .us-btn--inverse, :root[data-ui="pop"] .canvas-btn--primary { background: var(--pp-red) !important; color: var(--pp-on-red) !important; }
:root[data-ui="pop"] .us-btn--danger { background: var(--pp-raised) !important; color: var(--pp-red) !important; }
:root[data-ui="pop"] .us-btn--secondary, :root[data-ui="pop"] .us-btn--outline-dark { background: var(--pp-raised) !important; color: var(--pp-ink) !important; border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] .us-btn--primary:hover, :root[data-ui="pop"] .us-btn--inverse:hover, :root[data-ui="pop"] .us-btn--secondary:hover, :root[data-ui="pop"] .us-btn--outline-dark:hover, :root[data-ui="pop"] .us-btn--danger:hover, :root[data-ui="pop"] .canvas-btn--primary:hover, :root[data-ui="pop"] button[class~="bg-rust-400"]:hover, :root[data-ui="pop"] button[class~="bg-cream-100"]:not(aside button):hover {
  transform: translate(-1px, -1px) !important; box-shadow: 6px 6px 0 0 var(--pp-ink) !important;
}
:root[data-ui="pop"] .us-btn--primary:active, :root[data-ui="pop"] .us-btn--inverse:active, :root[data-ui="pop"] .us-btn--secondary:active, :root[data-ui="pop"] .us-btn--outline-dark:active, :root[data-ui="pop"] .us-btn--danger:active, :root[data-ui="pop"] .canvas-btn--primary:active, :root[data-ui="pop"] button[class~="bg-rust-400"]:active, :root[data-ui="pop"] button[class~="bg-cream-100"]:active {
  transform: translate(4px, 4px) !important; box-shadow: none !important;
}

/* ---------- badges ---------- */
:root[data-ui="pop"] .us-badge {
  border: 2px solid var(--pp-ink) !important; font-weight: 700 !important; color: var(--pp-ink) !important;
}
:root[data-ui="pop"] .us-badge { background: var(--pp-raised) !important; }
:root[data-ui="pop"] .us-badge--done { background: var(--pp-green-tint) !important; }
:root[data-ui="pop"] .us-badge--todo { background: var(--pp-blue-tint) !important; }
:root[data-ui="pop"] .us-badge--progress { background: var(--pp-yellow) !important; color: var(--pp-on-yellow) !important; }
:root[data-ui="pop"] .us-badge--danger { background: var(--pp-red) !important; color: var(--pp-on-red) !important; }
:root[data-ui="pop"] .us-count { border: 2px solid var(--pp-ink) !important; }

/* ---------- mobile shell ---------- */
:root[data-ui="pop"] .m-tab { color: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-tab--active .m-tab__icon { background: var(--pp-yellow) !important; border: 3px solid var(--pp-ink) !important; color: #111111 !important; }
:root[data-ui="pop"] .m-tab__badge { background: var(--pp-red) !important; color: var(--pp-on-red) !important; border: 2px solid var(--pp-ink) !important; }

/* ---------- the one decorative touch: Ben-Day dots behind the content sheet ---------- */
:root[data-ui="pop"] main {
  background-color: var(--pp-paper) !important;
  background-image:
    radial-gradient(circle, rgba(28, 88, 181, 0.10) 30%, transparent 32%),
    radial-gradient(circle, rgba(28, 88, 181, 0.10) 30%, transparent 32%) !important;
  background-size: 14px 14px !important;
  background-position: 0 0, 7px 7px !important;
}
:root[data-ui="pop"][data-pop-theme="night"] main {
  background-image:
    radial-gradient(circle, rgba(106, 154, 242, 0.10) 30%, transparent 32%),
    radial-gradient(circle, rgba(106, 154, 242, 0.10) 30%, transparent 32%) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-ui="pop"] * { transition: none !important; }
}

/* Settings → Appearance: the chosen style reads as chosen. */
:root[data-ui="pop"] .ui-style-option { border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; background: var(--pp-raised) !important; }
:root[data-ui="pop"] .ui-style-option.is-selected { box-shadow: 6px 6px 0 0 var(--pp-red) !important; }
:root[data-ui="pop"] #brand-splash { background: var(--pp-paper) !important; }
:root[data-ui="pop"] #brand-splash img { filter: brightness(0); }
:root[data-ui="pop"][data-pop-theme="night"] #brand-splash img { filter: none; }

/* ---------- the app's own components (styles.css) ----------
 * These carry hand-written colours rather than Tailwind classes. Their text and
 * lines become ink, their white surfaces become the raised paper, so they read
 * in Night as well. Documents (.doc-page, Drive viewers) stay white paper on
 * purpose, like a printed sheet. */
:root[data-ui="pop"] [class^="gd-"], :root[data-ui="pop"] [class*=" gd-"],
:root[data-ui="pop"] [class^="chat-"], :root[data-ui="pop"] [class*=" chat-"],
:root[data-ui="pop"] [class^="donna-"], :root[data-ui="pop"] [class*=" donna-"],
:root[data-ui="pop"] [class^="kanban-"], :root[data-ui="pop"] [class*=" kanban-"],
:root[data-ui="pop"] [class^="floating-"], :root[data-ui="pop"] [class*=" floating-"],
:root[data-ui="pop"] [class^="daily-"], :root[data-ui="pop"] [class*=" daily-"],
:root[data-ui="pop"] [class^="canvas-"], :root[data-ui="pop"] [class*=" canvas-"],
:root[data-ui="pop"] [class^="node-"], :root[data-ui="pop"] [class*=" node-"],
:root[data-ui="pop"] [class^="artifact-"], :root[data-ui="pop"] [class*=" artifact-"],
:root[data-ui="pop"] [class^="m-app"], :root[data-ui="pop"] [class*=" m-app"],
:root[data-ui="pop"] [class^="m-ask"], :root[data-ui="pop"] [class*=" m-ask"],
:root[data-ui="pop"] [class^="m-avatar"], :root[data-ui="pop"] [class*=" m-avatar"],
:root[data-ui="pop"] [class^="m-brief"], :root[data-ui="pop"] [class*=" m-brief"],
:root[data-ui="pop"] [class^="m-header"], :root[data-ui="pop"] [class*=" m-header"],
:root[data-ui="pop"] [class^="m-home"], :root[data-ui="pop"] [class*=" m-home"],
:root[data-ui="pop"] [class^="m-list"], :root[data-ui="pop"] [class*=" m-list"],
:root[data-ui="pop"] [class^="m-row"], :root[data-ui="pop"] [class*=" m-row"],
:root[data-ui="pop"] [class^="m-section"], :root[data-ui="pop"] [class*=" m-section"],
:root[data-ui="pop"] [class^="m-sheet"], :root[data-ui="pop"] [class*=" m-sheet"],
:root[data-ui="pop"] [class^="m-tab"], :root[data-ui="pop"] [class*=" m-tab"],
:root[data-ui="pop"] [class^="m-tile"], :root[data-ui="pop"] [class*=" m-tile"] { color: var(--pp-ink) !important; border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] [class^="gd-"]::placeholder, :root[data-ui="pop"] [class*=" gd-"]::placeholder,
:root[data-ui="pop"] [class^="chat-"]::placeholder, :root[data-ui="pop"] [class*=" chat-"]::placeholder,
:root[data-ui="pop"] [class^="donna-"]::placeholder, :root[data-ui="pop"] [class*=" donna-"]::placeholder,
:root[data-ui="pop"] [class^="kanban-"]::placeholder, :root[data-ui="pop"] [class*=" kanban-"]::placeholder,
:root[data-ui="pop"] [class^="floating-"]::placeholder, :root[data-ui="pop"] [class*=" floating-"]::placeholder,
:root[data-ui="pop"] [class^="daily-"]::placeholder, :root[data-ui="pop"] [class*=" daily-"]::placeholder,
:root[data-ui="pop"] [class^="canvas-"]::placeholder, :root[data-ui="pop"] [class*=" canvas-"]::placeholder,
:root[data-ui="pop"] [class^="node-"]::placeholder, :root[data-ui="pop"] [class*=" node-"]::placeholder,
:root[data-ui="pop"] [class^="artifact-"]::placeholder, :root[data-ui="pop"] [class*=" artifact-"]::placeholder,
:root[data-ui="pop"] [class^="m-app"]::placeholder, :root[data-ui="pop"] [class*=" m-app"]::placeholder,
:root[data-ui="pop"] [class^="m-ask"]::placeholder, :root[data-ui="pop"] [class*=" m-ask"]::placeholder,
:root[data-ui="pop"] [class^="m-avatar"]::placeholder, :root[data-ui="pop"] [class*=" m-avatar"]::placeholder,
:root[data-ui="pop"] [class^="m-brief"]::placeholder, :root[data-ui="pop"] [class*=" m-brief"]::placeholder,
:root[data-ui="pop"] [class^="m-header"]::placeholder, :root[data-ui="pop"] [class*=" m-header"]::placeholder,
:root[data-ui="pop"] [class^="m-home"]::placeholder, :root[data-ui="pop"] [class*=" m-home"]::placeholder,
:root[data-ui="pop"] [class^="m-list"]::placeholder, :root[data-ui="pop"] [class*=" m-list"]::placeholder,
:root[data-ui="pop"] [class^="m-row"]::placeholder, :root[data-ui="pop"] [class*=" m-row"]::placeholder,
:root[data-ui="pop"] [class^="m-section"]::placeholder, :root[data-ui="pop"] [class*=" m-section"]::placeholder,
:root[data-ui="pop"] [class^="m-sheet"]::placeholder, :root[data-ui="pop"] [class*=" m-sheet"]::placeholder,
:root[data-ui="pop"] [class^="m-tab"]::placeholder, :root[data-ui="pop"] [class*=" m-tab"]::placeholder,
:root[data-ui="pop"] [class^="m-tile"]::placeholder, :root[data-ui="pop"] [class*=" m-tile"]::placeholder { color: var(--pp-muted) !important; }
:root[data-ui="pop"] .light-panel .bg-gradient-to-br.from-rust-400\/10.to-transparent, :root[data-ui="pop"] [class*="bg-gradient-to-"][class*="rounded-"], :root[data-ui="pop"] .kanban-card, :root[data-ui="pop"] .kanban-filter.is-active, :root[data-ui="pop"] .floating-window, :root[data-ui="pop"] .m-avatar, :root[data-ui="pop"] .m-tile--active, :root[data-ui="pop"] .donna-steps, :root[data-ui="pop"] .donna-doc-card, :root[data-ui="pop"] .gd-card__preview, :root[data-ui="pop"] .gd-thumb, :root[data-ui="pop"] .gd-menu, :root[data-ui="pop"] .gd-modal__card, :root[data-ui="pop"] .gd-input, :root[data-ui="pop"] .gd-sheet, :root[data-ui="pop"] .chat-card, :root[data-ui="pop"] .chat-menu, :root[data-ui="pop"] .chat-embedded .donna-composer, :root[data-ui="pop"] .donna-composer--panel, :root[data-ui="pop"] .chat-plus-menu, :root[data-ui="pop"] .chat-model--open, :root[data-ui="pop"] .chat-model__row--on, :root[data-ui="pop"] .chat-chip, :root[data-ui="pop"] .chat-sent-file, :root[data-ui="pop"] .chat-drive-picker {
  background-color: var(--pp-raised) !important; background-image: none !important;
}
:root[data-ui="pop"] .chat-menu > button:hover, :root[data-ui="pop"] .donna-composer__icon:hover, :root[data-ui="pop"] .chat-plus:hover, :root[data-ui="pop"] .chat-plus-menu__item:hover, :root[data-ui="pop"] .chat-plus-menu__item:focus-visible, :root[data-ui="pop"] .chat-model:hover, :root[data-ui="pop"] button.chat-sent-file:hover, :root[data-ui="pop"] .chat-drive-picker__row:hover, :root[data-ui="pop"] .kanban-filter:hover { background-color: var(--pp-tint-2) !important; }
:root[data-ui="pop"] .chat-card, :root[data-ui="pop"] .chat-embedded .donna-composer, :root[data-ui="pop"] .donna-composer--panel, :root[data-ui="pop"] .floating-window, :root[data-ui="pop"] .kanban-card {
  border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
}
:root[data-ui="pop"] .us-menu, :root[data-ui="pop"] .chat-menu, :root[data-ui="pop"] .chat-plus-menu, :root[data-ui="pop"] .gd-menu, :root[data-ui="pop"] .chat-drive-picker { border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] .doc-page, :root[data-ui="pop"] .gd-page, :root[data-ui="pop"] .gd-viewer__frame, :root[data-ui="pop"] .gd-pdf__page, :root[data-ui="pop"] .artifact-thumb--paper { color: #111111; }

/* Kanban (todos.js / boards.js) is driven by its own variables. */
:root[data-ui="pop"] .kanban-lanes, :root[data-ui="pop"] .kanban-board, :root[data-ui="pop"] [class*="kanban"] {
  --k-ink: var(--pp-ink); --k-ink-muted: var(--pp-muted); --k-ink-faint: var(--pp-muted);
  --k-lane: var(--pp-paper); --k-lane-edge: var(--pp-ink); --k-card: var(--pp-raised);
  --k-card-edge: var(--pp-ink); --k-card-edge-hover: var(--pp-ink);
}
:root[data-ui="pop"] .kanban-lane { border: 3px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .kanban-lane[data-status="todo"]        { --k-accent: var(--pp-blue);  --k-accent-soft: var(--pp-blue-tint);  --k-accent-wash: var(--pp-blue-tint); }
:root[data-ui="pop"] .kanban-lane[data-status="in_progress"] { --k-accent: var(--pp-red);   --k-accent-soft: var(--pp-red-tint);   --k-accent-wash: var(--pp-red-tint); }
:root[data-ui="pop"] .kanban-lane[data-status="review"]      { --k-accent: var(--pp-amber); --k-accent-soft: var(--pp-yellow-tint); --k-accent-wash: var(--pp-yellow-tint); }
:root[data-ui="pop"] .kanban-lane[data-status="done"]        { --k-accent: var(--pp-green); --k-accent-soft: var(--pp-green-tint); --k-accent-wash: var(--pp-green-tint); }
:root[data-ui="pop"] .kanban-lane-title { font-family: var(--pp-display) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: .05em !important; }

/* ---------- phone shell (app.js m-* classes) ---------- */
:root[data-ui="pop"] .m-tabbar, :root[data-ui="pop"] .m-tabbar__home {
  background: var(--pp-paper) !important; background-image: none !important;
  border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
}
:root[data-ui="pop"] .m-tabbar__home { border-radius: 9999px !important; }
:root[data-ui="pop"] .m-tab { color: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-tab--active .m-tab__icon { background: var(--pp-yellow) !important; border: 2px solid var(--pp-ink) !important; color: #111111 !important; }
:root[data-ui="pop"] .m-sheet {
  background: var(--pp-paper) !important; background-image: none !important; color: var(--pp-ink) !important;
  border-top: 5px solid var(--pp-ink) !important;
}
:root[data-ui="pop"] .m-sheet__grip { background: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-sheet__name, :root[data-ui="pop"] .m-sheet__email, :root[data-ui="pop"] .m-sheet__close, :root[data-ui="pop"] .m-sheet__signout { color: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-sheet__close, :root[data-ui="pop"] .m-sheet__signout { background: var(--pp-raised) !important; border: 2px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .m-tile { background: var(--pp-raised) !important; border: 3px solid var(--pp-ink) !important; color: var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] .m-tile--active { background: var(--pp-yellow) !important; color: #111111 !important; }
:root[data-ui="pop"] .m-avatar { background: var(--pp-red) !important; color: var(--pp-on-red) !important; border: 3px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .m-home, :root[data-ui="pop"] .m-home__greeting, :root[data-ui="pop"] .m-home__summary, :root[data-ui="pop"] .m-row, :root[data-ui="pop"] .m-brief__head { color: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-home__greeting { font-family: var(--pp-display) !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: uppercase; }
:root[data-ui="pop"] .m-ask { background: var(--pp-raised) !important; border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] .m-ask .m-ask__input { background: transparent !important; border: 0 !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] .m-ask .m-ask__input:focus { outline: none !important; }
:root[data-ui="pop"] .m-ask__input::placeholder { color: var(--pp-muted) !important; }
:root[data-ui="pop"] .m-ask__send { background: var(--pp-red) !important; color: var(--pp-on-red) !important; border: 2px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .m-section__title, :root[data-ui="pop"] .m-row__meta, :root[data-ui="pop"] .m-row__chev { color: var(--pp-muted) !important; }
:root[data-ui="pop"] .m-section__link { color: var(--pp-red) !important; }
:root[data-ui="pop"] .m-list, :root[data-ui="pop"] .m-row--card, :root[data-ui="pop"] .m-brief { background: var(--pp-raised) !important; border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important; }
:root[data-ui="pop"] .m-row + .m-row { border-top: 2px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .m-row__icon--event, :root[data-ui="pop"] .m-row__icon--mail, :root[data-ui="pop"] .m-row__icon--brief { background: var(--pp-yellow) !important; color: #111111 !important; border: 2px solid var(--pp-ink) !important; }

/* Composer: one box, not a box inside a box. */
:root[data-ui="pop"] .donna-composer textarea.donna-composer__input, :root[data-ui="pop"] .donna-composer .donna-composer__input {
  border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important;
}
:root[data-ui="pop"] .donna-composer:focus-within, :root[data-ui="pop"] .donna-composer--panel:focus-within { outline: 3px solid var(--pp-blue) !important; outline-offset: 2px !important; }
:root[data-ui="pop"] .donna-composer__icon, :root[data-ui="pop"] .chat-plus { border-color: transparent !important; }
:root[data-ui="pop"] .donna-composer__icon:hover, :root[data-ui="pop"] .chat-plus:hover { border-color: var(--pp-ink) !important; }

/* ---------- dark fills ----------
   The blanket rule above turns the text of every gd-/chat-/donna-/canvas-…
   element to ink, and the Tailwind remap turns text-white to ink. Both are
   right on paper and wrong on the few surfaces that are filled dark, which
   then read ink on ink. Each of those is settled here. */

/* Ink-filled controls: keep the fill, invert the text (in Night the ink is the
   light colour and the paper the dark one, so this holds in both). */
:root[data-ui="pop"] .donna-composer__send, :root[data-ui="pop"] .chat-chip__remove,
:root[data-ui="pop"] .gd-toast { background: var(--pp-ink) !important; color: var(--pp-paper) !important; }
:root[data-ui="pop"] .donna-composer__send *, :root[data-ui="pop"] .chat-chip__remove *, :root[data-ui="pop"] .gd-toast * { color: var(--pp-paper) !important; }

/* Toolbar buttons on boards and lists: Pop's plain button, paper with an ink line. */
:root[data-ui="pop"] .canvas-btn:not(.canvas-btn--primary) {
  background: var(--pp-raised) !important; color: var(--pp-ink) !important;
  border: 3px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow) !important;
}
:root[data-ui="pop"] .canvas-btn:not(.canvas-btn--primary) * { color: var(--pp-ink) !important; }
:root[data-ui="pop"] .canvas-btn:not(.canvas-btn--primary):hover { background: var(--pp-tint-2) !important; }
:root[data-ui="pop"] .canvas-btn-badge { background: var(--pp-tint-2) !important; color: var(--pp-ink) !important; }

/* Always-dark surfaces (the file viewer's backdrop, the Claude terminal): their
   chrome stays light whatever the theme; the white sheets inside stay ink. */
:root[data-ui="pop"] .gd-viewer, :root[data-ui="pop"] .gd-viewer__bar, :root[data-ui="pop"] .gd-viewer__bar *,
:root[data-ui="pop"] .claude-box, :root[data-ui="pop"] .claude-box * { color: #fbf6e9 !important; }
:root[data-ui="pop"] .gd-viewer__text, :root[data-ui="pop"] .gd-viewer__none, :root[data-ui="pop"] .gd-viewer__none * { color: #111111 !important; }
:root[data-ui="pop"] .claude-box { background: #111111 !important; border: 5px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow-lg) !important; }

/* The cookie banner carries its colour inline; in Pop it is a plain card. */
:root[data-ui="pop"] .cookie-consent {
  background: var(--pp-raised) !important; color: var(--pp-ink) !important;
  border: 5px solid var(--pp-ink) !important; box-shadow: var(--pp-shadow-lg) !important;
}
:root[data-ui="pop"] .cookie-consent a { color: var(--pp-red) !important; }

/* Counts sit on yellow: their text follows the fill, not the theme (Night's ink is light). */
:root[data-ui="pop"] .us-count { color: var(--pp-on-yellow) !important; }

/* Smart Inbox rail: tools (compose, broom, refresh, search, filters) are
   poster buttons, the view and settings toggles stay bare until chosen, and
   whatever is on (compose, the open view, an open panel) is filled red. Its
   Classic classes are flat on purpose, so without these it reads as loose icons. */
:root[data-ui="pop"] .inbox-rail > button { color: var(--pp-ink) !important; border: 3px solid transparent !important; border-radius: 0 !important; }
:root[data-ui="pop"] .inbox-rail > button.inbox-rail__tool { background: var(--pp-raised) !important; border-color: var(--pp-ink) !important; box-shadow: 3px 3px 0 0 var(--pp-ink) !important; }
:root[data-ui="pop"] .inbox-rail > button:hover { background: var(--pp-tint-2) !important; }
:root[data-ui="pop"] .inbox-rail > button[class~="bg-jaguar-100"] { background: var(--pp-red) !important; color: var(--pp-on-red) !important; border-color: var(--pp-ink) !important; box-shadow: 3px 3px 0 0 var(--pp-ink) !important; }
:root[data-ui="pop"] .inbox-rail > button[class~="bg-jaguar-100"] * { color: var(--pp-on-red) !important; }
:root[data-ui="pop"] .inbox-rail > div { border-color: var(--pp-ink) !important; }

/* The live pull-request card (chatGitCard.js): Pop's ink border and offset shadow; the PR's own lane in blue, since yellow on white is too faint for a line and a branch name. */
:root[data-ui="pop"] .gw-card { border: 2px solid var(--pp-ink); border-radius: 0; box-shadow: var(--pp-shadow); }
:root[data-ui="pop"] .gw-lane--head { stroke: var(--pp-blue); }
:root[data-ui="pop"] .gw-dot--head { fill: var(--pp-blue); }
:root[data-ui="pop"] .gw-halo { stroke: var(--pp-blue); }
:root[data-ui="pop"] .gw-tag--head { color: var(--pp-ink); background: var(--pp-yellow-tint); }
:root[data-ui="pop"] .gw-tag, :root[data-ui="pop"] .gw-pill, :root[data-ui="pop"] .gw-chip, :root[data-ui="pop"] .gw-btn { border-radius: 0; }
:root[data-ui="pop"] .gw-btn--primary { border: 2px solid var(--pp-ink); box-shadow: 3px 3px 0 0 var(--pp-ink); }

/* ---------- the daily brief on the Chat page (chatBrief.js) ---------- */
:root[data-ui="pop"] .cbr-head__date, :root[data-ui="pop"] .cbr-deck__done b, :root[data-ui="pop"] .cbr-caption, :root[data-ui="pop"] .cbr-datechip b {
  font-family: var(--pp-display) !important; font-weight: 400 !important; letter-spacing: 0.04em; text-transform: uppercase;
}
:root[data-ui="pop"] .cbr-card, :root[data-ui="pop"] .cbr-act, :root[data-ui="pop"] .cbr-caption {
  border: 2px solid var(--pp-ink) !important; border-radius: 0 !important; box-shadow: var(--pp-shadow) !important; background: var(--pp-raised) !important;
}
:root[data-ui="pop"] .cbr-deck__stack::before, :root[data-ui="pop"] .cbr-deck__stack::after { border-color: var(--pp-ink) !important; border-radius: 0 !important; background: var(--pp-raised) !important; }
:root[data-ui="pop"] .cbr-card__body, :root[data-ui="pop"] .cbr-quote, :root[data-ui="pop"] .cbr-day__track, :root[data-ui="pop"] .cbr-datechip, :root[data-ui="pop"] .cbr-deck__done, :root[data-ui="pop"] .cbr-skel {
  border-radius: 0 !important; border-color: var(--pp-ink) !important;
}
:root[data-ui="pop"] .cbr-quote { background: var(--pp-paper) !important; border-left-width: 4px !important; }
:root[data-ui="pop"] .cbr-day__block, :root[data-ui="pop"] .cbr-day__free, :root[data-ui="pop"] .cbr-day__ghost { border-radius: 0 !important; }
:root[data-ui="pop"] .cbr-day__block--todo { background: var(--pp-yellow) !important; border-color: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-day__block--pending { background: var(--pp-raised) !important; border-color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-day__free { border-color: var(--pp-green) !important; color: var(--pp-green) !important; }
:root[data-ui="pop"] .cbr-day__now { background: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-day__label--pending { border-color: var(--pp-red) !important; color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-day__label--todo { border-color: var(--pp-ink) !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-listen, :root[data-ui="pop"] .cbr-talk, :root[data-ui="pop"] .cbr-prompt {
  border: 2px solid var(--pp-ink) !important; border-radius: 0 !important; box-shadow: 2px 2px 0 0 var(--pp-ink) !important;
}
:root[data-ui="pop"] .cbr-listen { background: var(--pp-ink) !important; color: var(--pp-paper) !important; }
:root[data-ui="pop"] .cbr-listen * { color: var(--pp-paper) !important; }
:root[data-ui="pop"] .cbr-talk, :root[data-ui="pop"] .cbr-prompt { background: var(--pp-raised) !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-talk:hover, :root[data-ui="pop"] .cbr-prompt:hover { background: var(--pp-yellow-tint) !important; }
:root[data-ui="pop"] .cbr-datechip span { background: var(--pp-ink) !important; color: var(--pp-paper) !important; }
:root[data-ui="pop"] .cbr-iconbtn { border-radius: 0 !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-iconbtn:hover:not(:disabled) { background: var(--pp-yellow-tint) !important; }
:root[data-ui="pop"] .cbr-iconbtn--danger:hover:not(:disabled) { color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-thread { border-top: 2px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-count { background: var(--pp-yellow) !important; color: #111111 !important; border: 2px solid var(--pp-ink); border-radius: 0 !important; }
:root[data-ui="pop"] .cbr-count.is-zero, :root[data-ui="pop"] .cbr-sent, :root[data-ui="pop"] .cbr-done__ok { background: var(--pp-green-tint) !important; color: var(--pp-green) !important; }
:root[data-ui="pop"] .cbr-badge, :root[data-ui="pop"] .cbr-avatar, :root[data-ui="pop"] .cbr-tick, :root[data-ui="pop"] .cbr-deck__dots i { border-radius: 0 !important; }
:root[data-ui="pop"] .cbr-badge--urgent { background: var(--pp-red-tint) !important; color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-badge--sugg { background: var(--pp-blue-tint) !important; color: var(--pp-blue) !important; }
:root[data-ui="pop"] .cbr-avatar { border: 2px solid var(--pp-ink); background: var(--pp-yellow-tint) !important; }
:root[data-ui="pop"] .cbr-draft__label, :root[data-ui="pop"] .cbr-prompts__icon { color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-rule { height: 2px; background: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-tick { border: 2px solid var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-draft { border: 2px solid var(--pp-ink) !important; border-radius: 0 !important; background: var(--pp-raised) !important; padding: 0.5rem 0.6rem !important; margin-top: 0.25rem; }
:root[data-ui="pop"] .cbr-ask { border: 2px solid var(--pp-ink) !important; border-left-width: 6px !important; border-left-color: var(--pp-red) !important; border-radius: 0 !important; background: var(--pp-yellow-tint) !important; }
:root[data-ui="pop"] .cbr-ask__head, :root[data-ui="pop"] .cbr-draft__via.is-gap { color: var(--pp-red) !important; }
:root[data-ui="pop"] .cbr-ask__opt { border: 2px solid var(--pp-ink) !important; border-radius: 0 !important; background: var(--pp-raised) !important; color: var(--pp-ink) !important; font-weight: 600; }
:root[data-ui="pop"] .cbr-ask__opt:hover:not(:disabled) { background: var(--pp-yellow) !important; color: #111111 !important; }
:root[data-ui="pop"] .cbr-ask__opt--other { border-style: dashed !important; font-weight: 500; }
:root[data-ui="pop"] .cbr-ask__input { border: 2px solid var(--pp-ink) !important; border-radius: 0 !important; background: var(--pp-raised) !important; color: var(--pp-ink) !important; }
:root[data-ui="pop"] .cbr-stakes { border: 2px solid var(--pp-red) !important; border-radius: 0 !important; background: var(--pp-red-tint) !important; color: var(--pp-red) !important; }