/* css/dark-theme.css
   HEADFACE dark mode.

   Part 1 (this block): the appearance picker (Auto / Light / Dark). It is plain UI and looks the same in both modes.
   Part 2 (after the DARK MODE marker): every rule starts with html[data-theme="dark"], so while the page is light NOTHING
   below applies and the light design is exactly what it was. js/theme-init.js sets that attribute before the first paint.

   How part 2 works: the pages are styled with Tailwind utility classes (also on elements that JavaScript creates later),
   so instead of editing hundreds of class lists each used colour class is mapped once, here, to the dark palette
   (selector [class~="bg-white"] matches an element that has that class). The utility map is generated; the component
   rules at the end are hand written. test/dark-mode-test.js fails if a page starts using a colour class that is
   neither mapped nor on its short "stays the same in dark" list. Brand purple, white-on-brand text, plan colours
   (ring, plan card) and solid status colours (progress bars, dots) are intentionally unchanged. */

/* ------------------------------------------------------------------ Part 1: appearance picker ---------------- */

.hf-theme-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f1f5f9;
}
.hf-theme-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hf-theme-seg button::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--hf-theme-icon) center / contain no-repeat;
  mask: var(--hf-theme-icon) center / contain no-repeat;
}
.hf-theme-seg [data-hf-theme-choice="system"] { --hf-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.hf-theme-seg [data-hf-theme-choice="light"] { --hf-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.hf-theme-seg [data-hf-theme-choice="dark"] { --hf-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
/* The selected choice is read from the page attribute, so a menu that was copied by the page transitions is always right. */
.hf-theme-seg button[aria-checked="true"],
html[data-theme-mode="system"] .hf-theme-seg [data-hf-theme-choice="system"],
html[data-theme-mode="light"] .hf-theme-seg [data-hf-theme-choice="light"],
html[data-theme-mode="dark"] .hf-theme-seg [data-hf-theme-choice="dark"] {
  background: #ffffff;
  color: #6136ff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.hf-theme-seg button:focus-visible { outline: 2px solid #6136ff; outline-offset: 1px; }

/* ===================================================================== DARK MODE ===================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  --hf-d-bg: #0b1020;
  --hf-d-s1: #121a2e;
  --hf-d-s2: #18223b;
  --hf-d-s3: #202b48;
  --hf-d-s4: #2a3656;
  --hf-d-line: rgba(148, 163, 184, 0.16);
  --hf-d-t1: #e8edf7;
  --hf-d-t2: #d3dbea;
  --hf-d-t3: #b4bfd3;
  --hf-d-t4: #94a1ba;
  --hf-d-t5: #8a97b1;
  --hf-d-t6: #5d6a86;
  --hf-d-brand-text: #a99bff;
  background-color: var(--hf-d-bg);
}

html[data-theme="dark"] body {
  background-color: var(--hf-d-bg);
  color: var(--hf-d-t1);
}

html[data-theme="dark"] ::selection { background: rgba(97, 54, 255, 0.45); color: #ffffff; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3a476b; }

/* form controls without their own colour classes (zero specificity: any class on the control still wins) */
:where(html[data-theme="dark"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
  background-color: var(--hf-d-s2);
  color: var(--hf-d-t1);
  border-color: var(--hf-d-line);
}
:where(html[data-theme="dark"]) :where(input, textarea)::placeholder { color: var(--hf-d-t6); }

/* ------------------------------------------------------------------ utility map (generated) ------------------- */

/* Backgrounds */
html[data-theme="dark"] [class~="bg-white"] { background-color: var(--hf-d-s1); }
html[data-theme="dark"] [class~="bg-white/95"] { background-color: rgba(18, 26, 46, 0.95); }
html[data-theme="dark"] [class~="bg-white/90"] { background-color: rgba(18, 26, 46, 0.9); }
html[data-theme="dark"] [class~="bg-white/50"] { background-color: rgba(18, 26, 46, 0.5); }
html[data-theme="dark"] [class~="bg-white/40"] { background-color: rgba(18, 26, 46, 0.4); }
html[data-theme="dark"] [class~="bg-slate-50"] { background-color: var(--hf-d-s2); }
html[data-theme="dark"] [class~="bg-slate-50/50"] { background-color: rgba(24, 34, 59, 0.5); }
html[data-theme="dark"] [class~="bg-slate-100"] { background-color: var(--hf-d-s3); }
html[data-theme="dark"] [class~="bg-slate-200"] { background-color: var(--hf-d-s4); }
html[data-theme="dark"] [class~="bg-slate-200/50"] { background-color: rgba(42, 54, 86, 0.5); }
html[data-theme="dark"] [class~="bg-slate-300"] { background-color: #3a476b; }
html[data-theme="dark"] [class~="bg-slate-400"] { background-color: #55638a; }
html[data-theme="dark"] [class~="bg-slate-900/90"] { background-color: rgba(42, 54, 86, 0.96); }
html[data-theme="dark"] [class~="bg-indigo-50"] { background-color: rgba(97, 54, 255, 0.16); }
html[data-theme="dark"] [class~="bg-indigo-100"] { background-color: rgba(97, 54, 255, 0.24); }
html[data-theme="dark"] [class~="bg-emerald-50"] { background-color: rgba(16, 185, 129, 0.13); }
html[data-theme="dark"] [class~="bg-emerald-100"] { background-color: rgba(16, 185, 129, 0.2); }
html[data-theme="dark"] [class~="bg-rose-50"] { background-color: rgba(244, 63, 94, 0.13); }
html[data-theme="dark"] [class~="bg-rose-100"] { background-color: rgba(244, 63, 94, 0.2); }
html[data-theme="dark"] [class~="bg-red-50"] { background-color: rgba(244, 63, 94, 0.13); }
html[data-theme="dark"] [class~="bg-red-100"] { background-color: rgba(244, 63, 94, 0.2); }
html[data-theme="dark"] [class~="bg-amber-50"] { background-color: rgba(245, 158, 11, 0.13); }
html[data-theme="dark"] [class~="bg-amber-100"] { background-color: rgba(245, 158, 11, 0.2); }
html[data-theme="dark"] [class~="bg-yellow-50"] { background-color: rgba(234, 179, 8, 0.13); }
html[data-theme="dark"] [class~="bg-yellow-100"] { background-color: rgba(234, 179, 8, 0.2); }
html[data-theme="dark"] [class~="bg-orange-50/70"] { background-color: rgba(249, 115, 22, 0.12); }
html[data-theme="dark"] [class~="bg-blue-50"] { background-color: rgba(59, 130, 246, 0.14); }
html[data-theme="dark"] [class~="bg-sky-50"] { background-color: rgba(14, 165, 233, 0.14); }
html[data-theme="dark"] [class~="bg-[#e8f0fe]"] { background-color: rgba(26, 115, 232, 0.18); }
html[data-theme="dark"] [class~="bg-[#F5F5F7]"] { background-color: var(--hf-d-bg); }

/* Hover backgrounds */
html[data-theme="dark"] [class~="hover:bg-slate-50"]:hover { background-color: var(--hf-d-s3); }
html[data-theme="dark"] [class~="hover:bg-slate-100"]:hover { background-color: var(--hf-d-s4); }
html[data-theme="dark"] [class~="hover:bg-slate-100/60"]:hover { background-color: rgba(42, 54, 86, 0.6); }
html[data-theme="dark"] [class~="hover:bg-slate-200"]:hover { background-color: #36436a; }
html[data-theme="dark"] [class~="hover:bg-indigo-50"]:hover { background-color: rgba(97, 54, 255, 0.22); }
html[data-theme="dark"] [class~="hover:bg-indigo-100"]:hover { background-color: rgba(97, 54, 255, 0.3); }
html[data-theme="dark"] [class~="hover:bg-rose-50"]:hover { background-color: rgba(244, 63, 94, 0.18); }
html[data-theme="dark"] [class~="hover:bg-orange-50"]:hover { background-color: rgba(249, 115, 22, 0.16); }
html[data-theme="dark"] [class~="hover:bg-purple-50"]:hover { background-color: rgba(168, 85, 247, 0.16); }
html[data-theme="dark"] [class~="hover:bg-teal-50"]:hover { background-color: rgba(20, 184, 166, 0.16); }
html[data-theme="dark"] [class~="hover:bg-blue-100"]:hover { background-color: rgba(59, 130, 246, 0.24); }
html[data-theme="dark"] [class~="hover:bg-emerald-100"]:hover { background-color: rgba(16, 185, 129, 0.26); }
html[data-theme="dark"] [class~="hover:bg-[#e8f0fe]"]:hover { background-color: rgba(26, 115, 232, 0.26); }
html[data-theme="dark"] [class~="active:bg-slate-100"]:active { background-color: var(--hf-d-s4); }
html[data-theme="dark"] [class~="focus-within:bg-white"]:focus-within { background-color: var(--hf-d-s1); }

/* Borders */
html[data-theme="dark"] [class~="border-slate-50"] { border-color: rgba(148, 163, 184, 0.1); }
html[data-theme="dark"] [class~="border-slate-100"] { border-color: rgba(148, 163, 184, 0.12); }
html[data-theme="dark"] [class~="border-slate-100/80"] { border-color: rgba(148, 163, 184, 0.12); }
html[data-theme="dark"] [class~="border-slate-200"] { border-color: rgba(148, 163, 184, 0.18); }
html[data-theme="dark"] [class~="border-slate-200/60"] { border-color: rgba(148, 163, 184, 0.15); }
html[data-theme="dark"] [class~="border-slate-200/70"] { border-color: rgba(148, 163, 184, 0.15); }
html[data-theme="dark"] [class~="border-slate-200/80"] { border-color: rgba(148, 163, 184, 0.16); }
html[data-theme="dark"] [class~="border-slate-300"] { border-color: rgba(148, 163, 184, 0.28); }
html[data-theme="dark"] [class~="border-indigo-100"] { border-color: rgba(129, 140, 248, 0.28); }
html[data-theme="dark"] [class~="border-indigo-200/50"] { border-color: rgba(129, 140, 248, 0.25); }
html[data-theme="dark"] [class~="border-emerald-100"] { border-color: rgba(52, 211, 153, 0.26); }
html[data-theme="dark"] [class~="border-emerald-200"] { border-color: rgba(52, 211, 153, 0.3); }
html[data-theme="dark"] [class~="border-rose-100"] { border-color: rgba(251, 113, 133, 0.26); }
html[data-theme="dark"] [class~="border-rose-200"] { border-color: rgba(251, 113, 133, 0.3); }
html[data-theme="dark"] [class~="border-rose-200/50"] { border-color: rgba(251, 113, 133, 0.24); }
html[data-theme="dark"] [class~="border-red-200"] { border-color: rgba(248, 113, 113, 0.3); }
html[data-theme="dark"] [class~="border-amber-100"] { border-color: rgba(251, 191, 36, 0.26); }
html[data-theme="dark"] [class~="border-amber-200"] { border-color: rgba(251, 191, 36, 0.3); }
html[data-theme="dark"] [class~="border-amber-200/50"] { border-color: rgba(251, 191, 36, 0.24); }
html[data-theme="dark"] [class~="border-yellow-100"] { border-color: rgba(250, 204, 21, 0.26); }
html[data-theme="dark"] [class~="border-yellow-200/50"] { border-color: rgba(250, 204, 21, 0.24); }
html[data-theme="dark"] [class~="border-orange-200/80"] { border-color: rgba(251, 146, 60, 0.3); }
html[data-theme="dark"] [class~="border-blue-200"] { border-color: rgba(96, 165, 250, 0.3); }
html[data-theme="dark"] [class~="border-blue-300"] { border-color: rgba(96, 165, 250, 0.4); }
html[data-theme="dark"] [class~="border-sky-100"] { border-color: rgba(56, 189, 248, 0.26); }
html[data-theme="dark"] [class~="hover:border-slate-300"]:hover { border-color: rgba(148, 163, 184, 0.34); }
html[data-theme="dark"] [class~="hover:border-amber-200"]:hover { border-color: rgba(251, 191, 36, 0.4); }
html[data-theme="dark"] [class~="hover:border-blue-300"]:hover { border-color: rgba(96, 165, 250, 0.5); }
html[data-theme="dark"] [class~="focus-within:border-blue-300"]:focus-within { border-color: rgba(96, 165, 250, 0.5); }
html[data-theme="dark"] .group:hover [class~="group-hover:border-brand/30"] { border-color: rgba(129, 140, 248, 0.4); }

/* Text */
html[data-theme="dark"] [class~="text-slate-900"] { color: var(--hf-d-t1); }
html[data-theme="dark"] [class~="text-slate-800"] { color: var(--hf-d-t1); }
html[data-theme="dark"] [class~="text-slate-700"] { color: var(--hf-d-t2); }
html[data-theme="dark"] [class~="text-slate-600"] { color: var(--hf-d-t3); }
html[data-theme="dark"] [class~="text-slate-500"] { color: var(--hf-d-t4); }
html[data-theme="dark"] [class~="text-slate-400"] { color: var(--hf-d-t5); }
html[data-theme="dark"] [class~="text-slate-300"] { color: var(--hf-d-t6); }
html[data-theme="dark"] [class~="text-brand"] { color: var(--hf-d-brand-text); }
html[data-theme="dark"] [class~="text-emerald-400"] { color: #34d399; }
html[data-theme="dark"] [class~="text-emerald-500"] { color: #34d399; }
html[data-theme="dark"] [class~="text-emerald-600"] { color: #34d399; }
html[data-theme="dark"] [class~="text-emerald-700"] { color: #34d399; }
html[data-theme="dark"] [class~="text-emerald-500/70"] { color: rgba(52, 211, 153, 0.7); }
html[data-theme="dark"] [class~="text-rose-400"] { color: #fb7185; }
html[data-theme="dark"] [class~="text-rose-500"] { color: #fb7185; }
html[data-theme="dark"] [class~="text-rose-600"] { color: #fb7185; }
html[data-theme="dark"] [class~="text-rose-700"] { color: #fda4af; }
html[data-theme="dark"] [class~="text-red-500"] { color: #f87171; }
html[data-theme="dark"] [class~="text-red-600"] { color: #f87171; }
html[data-theme="dark"] [class~="text-red-500/70"] { color: rgba(248, 113, 113, 0.7); }
html[data-theme="dark"] [class~="text-amber-500"] { color: #fbbf24; }
html[data-theme="dark"] [class~="text-amber-600"] { color: #fbbf24; }
html[data-theme="dark"] [class~="text-amber-700"] { color: #fbbf24; }
html[data-theme="dark"] [class~="text-amber-800"] { color: #fcd34d; }
html[data-theme="dark"] [class~="text-yellow-600"] { color: #facc15; }
html[data-theme="dark"] [class~="text-orange-400"] { color: #fb923c; }
html[data-theme="dark"] [class~="text-orange-500"] { color: #fb923c; }
html[data-theme="dark"] [class~="text-blue-500"] { color: #60a5fa; }
html[data-theme="dark"] [class~="text-blue-600"] { color: #60a5fa; }
html[data-theme="dark"] [class~="text-blue-700"] { color: #93c5fd; }
html[data-theme="dark"] [class~="text-sky-500"] { color: #38bdf8; }
html[data-theme="dark"] [class~="text-sky-600"] { color: #38bdf8; }
html[data-theme="dark"] [class~="text-teal-500"] { color: #2dd4bf; }
html[data-theme="dark"] [class~="text-purple-500"] { color: #c084fc; }
html[data-theme="dark"] [class~="text-indigo-500"] { color: #a5b4fc; }
html[data-theme="dark"] [class~="text-indigo-600"] { color: #a5b4fc; }
html[data-theme="dark"] [class~="hover:text-slate-800"]:hover { color: var(--hf-d-t1); }
html[data-theme="dark"] [class~="hover:text-slate-700"]:hover { color: var(--hf-d-t2); }
html[data-theme="dark"] [class~="hover:text-slate-600"]:hover { color: var(--hf-d-t3); }
html[data-theme="dark"] [class~="hover:text-slate-400"]:hover { color: var(--hf-d-t5); }
html[data-theme="dark"] [class~="hover:text-brand"]:hover { color: var(--hf-d-brand-text); }
html[data-theme="dark"] [class~="hover:text-orange-500"]:hover { color: #fb923c; }
html[data-theme="dark"] [class~="hover:text-rose-600"]:hover { color: #fda4af; }
html[data-theme="dark"] [class~="hover:text-rose-500"]:hover { color: #fda4af; }
html[data-theme="dark"] [class~="hover:text-rose-400"]:hover { color: #fda4af; }
html[data-theme="dark"] [class~="hover:text-red-500"]:hover { color: #fca5a5; }
html[data-theme="dark"] [class~="hover:text-emerald-500"]:hover { color: #6ee7b7; }
html[data-theme="dark"] [class~="hover:text-blue-500"]:hover { color: #93c5fd; }
html[data-theme="dark"] .group:hover [class~="group-hover:text-brand"] { color: var(--hf-d-brand-text); }
html[data-theme="dark"] .group:hover [class~="group-hover:text-slate-700"] { color: var(--hf-d-t2); }
html[data-theme="dark"] [class~="placeholder:text-slate-400"]::placeholder { color: var(--hf-d-t6); }

/* Hover / focus utilities without a dark mapping, restated so they still win over the mapped base colour */
html[data-theme="dark"] [class~="hover:text-white"]:hover { color: #ffffff; }
html[data-theme="dark"] [class~="hover:bg-indigo-600"]:hover { background-color: #4f46e5; }
html[data-theme="dark"] [class~="hover:bg-brand"]:hover { background-color: #6136ff; }
html[data-theme="dark"] [class~="hover:bg-rose-500"]:hover { background-color: #f43f5e; }
html[data-theme="dark"] [class~="hover:bg-blue-600"]:hover { background-color: #2563eb; }
html[data-theme="dark"] [class~="hover:bg-blue-700"]:hover { background-color: #1d4ed8; }
html[data-theme="dark"] [class~="hover:bg-amber-600"]:hover { background-color: #d97706; }
html[data-theme="dark"] [class~="hover:bg-white/20"]:hover { background-color: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] [class~="hover:bg-white/25"]:hover { background-color: rgba(255, 255, 255, 0.25); }
html[data-theme="dark"] [class~="hover:bg-white/30"]:hover { background-color: rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] [class~="hover:bg-orange-500/10"]:hover { background-color: rgba(249, 115, 22, 0.1); }
html[data-theme="dark"] [class~="hover:border-brand"]:hover { border-color: #6136ff; }
html[data-theme="dark"] [class~="hover:border-brand/30"]:hover { border-color: rgba(97, 54, 255, 0.3); }
html[data-theme="dark"] [class~="hover:border-brand/50"]:hover { border-color: rgba(97, 54, 255, 0.5); }
html[data-theme="dark"] [class~="hover:border-rose-500"]:hover { border-color: #f43f5e; }
html[data-theme="dark"] [class~="focus:border-brand"]:focus { border-color: #6136ff; }

/* ------------------------------------------------------------------ components ------------------------------- */

/* Profile card back: the QR code keeps a white tile (a dark quiet zone makes scanners fail). The FREE card front turns
   into a dark surface through the utility map; PLUS / MAX cards keep their plan gradients (plan-theme.css is more specific). */
html[data-theme="dark"] [data-hf-card-back] [class~="bg-white"],
html[data-theme="dark"] [data-hf-card-back] #qrcode { background-color: #ffffff; }

/* Page-level styles that carry their own colours (the Lynx glass buttons are written with !important) */
html[data-theme="dark"] .glass-btn { background-color: var(--hf-d-s2) !important; border-color: var(--hf-d-line) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; }
html[data-theme="dark"] .glass-btn:hover { background-color: var(--hf-d-s3) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important; }
html[data-theme="dark"] .mesh-overlay { background-color: rgba(11, 16, 32, 0.82) !important; }
html[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #3a476b; }
html[data-theme="dark"] .spinner { border-color: rgba(232, 237, 247, 0.2); }

/* Plan tag in the header menu */
html[data-theme="dark"] .hf-plan-tag { background: var(--hf-d-s3); border-color: rgba(148, 163, 184, 0.3); color: var(--hf-d-t3); }

/* Appearance picker */
html[data-theme="dark"] .hf-theme-seg { background: var(--hf-d-s2); border-color: var(--hf-d-line); }
html[data-theme="dark"] .hf-theme-seg button { color: var(--hf-d-t4); }
html[data-theme="dark"] .hf-theme-seg button[aria-checked="true"],
html[data-theme="dark"][data-theme-mode="system"] .hf-theme-seg [data-hf-theme-choice="system"],
html[data-theme="dark"][data-theme-mode="light"] .hf-theme-seg [data-hf-theme-choice="light"],
html[data-theme="dark"][data-theme-mode="dark"] .hf-theme-seg [data-hf-theme-choice="dark"] { background: var(--hf-d-s4); color: var(--hf-d-brand-text); box-shadow: none; }

/* Profile picture sheet and pencil (css/plan-theme.css) */
html[data-theme="dark"] .hf-avatar-edit { background: var(--hf-d-s3); border-color: var(--hf-d-line); color: var(--hf-d-brand-text); }
html[data-theme="dark"] .hf-avatar-edit:hover { background: var(--hf-d-s4); }
html[data-theme="dark"] .hf-pk-overlay { background: rgba(3, 6, 18, 0.66); }
html[data-theme="dark"] .hf-pk-sheet { background: var(--hf-d-s1); color: var(--hf-d-t1); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .hf-pk-title { color: var(--hf-d-t1); }
html[data-theme="dark"] .hf-pk-close { background: var(--hf-d-s3); color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-close:hover { background: var(--hf-d-s4); }
html[data-theme="dark"] .hf-pk-stage img { background: var(--hf-d-s2); border-color: var(--hf-d-s1); }
html[data-theme="dark"] .hf-pk-tabs { background: var(--hf-d-s2); }
html[data-theme="dark"] .hf-pk-tab { color: var(--hf-d-t4); }
html[data-theme="dark"] .hf-pk-tab[aria-selected="true"] { background: var(--hf-d-s4); color: var(--hf-d-brand-text); box-shadow: none; }
html[data-theme="dark"] .hf-pk-tab.is-locked { color: var(--hf-d-t5); }
html[data-theme="dark"] .hf-pk-hint { color: var(--hf-d-t4); }
html[data-theme="dark"] .hf-pk-label { color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-item { background: var(--hf-d-s3); }
html[data-theme="dark"] .hf-pk-item[aria-pressed="true"] { border-color: var(--hf-d-brand-text); }
html[data-theme="dark"] .hf-pk-item[aria-pressed="true"]::after { border-color: var(--hf-d-s1); }
html[data-theme="dark"] .hf-pk-item.is-pending::before { background: rgba(18, 26, 46, 0.78); border-color: rgba(169, 155, 255, 0.3); border-top-color: var(--hf-d-brand-text); }
html[data-theme="dark"] .hf-pk-chip { background: var(--hf-d-s2); border-color: var(--hf-d-line); color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-chip[aria-pressed="true"] { background: rgba(97, 54, 255, 0.22); border-color: var(--hf-d-brand-text); color: var(--hf-d-brand-text); }
html[data-theme="dark"] .hf-pk-sw { border-color: var(--hf-d-s1); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35); }
html[data-theme="dark"] .hf-pk-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--hf-d-brand-text); }
html[data-theme="dark"] .hf-pk-input,
html[data-theme="dark"] .hf-pk-select { background: var(--hf-d-s2); border-color: var(--hf-d-line); color: var(--hf-d-t1); }
html[data-theme="dark"] .hf-pk-group > span { color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-step { background: var(--hf-d-s2); border-color: var(--hf-d-line); color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-btn--ghost { background: var(--hf-d-s3); color: var(--hf-d-t2); }
html[data-theme="dark"] .hf-pk-btn--danger { background: rgba(244, 63, 94, 0.14); border-color: rgba(251, 113, 133, 0.3); color: #fb7185; }
html[data-theme="dark"] .hf-pk-msg.is-error { color: #fb7185; }
html[data-theme="dark"] .hf-pk-locked p { color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-current { border-color: var(--hf-d-line); }
html[data-theme="dark"] .hf-pk-current img { background: var(--hf-d-s3); }
html[data-theme="dark"] .hf-pk-current span { color: var(--hf-d-t3); }
html[data-theme="dark"] .hf-pk-preview { background: linear-gradient(var(--hf-d-s1) 82%, rgba(18, 26, 46, 0)); }
html[data-theme="dark"] .hf-pk-preview img { background: var(--hf-d-s3); border-color: var(--hf-d-s1); }