/* KPR shared appearance — KPR Finance's theme packs for every KPR app.

   Load it in <head>, before the app's own CSS, and set the attributes before
   first paint (the snippet in README.md does both from the shared cookies):

     <html data-kpr-themed data-theme="light|dark" data-kpr-pack="default|
           ledger|heirloom|minimalist|glass|2050" data-kpr-motion="calm"?>

   kpr-core keeps those attributes in step with the person's choice in every
   app and on every device (KPR.setAppearance / the Appearance window).

   The packs only define --kpr-* tokens. An app maps its own variables onto
   them, e.g.

     :root[data-kpr-pack] { --bg: var(--kpr-bg); --card: var(--kpr-card); … }

   Tokens:
     --kpr-bg          page              --kpr-card     cards, panels, menus
     --kpr-side        sidebars          --kpr-alt      raised / hover surface
     --kpr-alt2        a step further    --kpr-glass    see-through bars (blur)
     --kpr-border      hairlines         --kpr-border2  stronger lines
     --kpr-ink         text              --kpr-ink2     secondary text
     --kpr-muted       quiet text        --kpr-accent   brand / buttons
     --kpr-accent2     second accent     --kpr-on-accent text on the accent
     --kpr-accent-soft accent tint       --kpr-ok / --kpr-warn / --kpr-bad
     --kpr-shadow      card shadow       --kpr-font / --kpr-font-head /
     --kpr-font-display / --kpr-font-num --kpr-canvas   Glass / 2050 backdrop

   Each pack below copies KPR Finance's own values (src/Finance app/
   index.html, the THEME PACK blocks); keep them in step when Finance's change. */

/* ---------- Default — warm neutral, indigo (Finance's default) ---------- */
:root, :root[data-kpr-pack="default"] {
  --kpr-bg: oklch(0.965 0.004 95);
  --kpr-side: oklch(0.98 0.003 95);
  --kpr-card: oklch(1 0 0);
  --kpr-alt: oklch(0.975 0.003 95);
  --kpr-alt2: oklch(0.945 0.005 265);
  --kpr-glass: oklch(0.985 0.003 95 / 0.85);
  --kpr-border: oklch(0.9 0.005 265);
  --kpr-border2: oklch(0.86 0.006 265);
  --kpr-ink: oklch(0.22 0.015 265);
  --kpr-ink2: oklch(0.38 0.014 265);
  --kpr-muted: oklch(0.55 0.012 265);
  --kpr-accent: oklch(0.47 0.15 272);
  --kpr-accent2: oklch(0.55 0.15 272);
  --kpr-on-accent: #ffffff;
  --kpr-accent-soft: oklch(0.47 0.15 272 / 0.1);
  --kpr-ok: oklch(0.5 0.11 155);
  --kpr-warn: oklch(0.62 0.13 70);
  --kpr-bad: oklch(0.55 0.16 22);
  --kpr-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -14px rgba(16,24,40,.16);
  --kpr-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kpr-font-head: "Geist", "Inter", -apple-system, sans-serif;
  --kpr-font-display: var(--kpr-font-head);
  --kpr-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kpr-canvas: none;
  --kpr-stripe: none;
}
:root[data-theme="dark"], :root[data-kpr-pack="default"][data-theme="dark"] {
  --kpr-bg: oklch(0.17 0.012 265);
  --kpr-side: oklch(0.19 0.012 265);
  --kpr-card: oklch(0.21 0.012 265);
  --kpr-alt: oklch(0.25 0.012 265);
  --kpr-alt2: oklch(0.29 0.012 265);
  --kpr-glass: oklch(0.19 0.012 265 / 0.85);
  --kpr-border: oklch(0.28 0.012 265);
  --kpr-border2: oklch(0.34 0.012 265);
  --kpr-ink: oklch(0.95 0.004 95);
  --kpr-ink2: oklch(0.78 0.01 265);
  --kpr-muted: oklch(0.6 0.012 265);
  --kpr-accent: oklch(0.68 0.14 272);
  --kpr-accent2: oklch(0.74 0.13 272);
  --kpr-on-accent: oklch(0.17 0.012 265);
  --kpr-accent-soft: oklch(0.68 0.14 272 / 0.16);
  --kpr-ok: oklch(0.72 0.13 155);
  --kpr-warn: oklch(0.8 0.13 75);
  --kpr-bad: oklch(0.68 0.16 22);
  --kpr-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(0,0,0,.7);
}

/* ---------- Ledger — the classic indigo look ---------- */
:root[data-kpr-pack="ledger"] {
  --kpr-bg: #f5f6f8; --kpr-side: #fafbfc; --kpr-card: #ffffff; --kpr-alt: #f3f4f8; --kpr-alt2: #e9ebf1;
  --kpr-glass: rgba(255,255,255,.85);
  --kpr-border: #e8eaef; --kpr-border2: #d6dae2;
  --kpr-ink: #1a1d23; --kpr-ink2: #4a4f5c; --kpr-muted: #8b909c;
  --kpr-accent: #4f46e5; --kpr-accent2: #6366f1; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(79,70,229,.1);
  --kpr-ok: #0e9f6e; --kpr-warn: #c2740c; --kpr-bad: #e11d48;
  --kpr-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.14);
  --kpr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kpr-font-head: "Manrope", "Inter", sans-serif;
  --kpr-font-display: var(--kpr-font-head);
  --kpr-font-num: "JetBrains Mono", "Inter", monospace;
  --kpr-canvas: none; --kpr-stripe: none;
}
:root[data-kpr-pack="ledger"][data-theme="dark"] {
  --kpr-bg: #0e1017; --kpr-side: #12141c; --kpr-card: #171922; --kpr-alt: #1e212c; --kpr-alt2: #262a37;
  --kpr-glass: rgba(14,16,23,.85);
  --kpr-border: #282b36; --kpr-border2: #363a47;
  --kpr-ink: #f4f5f8; --kpr-ink2: #c9cdd6; --kpr-muted: #8b909c;
  --kpr-accent: #818cf8; --kpr-accent2: #6366f1; --kpr-on-accent: #0e1017; --kpr-accent-soft: rgba(129,140,248,.16);
  --kpr-ok: #34d399; --kpr-warn: #fbbf24; --kpr-bad: #fb7185;
  --kpr-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(0,0,0,.7);
}

/* ---------- Heirloom — cream paper, turquoise ink, print stripe ---------- */
:root[data-kpr-pack="heirloom"] {
  --kpr-bg: #f3e9d2; --kpr-side: #f7efdc; --kpr-card: #fcf6e8; --kpr-alt: #efe3c6; --kpr-alt2: #e7d8b5;
  --kpr-glass: rgba(243,233,210,.9);
  --kpr-border: #e3d4b2; --kpr-border2: #d2bd92;
  --kpr-ink: #2b211b; --kpr-ink2: #5c4838; --kpr-muted: #8a7459;
  --kpr-accent: #1f6f6a; --kpr-accent2: #27857e; --kpr-on-accent: #fcf6e8; --kpr-accent-soft: rgba(31,111,106,.12);
  --kpr-ok: #4f7a26; --kpr-warn: #b7791f; --kpr-bad: #b8392a;
  --kpr-shadow: 0 1px 0 rgba(43,33,27,.06), 0 8px 22px -14px rgba(43,33,27,.25);
  --kpr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kpr-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --kpr-font-display: var(--kpr-font-head);
  --kpr-font-num: "JetBrains Mono", "Inter", monospace;
  --kpr-canvas: none;
  --kpr-stripe: linear-gradient(90deg, #dfa42e 0 25%, #d9692b 25% 50%, #bf3f2b 50% 75%, #1f6f6a 75% 100%);
}
:root[data-kpr-pack="heirloom"][data-theme="dark"] {
  --kpr-bg: #1c1511; --kpr-side: #211914; --kpr-card: #271d17; --kpr-alt: #31251d; --kpr-alt2: #3a2c22;
  --kpr-glass: rgba(28,21,17,.9);
  --kpr-border: #3c2f25; --kpr-border2: #4e3d30;
  --kpr-ink: #f4e7c9; --kpr-ink2: #d3c09c; --kpr-muted: #a08b6e;
  --kpr-accent: #3f9e94; --kpr-accent2: #4fb0a5; --kpr-on-accent: #1c1511; --kpr-accent-soft: rgba(63,158,148,.16);
  --kpr-ok: #a2c25b; --kpr-warn: #ebb446; --kpr-bad: #ef7b5f;
  --kpr-shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 40px -18px rgba(0,0,0,.75);
  --kpr-stripe: linear-gradient(90deg, #e8b243 0 25%, #e57d3e 25% 50%, #d6553d 50% 75%, #3c9d95 75% 100%);
}

/* ---------- Minimalist — Swiss black & white, hairlines ---------- */
:root[data-kpr-pack="minimalist"] {
  --kpr-bg: #f7f7f5; --kpr-side: #fbfbfa; --kpr-card: #ffffff; --kpr-alt: #f1f1ee; --kpr-alt2: #e8e8e4;
  --kpr-glass: rgba(247,247,245,.82);
  --kpr-border: #e9e8e4; --kpr-border2: #d6d5cf;
  --kpr-ink: #1c1c1a; --kpr-ink2: #57574f; --kpr-muted: #8f8f86;
  --kpr-accent: #2b2b27; --kpr-accent2: #3a3a35; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(43,43,39,.07);
  --kpr-ok: #4a8f6b; --kpr-warn: #b0894e; --kpr-bad: #b5605c;
  --kpr-shadow: none;
  --kpr-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kpr-font-head: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kpr-font-display: var(--kpr-font-head);
  --kpr-font-num: "JetBrains Mono", "Inter", monospace;
  --kpr-canvas: none; --kpr-stripe: none;
}
:root[data-kpr-pack="minimalist"][data-theme="dark"] {
  --kpr-bg: #191917; --kpr-side: #1e1e1c; --kpr-card: #232320; --kpr-alt: #2b2b28; --kpr-alt2: #343430;
  --kpr-glass: rgba(25,25,23,.82);
  --kpr-border: #33322e; --kpr-border2: #413f3a;
  --kpr-ink: #f0efe9; --kpr-ink2: #b7b6ad; --kpr-muted: #84837b;
  --kpr-accent: #e9e8e1; --kpr-accent2: #d7d6cd; --kpr-on-accent: #191917; --kpr-accent-soft: rgba(233,232,225,.1);
  --kpr-ok: #6bbf95; --kpr-warn: #d6b06a; --kpr-bad: #d98a86;
  --kpr-shadow: none;
}

/* ---------- Glass — iOS-style glass over a soft colour field ---------- */
:root[data-kpr-pack="glass"] {
  --kpr-bg: #e9ecf5; --kpr-side: rgba(248,249,252,.82); --kpr-card: #f8f9fc; --kpr-alt: #eef0f6; --kpr-alt2: #e3e6ef;
  --kpr-glass: rgba(248,249,252,.7);
  --kpr-border: rgba(60,60,67,.14); --kpr-border2: rgba(60,60,67,.24);
  --kpr-ink: #12141c; --kpr-ink2: #3c4150; --kpr-muted: #5d6273;
  --kpr-accent: #4f46e5; --kpr-accent2: #6366f1; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(79,70,229,.12);
  --kpr-ok: #0f9d63; --kpr-warn: #c2740c; --kpr-bad: #e0294f;
  --kpr-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(30,35,80,.08);
  --kpr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", "Segoe UI", Roboto, sans-serif;
  --kpr-font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Segoe UI", sans-serif;
  --kpr-font-display: var(--kpr-font-head);
  --kpr-font-num: "JetBrains Mono", ui-monospace, monospace;
  --kpr-stripe: none;
  --kpr-canvas:
    radial-gradient(45% 35% at 8% 4%, rgba(124,120,255,.55), transparent 70%),
    radial-gradient(40% 32% at 100% 38%, rgba(60,200,220,.42), transparent 70%),
    radial-gradient(45% 35% at 0% 80%, rgba(255,180,140,.5), transparent 70%),
    radial-gradient(38% 30% at 96% 100%, rgba(245,143,187,.4), transparent 70%);
}
:root[data-kpr-pack="glass"][data-theme="dark"] {
  --kpr-bg: #07080d; --kpr-side: rgba(22,24,31,.82); --kpr-card: #16181f; --kpr-alt: #1e2029; --kpr-alt2: #272a35;
  --kpr-glass: rgba(22,24,31,.7);
  --kpr-border: rgba(255,255,255,.1); --kpr-border2: rgba(255,255,255,.18);
  --kpr-ink: #f3f4f8; --kpr-ink2: #c9ccd6; --kpr-muted: #9ea3b2;
  --kpr-accent: #6f68ff; --kpr-accent2: #a5a2ff; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(111,104,255,.18);
  --kpr-ok: #34d399; --kpr-warn: #fbbf24; --kpr-bad: #fb7185;
  --kpr-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.35);
  --kpr-canvas:
    radial-gradient(45% 35% at 8% 4%, rgba(67,56,202,.7), transparent 70%),
    radial-gradient(40% 32% at 100% 38%, rgba(14,116,144,.6), transparent 70%),
    radial-gradient(45% 35% at 0% 80%, rgba(154,52,18,.45), transparent 70%),
    radial-gradient(38% 30% at 96% 100%, rgba(157,23,77,.55), transparent 70%);
}

/* ---------- Theme 2050 — graphic, animated future look ---------- */
:root[data-kpr-pack="2050"] {
  --kpr-bg: #f4f5fc; --kpr-side: rgba(251,251,255,.82); --kpr-card: #fbfbff; --kpr-alt: #eceefb; --kpr-alt2: #e1e4f7;
  --kpr-glass: rgba(251,251,255,.7);
  --kpr-border: rgba(40,40,110,.12); --kpr-border2: rgba(40,40,110,.22);
  --kpr-ink: #0b0d1f; --kpr-ink2: #34385a; --kpr-muted: #5a5f84;
  --kpr-accent: #5b3cff; --kpr-accent2: #2f6bff; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(91,60,255,.12);
  --kpr-ok: #0a9e6a; --kpr-warn: #b76e00; --kpr-bad: #e0245e;
  --kpr-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 36px rgba(40,30,120,.1);
  --kpr-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kpr-font-head: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kpr-font-display: "Unbounded", "Geist", -apple-system, sans-serif;
  --kpr-font-num: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --kpr-stripe: none;
  --kpr-c1: 91,60,255; --kpr-c2: 8,145,178; --kpr-c3: 224,36,94;
  --kpr-aurora-o: .55;
  --kpr-canvas:
    radial-gradient(28% 24% at 22% 18%, rgba(var(--kpr-c1),.35), transparent 70%),
    radial-gradient(26% 22% at 80% 34%, rgba(var(--kpr-c2),.25), transparent 70%);
}
:root[data-kpr-pack="2050"][data-theme="dark"] {
  --kpr-bg: #05060f; --kpr-side: rgba(12,14,34,.82); --kpr-card: #0c0e22; --kpr-alt: #131634; --kpr-alt2: #1a1e44;
  --kpr-glass: rgba(12,14,34,.7);
  --kpr-border: rgba(140,160,255,.14); --kpr-border2: rgba(140,160,255,.26);
  --kpr-ink: #eef1ff; --kpr-ink2: #bcc2e6; --kpr-muted: #8e95bf;
  --kpr-accent: #7b5cff; --kpr-accent2: #22d3ee; --kpr-on-accent: #ffffff; --kpr-accent-soft: rgba(123,92,255,.2);
  --kpr-ok: #3dffa8; --kpr-warn: #ffc24b; --kpr-bad: #ff4d8d;
  --kpr-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.45);
  --kpr-c1: 123,92,255; --kpr-c2: 34,211,238; --kpr-c3: 255,61,187;
  --kpr-aurora-o: 1;
}

/* ---------- Page-wide touches ---------- */
/* Only on pages that took part (the pre-paint snippet sets data-kpr-themed):
   kpr-core also adds this stylesheet to pages that haven't mapped their
   colours yet, and there it only dresses kpr-core's own pieces. */
:root[data-kpr-themed] { color-scheme: light; background-color: var(--kpr-bg); }
:root[data-kpr-themed][data-theme="dark"] { color-scheme: dark; }
/* <html> paints the page (and Glass / 2050's backdrop); the body lets it show. */
:root[data-kpr-themed] body { background: transparent; font-family: var(--kpr-font); }
:root[data-kpr-themed] h1 { font-family: var(--kpr-font-display); }
:root[data-kpr-themed] h2, :root[data-kpr-themed] h3 { font-family: var(--kpr-font-head); }

/* Glass and 2050: the colour field sits behind the whole page. */
:root[data-kpr-themed][data-kpr-pack="glass"], :root[data-kpr-themed][data-kpr-pack="2050"] {
  background: var(--kpr-canvas), var(--kpr-bg);
  background-attachment: fixed;
  min-height: 100%;
}
/* 2050's aurora: four colour masses drifting on a slow loop. */
:root[data-kpr-themed][data-kpr-pack="2050"]::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  opacity: var(--kpr-aurora-o);
  background:
    radial-gradient(28% 24% at 22% 18%, rgba(var(--kpr-c1),.6), transparent 70%),
    radial-gradient(26% 22% at 80% 34%, rgba(var(--kpr-c2),.45), transparent 70%),
    radial-gradient(30% 26% at 30% 82%, rgba(var(--kpr-c3),.34), transparent 70%),
    radial-gradient(22% 20% at 78% 88%, rgba(var(--kpr-c1),.4), transparent 70%);
  animation: kpr-aurora 38s ease-in-out infinite alternate;
}
/* …and, in the dark, a field of pin-prick stars. */
:root[data-kpr-themed][data-kpr-pack="2050"][data-theme="dark"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 1.2px at 8% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(circle 1px at 23% 31%, rgba(255,255,255,.7), transparent),
    radial-gradient(circle 1.4px at 41% 9%, rgba(200,230,255,.9), transparent),
    radial-gradient(circle 1px at 57% 24%, rgba(255,255,255,.6), transparent),
    radial-gradient(circle 1.2px at 72% 6%, rgba(255,255,255,.85), transparent),
    radial-gradient(circle 1px at 88% 19%, rgba(220,200,255,.8), transparent),
    radial-gradient(circle 1.3px at 94% 42%, rgba(255,255,255,.7), transparent),
    radial-gradient(circle 1px at 13% 47%, rgba(255,255,255,.6), transparent),
    radial-gradient(circle 1.2px at 34% 58%, rgba(200,240,255,.7), transparent),
    radial-gradient(circle 1px at 66% 51%, rgba(255,255,255,.55), transparent),
    radial-gradient(circle 1.2px at 81% 66%, rgba(255,255,255,.6), transparent),
    radial-gradient(circle 1px at 6% 78%, rgba(255,255,255,.5), transparent);
  animation: kpr-twinkle 5s ease-in-out infinite alternate;
}
@keyframes kpr-aurora {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%,-3%,0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-3%,4%,0) rotate(-6deg) scale(1.02); }
}
@keyframes kpr-twinkle { from { opacity: .55; } to { opacity: 1; } }
:root[data-kpr-motion="calm"]::before, :root[data-kpr-motion="calm"]::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-kpr-pack="2050"]::before, :root[data-kpr-pack="2050"]::after { animation: none; }
}
@media print {
  :root[data-kpr-themed]::before, :root[data-kpr-themed]::after { display: none; }
  :root[data-kpr-themed] { background: #fff; }
}

/* ---------- kpr-core's own pieces follow the pack ---------- */
/* (html:root… so these win over kpr-core's injected navy / light defaults) */
html:root[data-kpr-pack] {
  --kh-card: var(--kpr-card); --kh-alt: var(--kpr-alt); --kh-ink: var(--kpr-ink); --kh-ink2: var(--kpr-ink2);
  --kh-muted: var(--kpr-muted); --kh-border: var(--kpr-border); --kh-border2: var(--kpr-border2);
  --kh-accent: var(--kpr-accent); --kh-bad: var(--kpr-bad); --kh-bg: var(--kpr-glass); --kh-page: var(--kpr-bg);
}
html:root[data-kpr-pack] .kpr-hdr, html:root[data-kpr-pack] .kpr-tabs { font-family: var(--kpr-font); background: var(--kpr-glass); }
html:root[data-kpr-pack] .kpr-hdr-brand { font-family: var(--kpr-font-display); }
html:root[data-kpr-pack] .kpr-bmenu, html:root[data-kpr-pack] .kpr-bmenu button, html:root[data-kpr-pack] .kpr-bmenu a { font-family: var(--kpr-font); }
html:root[data-kpr-pack="heirloom"] .kpr-hdr { border-bottom: 0; }
html:root[data-kpr-pack="heirloom"] .kpr-hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kpr-stripe); pointer-events: none;
}
html:root[data-kpr-pack] .kpr-overlay { background: var(--kpr-canvas), var(--kpr-bg); color: var(--kpr-ink); }
html:root[data-kpr-pack] .kpr-card,
html:root[data-kpr-pack] .kpr-modal-card,
html:root[data-kpr-pack] .kpr-account-menu {
  background: var(--kpr-card); color: var(--kpr-ink); border-color: var(--kpr-border); font-family: var(--kpr-font);
}
html:root[data-kpr-pack] .kpr-card p, html:root[data-kpr-pack] .kpr-status,
html:root[data-kpr-pack] .kpr-account-email, html:root[data-kpr-pack] .kpr-account-ver,
html:root[data-kpr-pack] .kpr-account-themelabel, html:root[data-kpr-pack] .kpr-modal-card .sub,
html:root[data-kpr-pack] .kpr-about-ver, html:root[data-kpr-pack] .kpr-about-row .k,
html:root[data-kpr-pack] .kpr-about-tag, html:root[data-kpr-pack] .kpr-report-note,
html:root[data-kpr-pack] .kpr-opt, html:root[data-kpr-pack] .kpr-chip .k { color: var(--kpr-muted); }
html:root[data-kpr-pack] .kpr-account-item, html:root[data-kpr-pack] .kpr-about-row .v { color: var(--kpr-ink); }
html:root[data-kpr-pack] .kpr-account-item:hover { background: var(--kpr-alt); }
html:root[data-kpr-pack] .kpr-account-item.danger { color: var(--kpr-bad); }
html:root[data-kpr-pack] .kpr-account-sep { background: var(--kpr-border); }
html:root[data-kpr-pack] .kpr-account-btn { background: var(--kpr-accent); color: var(--kpr-on-accent); border-color: var(--kpr-card); }
html:root[data-kpr-pack] .kpr-account-themeseg { background: var(--kpr-alt); border-color: var(--kpr-border); }
html:root[data-kpr-pack] .kpr-account-themeseg button { color: var(--kpr-muted); }
html:root[data-kpr-pack] .kpr-account-themeseg button.on { background: var(--kpr-accent); color: var(--kpr-on-accent); }
html:root[data-kpr-pack] .kpr-modal-card label { color: var(--kpr-ink2); }
html:root[data-kpr-pack] .kpr-modal-card input,
html:root[data-kpr-pack] .kpr-modal-card textarea,
html:root[data-kpr-pack] .kpr-modal-card select { background: var(--kpr-alt); color: var(--kpr-ink); border-color: var(--kpr-border2); }
html:root[data-kpr-pack] .kpr-chip, html:root[data-kpr-pack] .kpr-attach-item { background: var(--kpr-alt); border-color: var(--kpr-border2); }
html:root[data-kpr-pack] .kpr-about-body { background: var(--kpr-alt); border-color: var(--kpr-border); }
html:root[data-kpr-pack] .kpr-about-row { border-bottom-color: var(--kpr-border); }
html:root[data-kpr-pack] .kpr-about-icon { background: linear-gradient(135deg, var(--kpr-accent), var(--kpr-accent2)); }
html:root[data-kpr-pack] .kpr-btn-primary,
html:root[data-kpr-pack] .kpr-fab { background: var(--kpr-accent); color: var(--kpr-on-accent); box-shadow: var(--kpr-shadow); }
html:root[data-kpr-pack] .kpr-btn-primary:hover, html:root[data-kpr-pack] .kpr-fab:hover { background: var(--kpr-accent2); }
html:root[data-kpr-pack] .kpr-btn-ghost { color: var(--kpr-ink2); border-color: var(--kpr-border2); }
html:root[data-kpr-pack] .kpr-btn-secondary { color: var(--kpr-accent); border-color: var(--kpr-accent); }
html:root[data-kpr-pack] .kpr-toast { background: var(--kpr-ink); color: var(--kpr-bg); }