:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* Soft candy mist — dark */
  --bg: #1A1620;
  --bg-glow: rgba(255, 122, 168, 0.22);
  --mist-glow: rgba(107, 184, 212, 0.24);
  --glass: saturate(1.2) blur(16px);
  --bubble-shine: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,122,168,.35) 45%, rgba(107,184,212,.4) 100%);
  --card: #252030;
  --ink: #F5F0F4;
  --muted: #A39AA8;
  --accent: #FF7AA8;
  --accent-2: #6BB8D4;
  --accent-ink: #FFFFFF; /* 3.2.4: light text on candy fills */
  --success: #4CB08A;
  --danger: #E57373;
  --line: #3A3348;
  --elevated: #2E2838;
  --input: #1F1A28;
  --header: rgba(26, 22, 32, 0.92);
  --skip-bg: #000;
  --toast: #2A2030;
  --toast-err: #3A1A22;
  --age-fg: #F5E6C8;
  --age-bg: #2A2430;
  --age-line: #4A4058;
  --stats: #1C1824;
  --shadow: 0 8px 28px rgba(10, 6, 16, 0.38);
  --shadow-soft: 0 4px 16px rgba(10, 6, 16, 0.28);
  --radius: 24px;
  --radius-bubble: 22px;
  --radius-pill: 999px;
  --max: 1100px;
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font); /* 3.2.3: unified Inter UI stack */
}
html[data-theme="light"] {
  color-scheme: light;
  /* 3.0.2 Soft candy mist — unmistakable glossy Apple light (DEFAULT) */
  --bg: #F7F5F8;
  --bg-glow: rgba(255, 142, 200, 0.34);
  --mist-glow: rgba(196, 168, 255, 0.30);
  --card: rgba(255, 255, 255, 0.62);
  --ink: #2A2430;
  --muted: #6B6470;
  --accent: #FF8EC8;
  --accent-2: #C4A8FF;
  --accent-ink: #FFFFFF;
  --success: #3D9B7A;
  --danger: #C62828;
  --line: rgba(255, 255, 255, 0.45);
  --elevated: rgba(255, 255, 255, 0.58);
  --input: rgba(255, 255, 255, 0.78);
  --header: rgba(255, 255, 255, 0.58);
  --skip-bg: #fff;
  --toast: #2A2430;
  --toast-err: #5c1a1a;
  --age-fg: #5c4810;
  --age-bg: rgba(255, 255, 255, 0.62);
  --age-line: rgba(255, 255, 255, 0.40);
  --stats: rgba(255, 255, 255, 0.58);
  --shadow: 0 10px 36px rgba(255, 142, 200, 0.18), 0 10px 36px rgba(196, 168, 255, 0.16);
  --shadow-soft: 0 8px 28px rgba(255, 142, 200, 0.14);
  --glass: saturate(1.55) blur(28px);
  --glass-blur: 28px;
  --bubble-shine: linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%);
  --bubble-rim: rgba(255, 255, 255, 0.55);
  --bubble-inner: rgba(255, 184, 224, 0.32);
  --radius: 24px;
  --radius-bubble: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 560px at 8% -10%, var(--bg-glow), transparent 58%),
    radial-gradient(900px 520px at 94% 0%, var(--mist-glow), transparent 52%),
    var(--bg);
  color: var(--ink);
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); }
.skip {
  position: absolute; left: -999px; top: 0;
}
.skip:focus { left: 8px; background: var(--skip-bg); color: var(--ink); padding: 8px; }

/* Non-PROD environment banner (fixed top; offsets sticky header) */
:root { --env-banner-h: 0px; }
.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #041014;
  background: linear-gradient(90deg, var(--accent) 0%, #FF9EBE 45%, var(--accent-2) 100%);
  border-bottom: 2px solid #041014;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.env-banner__label { font-weight: 800; letter-spacing: 0.12em; }
.env-banner__title {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.95;
}
.env-banner__comment {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.9;
}
.env-banner__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-weight: 650;
}
.env-banner__sep { opacity: 0.55; }
body.has-env-banner { padding-top: var(--env-banner-h); }
body.has-env-banner .site-header { top: var(--env-banner-h); }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(1.35);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.bar {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .6rem .9rem;
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand small { color: var(--muted); font-weight: 500; }
.site-nav { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.site-nav a, .linkish, .theme-toggle {
  color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer;
  padding: .4rem .7rem; border-radius: var(--radius-pill);
}
.site-nav a:hover, .linkish:hover, .theme-toggle:hover { background: var(--elevated); }
.theme-toggle {
  border: 1px solid var(--line);
  min-width: 2.5rem;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: var(--radius-pill);
}
.nav-toggle { display: none; }
.langs { max-width: var(--max); margin: 0 auto; padding: 0 .9rem .5rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.langs a { color: var(--muted); text-decoration: none; font-size: .85rem; padding: .2rem .55rem; border-radius: var(--radius-pill); }
.langs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.wrap { max-width: var(--max); margin: 1rem auto 3rem; padding: 0 .9rem; }
.hero h1 { margin: .2rem 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(1.3);
  position: relative;
}
.narrow { max-width: 28rem; width: 100%; margin-left: auto; margin-right: auto; }
/* 3.5.17: Soft candy auth tiles — reliable horizontal center in .wrap */
.stepper { margin: .6rem 0; }
.stepper-caption { display: block; font-size: .9rem; margin-bottom: .25rem; }
.stepper-row {
  display: flex; align-items: center; gap: .4rem;
}
.stepper-row button {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; line-height: 1;
  border-radius: var(--radius-bubble); border: 1px solid var(--line);
  background: var(--elevated); color: var(--ink); font-size: 1.2rem; padding: 0;
  box-shadow: var(--shadow-soft);
}
.stepper-row input {
  flex: 1; height: 2.6rem; margin: 0;
}
.stepper input, select, textarea, input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%; padding: .6rem .85rem; border-radius: var(--radius-bubble); border: 1px solid var(--line);
  background: var(--input); color: var(--ink); font: inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.unit { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.calc-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.calc-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--elevated); }
.calc-tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.result-box { font-size: 1.6rem; font-weight: 700; margin: .4rem 0 1rem; }
.feature-list { padding-left: 1.1rem; margin: .4rem 0 1rem; }
.legal-block { white-space: pre-wrap; }
.legal-footer { font-size: .85rem; }

.help { color: var(--muted); font-size: .9rem; margin: 0 0 .8rem; }
.table-wrap { overflow-x: auto; }
table.mix { width: 100%; border-collapse: collapse; }
table.mix th, table.mix td { border-bottom: 1px solid var(--line); padding: .45rem .4rem; text-align: left; }
table.compact input { min-width: 7rem; }
.btn, .btn-bubble {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px;
  padding: .65rem 1.2rem;
  border-radius: var(--radius-bubble);
  font-weight: 700;
  text-decoration: none; cursor: pointer;
  color: var(--accent-ink);
  border: 1px solid var(--bubble-rim, rgba(255,255,255,.40));
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 42%),
    var(--bubble-shine, linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%));
  box-shadow:
    inset 0 0 18px var(--bubble-inner, rgba(255, 184, 224, 0.25)),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 28px rgba(255, 142, 200, 0.12),
    0 8px 28px rgba(196, 168, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.btn:hover, .btn-bubble:hover {
  filter: saturate(1.12) brightness(1.03);
  box-shadow:
    inset 0 0 18px var(--bubble-inner, rgba(255, 184, 224, 0.25)),
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(255,255,255,.55),
    0 8px 28px rgba(255, 142, 200, 0.16),
    0 8px 28px rgba(196, 168, 255, 0.16);
}
.btn-primary {
  /* 3.0.2: never solid flat accent — soap-bubble pink→violet */
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 42%),
    var(--bubble-shine, linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%));
  color: var(--accent-ink);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm, .btn-small { padding: .35rem .7rem; font-size: .9rem; min-height: 36px; }
.btn.secondary {
  background: var(--elevated);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn.secondary:hover { filter: brightness(1.05); }
.btn.danger {
  background: var(--danger);
  color: #fff;
  border: 0;
}
.stack { display: grid; gap: .7rem; }
.plain { list-style: none; padding: 0; }
.plain li { margin: .3rem 0; }
.site-footer { max-width: var(--max); margin: 0 auto; padding: 1rem .9rem 3rem; color: var(--muted); }
.muted { color: var(--muted); }
.ok { color: var(--success); }
.form-msg.err { color: var(--danger); }
/* 3.5.3: form submit feedback uses #save-status toast; .form-msg is sr-only fallback */
.form-msg:not(.form-msg--banner) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.form-msg--banner {
  display: block;
  margin: .4rem 0 .2rem;
  font-weight: 650;
  line-height: 1.4;
}
.form-msg--banner.err { color: var(--danger); }
.form-msg--banner.ok { color: var(--success); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-soft); }
.price { font-size: 1.3rem; }
/* Soft candy mist toast — shared by autosave + form submit */
.save-status {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;
  background: color-mix(in srgb, var(--toast) 86%, var(--accent) 14%);
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: var(--radius-bubble);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--shadow), 0 0 28px color-mix(in srgb, var(--mist-glow) 50%, transparent);
  font-weight: 650;
  font-size: .95rem;
  line-height: 1.35;
  max-width: min(22rem, calc(100vw - 2rem));
  opacity: 0;
  transform: translateY(.55rem) scale(.97);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.save-status.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.save-status.ok {
  background: color-mix(in srgb, var(--toast) 68%, #1E4A3A 32%);
  border-color: color-mix(in srgb, var(--success) 48%, var(--line));
  box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--success) 26%, transparent);
}
.save-status.err {
  background: var(--toast-err);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--danger) 22%, transparent);
}
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.stats { background: var(--stats); padding: .8rem; overflow: auto; max-height: 320px; }
.inline-form { grid-template-columns: 1fr auto auto; }
@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
  /* 3.7.22: flat primary nav — no hamburger; site-nav always visible */
  .nav-toggle { display: none !important; }
  .bar { flex-wrap: nowrap; }
  .inline-form { grid-template-columns: 1fr; }
}

.age-banner {
  margin: 0;
  padding: .45rem .9rem .7rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  color: var(--age-fg);
  background: var(--age-bg);
  border-top: 1px solid var(--age-line);
}

label.check { display: flex; align-items: center; gap: .45rem; }
label.check input { width: auto; }
/* 3.4.9: Soft candy checkboxes — label left of box, never stacked/centered */
.soft-candy-form label.check,
.admin-check-row label.check,
#privacy-form label.check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  text-align: left;
  font-weight: 500;
}
.soft-candy-form label.check input[type="checkbox"],
.admin-check-row label.check input[type="checkbox"],
#privacy-form label.check input[type="checkbox"] {
  width: auto;
  min-width: 1rem;
  min-height: 0;
  height: auto;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

/* 3.6.2: privacy checks stay left — defeat soft-candy-form column label layout */
.soft-candy-form label.check,
#privacy-form.soft-candy-form label.check,
#privacy-form label.check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: auto;
  max-width: 100%;
}
.soft-candy-form label.check input[type="checkbox"],
#privacy-form label.check input[type="checkbox"] {
  order: 0;
  margin: 0 .45rem 0 0;
}

.admin-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  align-items: center;
  margin: .35rem 0 .75rem;
}
.result-box { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.2rem; font-weight: 700; }
.stats-cards { display: grid; gap: .8rem; }
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.stat-card { background: var(--stats); border: 1px solid var(--line); border-radius: 10px; padding: .7rem 1rem; min-width: 7rem; }
.stat-card strong { display: block; font-size: 1.4rem; }
.stat-card span, .stat-list h3 { color: var(--muted); font-size: .85rem; }
.stat-list ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.stat-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .25rem 0; }
.feature-list { list-style: none; padding: 0; }
.feature-list li { margin: .25rem 0; }

.num-row { display: grid; gap: .2rem; margin: .55rem 0; }
.num-row-in { display: flex; align-items: center; gap: .4rem; }
.num-row-in input { flex: 1; }
.warn { color: var(--danger); font-weight: 600; }

.plan-locked { opacity: .72; }
.plan-hint { background: var(--age-bg); color: var(--age-fg); border: 1px solid var(--age-line); padding: .7rem .9rem; border-radius: 10px; }
.print-paper { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--muted); min-height: 44px; }
.print-paper select { width: auto; min-height: 44px; padding: .35rem .55rem; }
.print-root { display: none; }

@media print {
  body * { visibility: hidden !important; }
  #print-root, #print-root * { visibility: visible !important; }
  #print-root {
    display: block !important;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding: 0;
    color: #000;
    background: #fff;
  }
  .site-header, .site-footer, .no-print, .nav-toggle, .langs, .lang-compact, .age-banner, .env-banner { display: none !important; }
  .print-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; border-bottom: 2px solid #FF6B9D; padding-bottom: 10px; }
  .print-header strong { font-size: 1.4rem; }
  .print-url { color: #333; font-size: .95rem; }
  .print-title { font-size: 1.2rem; margin: 0 0 12px; }
  .print-footer { margin-top: 18px; font-size: .85rem; color: #444; border-top: 1px solid #ccc; padding-top: 8px; }
  #print-root table.mix { width: 100%; border-collapse: collapse; }
  #print-root table.mix th, #print-root table.mix td { border: 1px solid #333; padding: 6px 8px; text-align: left; color: #000; }
  #print-root table.mix th { background: #fff1f6; }
}

.ver-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.ver-link:hover { color: var(--accent-2); }
#versions-table tr.on td { font-weight: 700; }
.legal-block { white-space: pre-wrap; }
.prose .legal-block { margin: .8rem 0; line-height: 1.55; }

/* Honeypot: off-screen so bots fill it; humans never see it (avoid display:none alone). */
.hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}



/* 2.2.3 donor avatar picker */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem;
  max-height: 22rem;
  overflow: auto;
  padding: .5rem;
  margin: .75rem 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.avatar-picker.picker-slim {
  display: block;
  max-height: none;
  overflow: visible;
}
.avatar-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.avatar-option img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.avatar-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.avatar-option.locked {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.avatar-option .lock-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .55rem;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  white-space: nowrap;
}
.avatar-option .crown-badge {
  position: absolute;
  top: 0;
  right: 2px;
  font-size: .75rem;
  line-height: 1;
}
.avatar-option.is-crowned:not(.locked) {
  border-color: #eab30855;
}

/* 2.2.4 donor wall + grateful area */
.donors-grateful { margin-bottom: 1rem; }
.donors-cta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.donor-wall-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.donor-card {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  min-height: 7.5rem;
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  position: relative;
  overflow: hidden;
}
/* Soft candy level washes (tile background by donation band) */
.donor-card--l1 { background: linear-gradient(145deg, color-mix(in srgb, #FF8EC8 14%, var(--card)), var(--card)); }
.donor-card--l2 { background: linear-gradient(145deg, color-mix(in srgb, #FF6B9D 16%, var(--card)), var(--card)); }
.donor-card--l3 { background: linear-gradient(145deg, color-mix(in srgb, #C4A8FF 18%, var(--card)), var(--card)); }
.donor-card--l4 { background: linear-gradient(145deg, color-mix(in srgb, #A78BFA 18%, var(--card)), var(--card)); }
.donor-card--l5 { background: linear-gradient(145deg, color-mix(in srgb, #C4A8FF 22%, var(--card)), color-mix(in srgb, #FF8EC8 10%, var(--card))); }
.donor-card--l6 { background: linear-gradient(145deg, color-mix(in srgb, #FFD4A8 16%, var(--card)), color-mix(in srgb, #FF6B9D 12%, var(--card))); border-color: color-mix(in srgb, #FFD4A8 45%, var(--line)); }
.donor-card--l7 { background: linear-gradient(145deg, color-mix(in srgb, #FFD700 14%, var(--card)), color-mix(in srgb, #FF8EC8 14%, var(--card))); border-color: color-mix(in srgb, #FFD700 50%, var(--line)); }
.donor-card.is-crowned { box-shadow: 0 0 0 1px color-mix(in srgb, #FFD4A8 35%, transparent); }
.donor-card__avatar {
  position: relative;
  flex: 0 0 auto;
}
.donor-card__avatar img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.donor-card__avatar .crown-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.donor-card__avatar .crown-badge svg {
  width: 20px;
  height: 20px;
  display: block;
}
.donor-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
}
.donor-card__loc,
.donor-card__amount {
  margin: .2rem 0 0;
}
.donor-card__amount {
  color: var(--accent);
  font-weight: 650;
}
.donor-card__comment {
  margin-top: .55rem;
  font-size: .95rem;
  line-height: 1.45;
  word-break: break-word;
}
.donor-wall-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  align-items: center;
  margin: .75rem 0 0;
}
.donor-wall-sort {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.donor-wall-sort select {
  min-height: 44px;
  padding: .35rem .65rem;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.donor-wall-pager {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

/* 2.2.7 / 3.1.2 wallpapers — stay behind UI/calc (never paint over results) */
body.has-wallpaper {
  background-image: var(--vapcal-wallpaper);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  isolation: isolate;
}
body.has-wallpaper::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)),
    radial-gradient(1200px 600px at 10% -10%, var(--bg-glow), color-mix(in srgb, var(--bg) 78%, transparent));
  pointer-events: none;
  z-index: -1;
}
body.has-wallpaper .vapor-bg { z-index: 0; opacity: .7; }
body.has-wallpaper .wrap,
body.has-wallpaper #main,
body.has-wallpaper #calculator,
body.has-wallpaper .calc-detail,
body.has-wallpaper .calc-tiles {
  position: relative;
  z-index: 1;
}
body.has-wallpaper .wrap > .card,
body.has-wallpaper #calculator,
body.has-wallpaper .grid-2 > .card {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

.wallpaper-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
  max-height: 18rem;
  overflow: auto;
  padding: .5rem;
  margin: .75rem 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.wallpaper-picker.picker-slim {
  display: block;
  max-height: none;
  overflow: visible;
}
.wallpaper-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.wallpaper-option img {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}
.wallpaper-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.wallpaper-option.locked {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.wallpaper-option .wallpaper-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  font-size: .7rem;
  text-align: center;
  padding: .25rem;
}
.wallpaper-option .wallpaper-meta {
  font-size: .65rem;
  opacity: .8;
}
.wallpaper-dl {
  display: inline-block;
  font-size: 0.75rem;
  margin: 0 0.35rem 0.5rem 0;
}
.wallpaper-option .lock-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .55rem;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  white-space: nowrap;
}

.donor-avatar-trigger {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  line-height: 0;
}
.donor-avatar-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.donor-avatar-trigger img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
}
.donor-card__about {
  margin: .35rem 0 0;
  font-size: .9rem;
  line-height: 1.35;
  word-break: break-word;
}

.avatar-flyover {
  position: fixed;
  z-index: 80;
  min-width: 280px;
  max-width: min(520px, calc(100vw - 1rem));
  padding: 0;
  pointer-events: none;
}
.avatar-flyover[hidden] { display: none !important; }
.avatar-flyover.is-open {
  pointer-events: auto;
}
.avatar-flyover__inner {
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elevated, var(--bg));
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.avatar-flyover__img {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 18px;
  margin: 0 auto .5rem;
}
.avatar-flyover__amount {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
}
.avatar-flyover__name {
  margin: .35rem 0 0;
  text-align: center;
  font-weight: 600;
}
.avatar-flyover__loc,
.avatar-flyover__about {
  margin: .25rem 0 0;
  text-align: center;
  font-size: .9rem;
  word-break: break-word;
}
.avatar-flyover__close {
  display: block;
  margin: .6rem auto 0;
}


/* Friends & Fellas — Soft candy mist Partners (3.4.14) */
.friend-cards { list-style: none; padding: 0; margin: .65rem 0 0; display: grid; gap: .85rem; }
.friend-card {
  background: var(--elevated, var(--card));
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.friend-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  flex-wrap: wrap;
}
.friend-card__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
  font-weight: 650;
  min-width: 0;
  flex: 1 1 10rem;
}
.friend-card__brand:hover .friend-card__name { color: var(--accent, #FF6B9D); }
.friend-card__logo-wrap {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #FF8EC8 12%, var(--card));
  border: 1px solid color-mix(in srgb, #C4A8FF 28%, var(--line));
  overflow: hidden;
}
.friend-card__logo { width: 48px; height: 48px; object-fit: contain; display: block; }
.friend-card__logo-fallback {
  font-weight: 700;
  font-size: 1.1rem;
  color: color-mix(in srgb, #FF6B9D 70%, var(--ink));
}
.friend-card__name {
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.friend-card__visit { flex: 0 0 auto; min-height: 36px; }
.friend-card__blurb {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink);
}
.friend-card__contact {
  margin: 0;
  font-size: .85rem;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .45rem;
  align-items: baseline;
}
.friend-card__partner-label {
  font-weight: 650;
  color: var(--muted);
}
.friend-card__partner-label::after { content: ':'; }
.friend-card__codes {
  margin-top: .15rem;
  display: grid;
  gap: .4rem;
}
.friend-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  font-size: .85rem;
  padding: .4rem .55rem;
  border-radius: 10px;
  background: color-mix(in srgb, #C4A8FF 8%, var(--card));
  border: 1px solid color-mix(in srgb, #FF8EC8 22%, var(--line));
}
.friend-code__label { font-weight: 600; color: var(--muted); }
.friend-code__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .2rem .45rem;
  border-radius: 6px;
  background: var(--input, var(--card));
  border: 1px solid var(--line);
  letter-spacing: .02em;
}
.friend-code__copy { min-height: 32px; }
.friend-logo-thumb { display: block; object-fit: contain; border-radius: 6px; margin-bottom: .25rem; }
.friend-logo-cell { min-width: 5rem; vertical-align: top; }
.friend-codes-cell { min-width: 12rem; vertical-align: top; }
.friend-code-row { display: grid; gap: .2rem; margin-bottom: .5rem; }
.friend-code-row strong { font-size: .8rem; color: var(--muted); }
#admin-friends textarea[data-friend-field="blurb"] { width: 100%; min-width: 12rem; }
#admin-friends td > input[data-friend-field] { display: block; width: 100%; margin-bottom: .25rem; }


/* Admin page sections (2.4.0) */
.admin-toc {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  margin: 0 0 1rem; padding: .75rem;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-toc a {
  color: var(--ink); text-decoration: none;
  font-size: .82rem; padding: .25rem .55rem;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--card);
}
.admin-toc a:hover { border-color: var(--accent); color: var(--accent-2); }
.admin-section {
  margin: 1.25rem 0 0;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-section > h2:first-child,
.admin-section > h3:first-child {
  margin-top: 0;
  scroll-margin-top: calc(4rem + var(--env-banner-h, 0px));
}
.admin-page > h1 { margin-bottom: .35rem; }
.admin-page > .muted.lead { margin-top: 0; margin-bottom: .75rem; }


/* ===== Soft candy mist 2.4.4 ===== */
h1, h2, .site-header .brand-name {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
.site-header .brand-name { font-weight: 650; font-size: 1.15rem; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
.calc-tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: transparent; }
.langs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Calc hierarchy: result > inputs > options > nav */
#calculator .result-box {
  order: -1;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 750;
  margin: .2rem 0 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-soft);
}
#calculator .calc { margin-bottom: .6rem; }
.calc-tabs { margin-bottom: .85rem; }

/* Options panel: compact on mobile, not full-width stretch */
.grid-2 > aside.card.options-panel {
  align-self: start;
}
.options-panel h2 { margin-top: 0; font-size: 1.05rem; }
.options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.options-list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-bubble);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  max-width: 100%;
}
.options-list a:hover {
  background: var(--elevated);
  border-color: var(--line);
}
.options-list a.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  font-weight: 650;
}

/* Flat calc icons (SVG stroke, not emoji) */
.calc-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
}
.calc-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calc-tabs .calc-ico { width: 1rem; height: 1rem; }
.lock-ico {
  display: inline-flex;
  width: .95rem;
  height: .95rem;
  margin-left: .2rem;
  color: var(--muted);
  vertical-align: -0.1em;
}
.lock-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 800px) {
  .grid-2 > aside.card.options-panel {
    width: fit-content;
    max-width: min(20rem, 100%);
    padding: .85rem;
  }
  .options-list a {
    width: fit-content;
    max-width: 100%;
  }
  .calc-tabs {
    gap: .3rem;
  }
  .calc-tabs a {
    padding: .35rem .55rem;
    font-size: .88rem;
  }
}

.site-header {
  box-shadow: var(--shadow-soft);
}
.friend-card, .donor-card, .admin-section, .admin-toc {
  box-shadow: var(--shadow-soft);
}
.stat-card { border-radius: var(--radius-bubble); }
.plan-hint { border-radius: var(--radius-bubble); }


/* === 3.0.1 iteration 2: LOCKED tokens, lean nav, Cool Mono, slim pickers === */
.site-nav--lean { gap: .3rem .5rem; }
.site-nav--lean > a.nav-home,
.site-nav--lean > a:not(.nav-secondary):not(.btn) {
  font-weight: 650;
}
.nav-secondary { opacity: .78; font-size: .92rem; }
.theme-area.nav-controls {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .35rem;
  padding: .2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--elevated) 70%, transparent);
  backdrop-filter: blur(12px);
}
.theme-toggle, .kerle-toggle, .palette-toggle {
  border: 0;
  min-width: 2.2rem;
  min-height: 2.2rem;
  font-size: .95rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  padding: .35rem .55rem;
}
.kerle-toggle {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
  opacity: .9;
}
.kerle-toggle.is-on,
.kerle-toggle[aria-pressed="true"] {
  background: #1A1F28;
  color: #E8ECF1;
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.lang-compact { position: relative; margin: 0; overflow: visible; }
.lang-compact > summary {
  list-style: none;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .5rem;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--muted);
}
.lang-compact > summary::-webkit-details-marker { display: none; }
.lang-compact[open] > summary { color: var(--ink); background: var(--elevated); }
.langs--compact {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: .15rem;
  min-width: 4.25rem;
  max-width: min(12rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .4rem;
  margin: 0;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur, 24px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
}
.site-footer .footer-nav a { margin: 0 .05rem; }

/* Cool Mono — cool/mono palette (NOT default); no pink */
html[data-palette="mono"],
html[data-palette="kerle"] {
  --bg: #0E1116;
  --bg-glow: rgba(91, 141, 239, 0.16);
  --mist-glow: rgba(91, 141, 239, 0.10);
  --card: rgba(26, 31, 40, 0.82);
  --ink: #E8ECF1;
  --muted: #8B93A1;
  --accent: #5B8DEF;
  --accent-2: #5B8DEF;
  --accent-ink: #F4F7FB;
  --line: rgba(255, 255, 255, 0.18);
  --elevated: rgba(26, 31, 40, 0.92);
  --input: rgba(14, 17, 22, 0.9);
  --header: rgba(14, 17, 22, 0.78);
  --stats: #1A1F28;
  --age-fg: #E8ECF1;
  --age-bg: #1A1F28;
  --age-line: rgba(255,255,255,.18);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.40);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.28);
  --glass: saturate(1.1) blur(24px);
  --glass-blur: 24px;
  --bubble-shine: linear-gradient(135deg, #3A6FD0 0%, #5B8DEF 100%);
  --bubble-rim: rgba(255, 255, 255, 0.28);
  --bubble-inner: rgba(91, 141, 239, 0.22);
}
html[data-palette="mono"][data-theme="light"],
html[data-palette="kerle"][data-theme="light"] {
  --bg: #E8ECF1;
  --bg-glow: rgba(91, 141, 239, 0.12);
  --mist-glow: rgba(30, 50, 90, 0.08);
  --card: rgba(255, 255, 255, 0.78);
  --ink: #0E1116;
  --muted: #8B93A1;
  --accent: #5B8DEF;
  --accent-2: #3A6FD0;
  --accent-ink: #FFFFFF;
  --line: rgba(255, 255, 255, 0.35);
  --elevated: rgba(255, 255, 255, 0.85);
  --input: rgba(255, 255, 255, 0.9);
  --header: rgba(255, 255, 255, 0.75);
  --stats: rgba(255,255,255,.8);
  --age-fg: #0E1116;
  --age-bg: rgba(255,255,255,.85);
  --age-line: rgba(255,255,255,.3);
  --shadow: 0 8px 28px rgba(14, 17, 22, 0.12);
  --shadow-soft: 0 8px 28px rgba(14, 17, 22, 0.08);
  --bubble-shine: linear-gradient(135deg, #5B8DEF 0%, #3A6FD0 100%);
  --bubble-rim: rgba(255, 255, 255, 0.4);
  --bubble-inner: rgba(91, 141, 239, 0.2);
}

.picker-slim { max-height: none; overflow: visible; }
.picker-slim .picker-primary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .45rem;
}
.wallpaper-picker.picker-slim .picker-primary {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.picker-slim .picker-more {
  margin-top: .65rem;
  border-top: 1px dashed color-mix(in srgb, var(--muted) 35%, transparent);
  padding-top: .5rem;
}
.picker-slim .picker-more > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--elevated);
  font-weight: 650;
  font-size: .9rem;
  list-style: none;
}
.picker-slim .picker-more > summary::-webkit-details-marker { display: none; }
/* 3.4.13 avatar-picker soft candy */
.avatar-picker.picker-slim .avatar-option.selected {
  box-shadow: 0 0 0 2px var(--accent, #e89ab5), 0 2px 10px color-mix(in srgb, var(--accent, #e89ab5) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent, #e89ab5) 70%, white);
}
.avatar-picker.picker-slim .picker-more > summary {
  color: var(--text);
  font-weight: 500;
}

.picker-slim .picker-extra {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .45rem;
  margin-top: .55rem;
  max-height: 14rem;
  overflow: auto;
  padding: .25rem;
}
.wallpaper-picker.picker-slim .picker-extra {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.wallpaper-option-wrap { display: contents; }

/* Options panel: never full-width stretch */
.grid-2 > aside.card.options-panel {
  width: fit-content;
  max-width: min(20rem, 100%);
  justify-self: start;
}
.options-list a { width: fit-content; max-width: 100%; }

@media (max-width: 800px) {
  .lang-compact { width: auto; overflow: visible; }
  /* 3.7.25: keep absolute dropdown (never position:static — that expanded langs inline in the header) */
  .langs--compact {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 6px);
    margin-top: 0;
    max-width: min(12rem, calc(100vw - 1.5rem));
  }
  .grid-2 > aside.card.options-panel {
    width: fit-content;
    max-width: min(20rem, 100%);
  }
}

/* === 3.0.2: visible candy glass dominates light; Cool Mono unmistakable; slim lang === */
html[data-theme="light"]:not([data-palette="mono"]) .btn,
html[data-theme="light"]:not([data-palette="mono"]) .btn-primary,
html[data-theme="light"]:not([data-palette="mono"]) .btn-bubble {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 40%),
    linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%) !important;
  color: #fff !important;
  border-radius: var(--radius-bubble) !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 20px rgba(255, 184, 224, 0.30),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 28px rgba(255, 142, 200, 0.16),
    0 8px 28px rgba(196, 168, 255, 0.14);
}
html[data-theme="light"]:not([data-palette="mono"]) .btn.secondary {
  background: rgba(255,255,255,.72) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-soft);
}
html[data-theme="light"]:not([data-palette="mono"]) .btn.danger {
  background: var(--danger) !important;
  color: #fff !important;
}
html[data-theme="light"]:not([data-palette="mono"]) .card,
html[data-theme="light"]:not([data-palette="mono"]) .site-header {
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="light"]:not([data-palette="mono"]) .calc-tabs a.on,
html[data-theme="light"]:not([data-palette="mono"]) .options-list a.is-active,
html[data-theme="light"]:not([data-palette="mono"]) .langs a.on {
  background: linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%);
  color: #fff;
  border-color: transparent;
}
/* Kill leftover solid blue/grey tiny-radius primaries in candy light */
html[data-theme="light"]:not([data-palette="mono"]) .btn-primary:not(.secondary):not(.danger) {
  border-radius: 22px !important;
}

.kerle-toggle {
  font-size: .72rem !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
  min-width: auto !important;
  padding: .4rem .7rem !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--elevated) 80%, var(--accent) 12%) !important;
}
.kerle-toggle.is-on,
.kerle-toggle[aria-pressed="true"] {
  background: #1A1F28 !important;
  color: #E8ECF1 !important;
  border-color: #5B8DEF !important;
}
.theme-area.nav-controls {
  gap: .35rem;
  padding: .25rem .35rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--elevated) 65%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.age-banner--slim {
  padding: .28rem .9rem .4rem;
  font-size: .78rem;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.lang-compact > summary {
  font-size: .68rem;
  padding: .22rem .42rem;
  max-width: 3.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar { padding: .45rem .9rem; }
.site-header .age-banner--slim { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }

/* Candy light: stronger pink/violet body mist */
html[data-theme="light"]:not([data-palette="mono"]) body {
  background:
    radial-gradient(1200px 640px at 6% -12%, rgba(255, 142, 200, 0.38), transparent 58%),
    radial-gradient(980px 560px at 96% 2%, rgba(196, 168, 255, 0.34), transparent 54%),
    radial-gradient(700px 420px at 50% 110%, rgba(255, 184, 224, 0.18), transparent 60%),
    #F7F5F8;
}


/* === 3.4.14: Soft candy mist Partners tile === */
.partner-panel.soft-candy-partners,
.partner-panel {
  margin-top: 1.15rem;
  align-self: stretch;
  padding: 1rem 1.1rem 1.15rem;
}
.partner-panel__head {
  display: grid;
  gap: .35rem;
  margin-bottom: .15rem;
}
.partner-panel__title,
.partner-panel h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.partner-panel__lead {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  max-width: 42rem;
}
.partner-panel .friend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: .85rem;
}
@media (max-width: 800px) {
  .partner-panel .friend-cards {
    grid-template-columns: 1fr;
  }
  .partner-panel.soft-candy-partners,
  .partner-panel {
    padding: .9rem .85rem 1rem;
  }
  .friend-card__top { align-items: flex-start; }
  .friend-card__visit { width: 100%; text-align: center; }
}

/* === 3.1.0: mobile-first calc tiles + vapor shell (light borders; dark keeps gloss) === */
:root { --env-banner-h: 0px; }
body.has-env-banner {
  --env-banner-h: 2.75rem; /* fallback before JS measure — prevents content cover */
  padding-top: var(--env-banner-h);
}
body.has-env-banner .site-header { top: var(--env-banner-h); }
body.has-env-banner #main {
  scroll-margin-top: calc(var(--env-banner-h) + 4.5rem);
}
#calculator {
  scroll-margin-top: calc(var(--env-banner-h, 0px) + 4.75rem);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.brand-name { line-height: 1.15; }
/* 3.3.0: brand-tagline under logo removed */

/* === 3.1.1: vapor contrast, collapsible tiles, thematic soft loops, header calc menu === */

/* Page vapor — z-index 0 (not -1) so mist sits ON body bg; content above */
.vapor-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  /* Calm readable center for calculator; clouds denser at edges */
  -webkit-mask-image: radial-gradient(ellipse 68% 54% at 50% 42%, transparent 8%, rgba(0,0,0,.22) 38%, #000 76%);
  mask-image: radial-gradient(ellipse 68% 54% at 50% 42%, transparent 8%, rgba(0,0,0,.22) 38%, #000 76%);
}
.vapor-bg__svg { width: 100%; height: 100%; display: block; }
.vapor-bg__layer {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
}
.vapor-bg__layer--b { fill: var(--accent-2); }
.vapor-bg__layer--c { fill: var(--accent); }
/* Soft candy mist contrast — clearly visible in light + dark */
html[data-theme="light"] .vapor-bg__layer--a { opacity: .36; }
html[data-theme="light"] .vapor-bg__layer--b { opacity: .30; }
html[data-theme="light"] .vapor-bg__layer--c { opacity: .24; }
html[data-theme="dark"] .vapor-bg__layer--a { opacity: .40; }
html[data-theme="dark"] .vapor-bg__layer--b { opacity: .34; }
html[data-theme="dark"] .vapor-bg__layer--c { opacity: .28; }
.vapor-bg__layer--a {
  animation: vapcal-drift-a 23s ease-in-out infinite alternate;
  transform-origin: 50% 90%;
}
.vapor-bg__layer--b {
  animation: vapcal-drift-b 29s ease-in-out infinite alternate;
  transform-origin: 50% 75%;
}
.vapor-bg__layer--c {
  animation: vapcal-drift-c 36s ease-in-out infinite alternate;
  transform-origin: 50% 60%;
}
/* 3.2.7: slightly faster rising cumulus; dark clarity below */
@keyframes vapcal-drift-a {
  from { transform: translate3d(-3%, 14%, 0) scale(1); }
  to { transform: translate3d(4%, -22%, 0) scale(1.1); }
}
@keyframes vapcal-drift-b {
  from { transform: translate3d(4%, 16%, 0) scale(1.02); }
  to { transform: translate3d(-5%, -20%, 0) scale(1.08); }
}
@keyframes vapcal-drift-c {
  from { transform: translate3d(-2%, 12%, 0) scale(1); }
  to { transform: translate3d(3%, -18%, 0) scale(1.06); }
}
html[data-palette="mono"] .vapor-bg__layer { fill: var(--accent); }

/* Content above page vapor */
#main,
.site-footer,
.skip { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .vapor-bg__layer--a,
  .vapor-bg__layer--b,
  .vapor-bg__layer--c,
  .calc-tile__vapor * { animation: none !important; }
}

/* Collapsible calc tiles — default collapsed (mobile space) */
.calc-tiles { margin: 0 0 .85rem; }
.calc-tiles__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
  margin: 0 0 .55rem;
}
.calc-tiles__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .35rem .85rem .35rem .65rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  font-size: .92rem;
  box-shadow: var(--shadow-soft);
}
.calc-tiles__chip .calc-ico { width: 1.15rem; height: 1.15rem; }
.calc-tiles__chip.calc-tile--simple .calc-ico { color: #FF8EC8; }
.calc-tiles__chip.calc-tile--chart .calc-ico { color: #C4A8FF; }
.calc-tiles__chip.calc-tile--shots .calc-ico { color: #6BB8D4; }
.calc-tiles__chip.calc-tile--coil .calc-ico { color: #FFB86B; }
.calc-tiles__chip.calc-tile--wraps .calc-ico { color: #7ED6A8; }
.calc-tiles__chip.calc-tile--pgvg .calc-ico { color: #A78BFA; }
.calc-tiles__chip.calc-tile--dilute .calc-ico { color: #67E8F9; }
.calc-tiles__chip.calc-tile--cost .calc-ico { color: #F9A8D4; }
.calc-tiles__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  min-width: 44px;
  padding: .4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--accent) 10%, var(--elevated));
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.calc-tiles__toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--elevated));
}
.calc-tiles__toggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.calc-tiles__toggle:active { transform: translateY(1px); }
.calc-tiles__chev {
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .7;
}
.calc-tiles:not(.is-collapsed) .calc-tiles__chev {
  transform: rotate(-135deg);
  margin-top: .2rem;
}
.calc-tiles.is-collapsed .calc-tile-grid { display: none; }
.calc-tiles:not(.is-collapsed) .calc-tile-grid { display: grid; }

.calc-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
}
@media (min-width: 640px) {
  .calc-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
}
@media (min-width: 960px) {
  .calc-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.calc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 7.25rem;
  min-width: 0;
  padding: .85rem .8rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Soft vapor under content — anim ≤ UI contrast; text/icons stay clear */
.calc-tile__vapor {
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  color: inherit;
  z-index: 0;
}
html[data-theme="light"] .calc-tile__vapor { opacity: .32; }
html[data-theme="dark"] .calc-tile__vapor { opacity: .42; }
.calc-tile__vapor svg { width: 100%; height: 100%; display: block; }
.calc-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  align-items: flex-start;
  min-width: 0;
}
.calc-tile .calc-ico {
  width: 1.35rem;
  height: 1.35rem;
}
.calc-tile__name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
}
.calc-tile__desc {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.calc-tile .lock-ico { position: absolute; top: .15rem; right: 0; }

/* Per-tile accent colors (flat candy) */
.calc-tile--simple .calc-tile__vapor { color: #FF8EC8; }
.calc-tile--chart .calc-tile__vapor { color: #C4A8FF; }
.calc-tile--shots .calc-tile__vapor { color: #6BB8D4; }
.calc-tile--coil .calc-tile__vapor { color: #FFB86B; }
.calc-tile--wraps .calc-tile__vapor { color: #7ED6A8; }
.calc-tile--pgvg .calc-tile__vapor { color: #A78BFA; }
.calc-tile--dilute .calc-tile__vapor { color: #67E8F9; }
.calc-tile--cost .calc-tile__vapor { color: #F9A8D4; }
.calc-tile--simple .calc-ico { color: #FF8EC8; }
.calc-tile--chart .calc-ico { color: #C4A8FF; }
.calc-tile--shots .calc-ico { color: #6BB8D4; }
.calc-tile--coil .calc-ico { color: #FFB86B; }
.calc-tile--wraps .calc-ico { color: #7ED6A8; }
.calc-tile--pgvg .calc-ico { color: #A78BFA; }
.calc-tile--dilute .calc-ico { color: #67E8F9; }
.calc-tile--cost .calc-ico { color: #F9A8D4; }

/* Thematic soft loops (flat; never 3D/comic) */
.tv-mist__a, .tv-mist__b, .tv-mist__c { fill: currentColor; opacity: .55; }
.tv-mist__a { animation: tv-drift 16s ease-in-out infinite alternate; }
.tv-mist__b { animation: tv-drift 20s ease-in-out infinite alternate-reverse; opacity: .4; }
.tv-mist__c { animation: tv-drift 24s ease-in-out infinite alternate; opacity: .35; }
.tv-dot { fill: currentColor; opacity: .55; }
.tv-dot--1 { animation: tv-float 10s ease-in-out infinite alternate; }
.tv-dot--2 { animation: tv-float 12s ease-in-out infinite alternate-reverse; }
.tv-dot--3 { animation: tv-float 9s ease-in-out infinite alternate; }
.tv-dot--4 { animation: tv-float 14s ease-in-out infinite alternate-reverse; }
.tv-dot--5 { animation: tv-float 11s ease-in-out infinite alternate; }
.tv-dot--6 { animation: tv-float 13s ease-in-out infinite alternate-reverse; }
.tv-dot--7 { animation: tv-float 15s ease-in-out infinite alternate; }
.tv-dot--8 { animation: tv-float 8s ease-in-out infinite alternate-reverse; }
.tv-bottle { color: inherit; opacity: .7; }
.tv-drip { fill: currentColor; opacity: .55; animation: tv-drip 2.8s ease-in-out infinite; transform-origin: 80px 70px; }
.tv-spiral { color: #2A2430; opacity: .55; animation: tv-coil 3.6s ease-in-out infinite; }
html[data-theme="dark"] .tv-spiral { color: #E8E0E8; opacity: .45; }
.tv-spark { color: #FF8EC8; opacity: .7; animation: tv-spark 2.2s ease-in-out infinite; }
.tv-wraps { color: inherit; opacity: .55; }
.tv-wraps__a { animation: tv-coil 4s ease-in-out infinite; }
.tv-wraps__b { animation: tv-coil 4s ease-in-out infinite reverse; opacity: .45; }
.tv-mix { fill: currentColor; }
.tv-mix--a { opacity: .4; animation: tv-mix-a 14s ease-in-out infinite alternate; }
.tv-mix--b { opacity: .35; animation: tv-mix-b 14s ease-in-out infinite alternate; }
.tv-mix--c { opacity: .3; animation: tv-drift 18s ease-in-out infinite alternate; }
.tv-dilute-base { fill: currentColor; opacity: .35; }
.tv-dilute-pour { fill: currentColor; opacity: .45; animation: tv-pour 3.2s ease-in-out infinite; transform-origin: 80px 20px; }
.tv-dilute-ripple { opacity: .4; animation: tv-ripple 3.2s ease-in-out infinite; }
.tv-stack { fill: currentColor; }
.tv-stack--a { opacity: .35; animation: tv-stack 5s ease-in-out infinite alternate; }
.tv-stack--b { opacity: .42; animation: tv-stack 5s ease-in-out infinite alternate .4s; }
.tv-stack--c { opacity: .5; animation: tv-stack 5s ease-in-out infinite alternate .8s; }

@keyframes tv-drift {
  from { transform: translate3d(-3%, 2%, 0); }
  to { transform: translate3d(4%, -3%, 0); }
}
@keyframes tv-float {
  from { transform: translate3d(0, 4%, 0); opacity: .35; }
  to { transform: translate3d(0, -8%, 0); opacity: .65; }
}
@keyframes tv-drip {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50% { transform: translateY(6px); opacity: .6; }
}
@keyframes tv-coil {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes tv-spark {
  0%, 100% { opacity: .25; transform: translateY(2px); }
  50% { opacity: .75; transform: translateY(-2px); }
}
@keyframes tv-mix-a {
  from { transform: translate3d(-4%, 0, 0); }
  to { transform: translate3d(3%, 0, 0); }
}
@keyframes tv-mix-b {
  from { transform: translate3d(4%, 0, 0); }
  to { transform: translate3d(-3%, 0, 0); }
}
@keyframes tv-pour {
  0%, 100% { transform: scaleY(.92); opacity: .35; }
  50% { transform: scaleY(1.05); opacity: .55; }
}
@keyframes tv-ripple {
  0%, 100% { transform: scale(0.92); opacity: .25; }
  50% { transform: scale(1.08); opacity: .5; }
}
@keyframes tv-stack {
  from { transform: translateY(2px); }
  to { transform: translateY(-2px); }
}

.calc-tile:hover,
.calc-tile:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow);
  outline: none;
}
.calc-tile:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}
.calc-tile.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-shadow: var(--shadow-soft), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.calc-tile.is-active .calc-tile__name { font-weight: 750; }

.calc-detail { margin-top: .15rem; }
/* Home no longer shows compact pill tabs — tiles / header menu only */
/* legacy pill tabs removed — keep hide for any cached HTML */
.calc-tabs--compact { display: none !important; }

/* Header candy-mist pills + Rechner submenu */
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 8%, var(--elevated));
  box-shadow: var(--shadow-soft);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.nav-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--elevated));
}
.nav-pill:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.nav-pill:active { transform: translateY(1px); }
html[data-theme="light"]:not([data-palette="mono"]) .nav-pill {
  background: #FFFFFF;
  border: 1.5px solid #E8E0E8;
  box-shadow: var(--shadow-soft);
}
html[data-theme="light"]:not([data-palette="mono"]) .nav-pill:hover {
  background: color-mix(in srgb, #FF8EC8 10%, #FFFFFF);
  border-color: color-mix(in srgb, #FF8EC8 35%, #E8E0E8);
}
html[data-theme="dark"]:not([data-palette="mono"]) .nav-pill {
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
html[data-theme="dark"]:not([data-palette="mono"]) .nav-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.22);
}
.nav-pill--login {
  background: color-mix(in srgb, var(--accent) 16%, var(--elevated));
}
html[data-theme="light"]:not([data-palette="mono"]) .nav-pill--login {
  background: color-mix(in srgb, #FF8EC8 14%, #FFFFFF);
  border-color: color-mix(in srgb, #FF8EC8 30%, #E8E0E8);
}

.nav-calc { position: relative; display: inline-flex; }
.nav-calc__btn { cursor: pointer; font: inherit; }
.nav-calc__chev {
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -.15rem;
  opacity: .7;
  transition: transform .15s ease;
}
.nav-calc.is-open .nav-calc__chev {
  transform: rotate(-135deg);
  margin-top: .15rem;
}
.nav-calc__menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 80;
  min-width: min(18rem, 86vw);
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .4rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  display: none; /* must not be flex while closed — overrides [hidden] */
  flex-direction: column;
  gap: .15rem;
}
.nav-calc.is-open .nav-calc__menu {
  display: flex;
}
.nav-calc__menu[hidden] {
  display: none !important;
}
html[data-theme="light"]:not([data-palette="mono"]) .nav-calc__menu {
  border: 2px solid #E8E0E8;
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
html[data-theme="dark"]:not([data-palette="mono"]) .nav-calc__menu {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.nav-calc__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .85rem;
  border-radius: calc(var(--radius) - 4px);
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: .95rem;
}
.nav-calc__item:hover,
.nav-calc__item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--elevated));
  outline: none;
}
.nav-calc__item.is-on {
  background: color-mix(in srgb, var(--accent) 16%, var(--elevated));
  font-weight: 700;
}
.nav-calc__item.plan-locked { opacity: .72; }
.nav-calc__item .lock-ico {
  margin-left: auto;
  flex-shrink: 0;
}
.nav-calc__label { flex: 1; min-width: 0; }

@media (max-width: 800px) {
  /* 3.7.23: calc submenu centered under header tools; clamp so labels never clip */
  .bar-tools {
    position: relative; /* positioning context for .nav-calc__menu when .nav-calc is static */
  }
  .nav-calc {
    position: static; /* anchor menu to .bar-tools (nav cluster), not the leftish trigger */
    width: auto;
    max-width: 100%;
  }
  .nav-calc__btn {
    width: auto;
  }
  .nav-calc__menu {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: min(16rem, calc(100vw - 1.5rem));
    max-width: min(18rem, calc(100vw - 1.5rem));
    width: max-content;
    max-height: min(70vh, 28rem);
  }
}

/* Hover / active polish — buttons, links, tabs (candy + Cool Mono) */
.btn,
.btn-primary,
.btn-bubble,
.stepper-row button {
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover,
.btn-primary:hover,
.btn-bubble:hover,
.stepper-row button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn:active,
.btn-primary:active,
.btn-bubble:active,
.stepper-row button:active {
  transform: translateY(0);
  filter: brightness(0.97);
}
.btn:focus-visible,
.btn-primary:focus-visible,
.linkish:focus-visible,
.theme-toggle:focus-visible,
.site-nav a:focus-visible,
.calc-tabs a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.site-nav a:hover,
.linkish:hover,
.theme-toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--elevated));
}
.site-nav a:active,
.linkish:active,
.theme-toggle:active {
  background: color-mix(in srgb, var(--accent) 18%, var(--elevated));
}
.calc-tabs a:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--elevated));
}
.calc-tabs a:active { filter: brightness(0.98); }
.calc-tabs a.on:hover { filter: brightness(1.05); }

html[data-palette="mono"] .calc-tile.is-active {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
html[data-palette="mono"] .btn:hover,
html[data-palette="mono"] .btn-primary:hover {
  filter: brightness(1.08);
}

/* Light: flat-leaning surfaces + clear #E8E0E8 edges (gloss less visible in light) */
html[data-theme="light"]:not([data-palette="mono"]) {
  --line: #E8E0E8;
  --card: #FFFFFF;
  --elevated: #FAF7FA;
  --input: #FFFFFF;
  --header: rgba(255, 255, 255, 0.94);
  --shadow: 0 4px 16px rgba(42, 36, 48, 0.07);
  --shadow-soft: 0 1px 6px rgba(42, 36, 48, 0.05);
  --glass-blur: 8px;
}
html[data-theme="light"]:not([data-palette="mono"]) .card,
html[data-theme="light"]:not([data-palette="mono"]) .site-header,
html[data-theme="light"]:not([data-palette="mono"]) .calc-tile,
html[data-theme="light"]:not([data-palette="mono"]) .partner-panel,
html[data-theme="light"]:not([data-palette="mono"]) .plan,
html[data-theme="light"]:not([data-palette="mono"]) .admin-section {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--card);
  border: 2px solid #E8E0E8;
  box-shadow: var(--shadow-soft);
}
html[data-theme="light"]:not([data-palette="mono"]) .calc-tile {
  border-width: 1.5px;
}
html[data-theme="light"]:not([data-palette="mono"]) .stepper-row button,
html[data-theme="light"]:not([data-palette="mono"]) .stepper input,
html[data-theme="light"]:not([data-palette="mono"]) select,
html[data-theme="light"]:not([data-palette="mono"]) textarea,
html[data-theme="light"]:not([data-palette="mono"]) input[type=text],
html[data-theme="light"]:not([data-palette="mono"]) input[type=email],
html[data-theme="light"]:not([data-palette="mono"]) input[type=password],
html[data-theme="light"]:not([data-palette="mono"]) input[type=number],
html[data-theme="light"]:not([data-palette="mono"]) .calc-tabs a {
  border: 1.5px solid #E8E0E8;
  box-shadow: none;
}
html[data-theme="light"]:not([data-palette="mono"]) .btn,
html[data-theme="light"]:not([data-palette="mono"]) .btn-primary,
html[data-theme="light"]:not([data-palette="mono"]) .btn-bubble {
  /* light: flatter candy fill; spare rim (dark keeps full soap-bubble) */
  background: linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 142, 200, 0.18) !important;
  border: 1.5px solid #E8E0E8 !important;
}
html[data-theme="light"]:not([data-palette="mono"]) .btn.secondary {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1.5px solid #E8E0E8 !important;
  box-shadow: none !important;
}
html[data-theme="light"]:not([data-palette="mono"]) .calc-tabs a.on,
html[data-theme="light"]:not([data-palette="mono"]) .langs a.on {
  background: linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%);
  color: #fff;
  border-color: transparent;
}
html[data-theme="light"]:not([data-palette="mono"]) body {
  background:
    radial-gradient(1000px 520px at 8% -8%, rgba(255, 142, 200, 0.18), transparent 58%),
    radial-gradient(900px 480px at 96% 0%, rgba(196, 168, 255, 0.16), transparent 54%),
    #F7F5F8;
}

/* Dark: KEEP soap-bubble / glossy candy (do not flatten) */
html[data-theme="dark"]:not([data-palette="mono"]) .btn,
html[data-theme="dark"]:not([data-palette="mono"]) .btn-primary,
html[data-theme="dark"]:not([data-palette="mono"]) .btn-bubble {
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 42%),
    var(--bubble-shine, linear-gradient(135deg, #FF8EC8 0%, #C4A8FF 100%));
  color: #FFFFFF; /* 3.2.4: readable on candy pink/violet */
  box-shadow:
    inset 0 0 18px var(--bubble-inner, rgba(255, 184, 224, 0.25)),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 28px rgba(255, 142, 200, 0.12),
    0 8px 28px rgba(196, 168, 255, 0.12);
  border: 1px solid var(--bubble-rim, rgba(255,255,255,.40));
}
html[data-theme="dark"]:not([data-palette="mono"]) .btn.secondary {
  color: var(--ink);
  background: var(--elevated);
}
html[data-theme="dark"]:not([data-palette="mono"]) .donors-cta .linkish {
  color: var(--accent-2);
}
html[data-theme="dark"]:not([data-palette="mono"]) .site-header {
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="dark"]:not([data-palette="mono"]) .card,
html[data-theme="dark"]:not([data-palette="mono"]) .calc-tile {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--card) 97%, transparent);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Partner below tiles/detail — compact strip feel on mobile */
.partner-panel {
  margin-top: 1.15rem;
}
@media (max-width: 800px) {
  .calc-tile { min-height: 7rem; padding: .75rem .7rem; }
  .calc-tiles__lede { font-size: .86rem; }
  .partner-panel {
    padding: .85rem;
  }
}

/* Hide legacy options-panel if any remnant markup */
.options-panel { display: none !important; }
.grid-2 { display: block; }
.hero { display: none !important; }


/* 3.1.0 UX iter2: tiles primary on narrow; compact tabs when scrolling detail */
@media (max-width: 479px) {
  .calc-tabs--compact { display: none; }
}
html[data-theme="dark"] .calc-tile.is-active {
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* UX iter2 marker */


/* 3.1.2: avatar lists show static frame; profile/flyover may animate */
.avatar-picker .avatar-option img,
.avatar-option img,
.donor-wall .donor-avatar img,
.donor-chip img {
  /* freeze SVG SMIL/CSS anim in compact lists via paused animation where supported */
}
.avatar-picker .avatar-option.is-animated img,
.donor-wall .donor-avatar img {
  /* Prefer first frame readability at 32–48px — level via color/crown/extra */
}
.vapcal-avatar-static .av-anim .emblem,
.vapcal-avatar-static .av-anim .ring,
.vapcal-avatar-static .av-anim .crown,
.vapcal-avatar-static .av-anim .shades,
.avatar-picker .av-anim .emblem,
.avatar-picker .av-anim .ring,
.avatar-picker .av-anim .crown,
.avatar-picker .av-anim .shades {
  animation: none !important;
}


/* === 3.1.3: dense quiet header, adult locks, vapor band, focus-trap === */
.nav-calc__item { gap: .5rem; }

/* Quiet Spender / Wallpaper — not a second pill bar; ≥44px touch */
.nav-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  min-width: 44px;
  padding: .35rem .55rem;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  opacity: .88;
  transition: background .12s ease, opacity .12s ease, color .12s ease;
}
.nav-quiet:hover,
.nav-quiet:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}
.nav-quiet:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.nav-quiet__ico {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}
.nav-quiet__ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="light"]:not([data-palette="mono"]) .nav-quiet__ico { color: #8B8494; }
html[data-theme="light"]:not([data-palette="mono"]) .nav-quiet:hover .nav-quiet__ico { color: #FF6B9D; }
html[data-theme="dark"]:not([data-palette="mono"]) .nav-quiet__ico { color: color-mix(in srgb, var(--accent) 55%, #E8E0E8); }
/* 3.6.6: icon-only quiet dock under 800px (see 3.6.6 block); 520 kept for older specificity */
@media (max-width: 520px) {
  .bar-quiet .nav-quiet__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bar-quiet .nav-quiet { padding: .4rem; }
}

/* Adult flat-stroke locks — charcoal light / candy dark; not toy */
.lock-ico {
  color: #5C5666;
}
html[data-theme="dark"] .lock-ico {
  color: color-mix(in srgb, var(--accent) 45%, #C4B8C8);
}
html[data-theme="light"]:not([data-palette="mono"]) .lock-ico { color: #6B6575; }
.nav-calc__item.plan-locked,
.calc-tile.plan-locked {
  cursor: pointer; /* still navigable — hint only, never blocks home */
}
.nav-calc__item.plan-locked .nav-calc__label {
  opacity: .78;
}
.calc-tile.plan-locked .calc-tile__name { opacity: .85; }
.calc-tile.plan-locked .calc-tile__desc { opacity: .75; }

/* Keep calc UI above vapor; vapor stays in opacity band with calm center */
#calculator,
.calc-detail,
.calc-tiles {
  position: relative;
  z-index: 1;
}


/* === 3.1.4: SEO h1 + lean remnants === */
/* 3.2.1: visible title is the chip; page-h1 stays sr-only for SEO */
.page-h1 {
  /* visual styles unused when paired with .sr-only */
  margin: 0;
  font-family: var(--font-display, var(--font));
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* === 3.1.5: UX polish — focus, mobile touch, hover gated === */
.nav-toggle {
  min-height: 44px;
  min-width: 44px;
}
.skip:focus-visible {
  left: 8px;
  z-index: 100;
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.calc-tile:focus-visible,
.calc-tiles__toggle:focus-visible,
.nav-calc__btn:focus-visible,
.nav-quiet:focus-visible,
.wallpaper-option:focus-visible,
.stepper-row button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
/* Avoid sticky hover on touch devices */
@media (hover: hover) and (pointer: fine) {
  .calc-tile:hover {
    transform: translateY(-1px);
  }
  .nav-quiet:hover {
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .site-nav.open {
    gap: .35rem;
    padding-bottom: .35rem;
  }
  .site-nav.open .nav-pill,
  .site-nav.open .nav-quiet,
  .site-nav.open .nav-calc__btn {
    min-height: 44px;
  }
  /* page-h1 is sr-only since 3.2.1 — no mobile visual sizing */
  .partner-panel {
    margin-top: 1rem;
  }
}
/* Keep Soft candy mist mode-split: light flat / dark gloss on small chrome */

/* === 3.2.0: idle vapor start, lighter panel blur, tile anim when expanded === */

/* Page vapor: layers present; drift only when --on (after idle start) */
.vapor-bg--idle .vapor-bg__layer--a,
.vapor-bg--idle .vapor-bg__layer--b,
.vapor-bg--idle .vapor-bg__layer--c {
  animation: none !important;
}
.vapor-bg--idle .vapor-bg__layer,
.vapor-bg--on.vapor-bg--paused .vapor-bg__layer {
  will-change: auto;
}
.vapor-bg--on:not(.vapor-bg--paused) .vapor-bg__layer {
  will-change: transform;
}
.vapor-bg--on.vapor-bg--paused .vapor-bg__layer--a,
.vapor-bg--on.vapor-bg--paused .vapor-bg__layer--b,
.vapor-bg--on.vapor-bg--paused .vapor-bg__layer--c {
  animation-play-state: paused;
}

/* Tile vapor/coil soft loops: only when grid expanded AND anim flag (viewport) */
.calc-tiles.is-collapsed .calc-tile__vapor *,
.calc-tiles:not(.tiles-anim-on) .calc-tile__vapor * {
  animation: none !important;
}
.calc-tiles.tiles-anim-paused .calc-tile__vapor * {
  animation-play-state: paused !important;
}

/* Dark: solid-leaning large panels (no heavy blur); modest gloss on header/small chrome */
html[data-theme="dark"]:not([data-palette="mono"]) .card,
html[data-theme="dark"]:not([data-palette="mono"]) .calc-tile,
html[data-theme="dark"]:not([data-palette="mono"]) .partner-panel,
html[data-theme="dark"]:not([data-palette="mono"]) .plan,
html[data-theme="dark"]:not([data-palette="mono"]) .admin-section,
html[data-theme="dark"]:not([data-palette="mono"]) #calculator {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--card) 97%, transparent);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="dark"]:not([data-palette="mono"]) .site-header {
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}
html[data-theme="dark"]:not([data-palette="mono"]) body.has-wallpaper .wrap > .card,
html[data-theme="dark"]:not([data-palette="mono"]) body.has-wallpaper #calculator,
html[data-theme="dark"]:not([data-palette="mono"]) body.has-wallpaper .grid-2 > .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--card) 94%, transparent);
}
/* Light wallpaper cards: keep flat (no heavy frosted blur on large surfaces) */
html[data-theme="light"]:not([data-palette="mono"]) body.has-wallpaper .wrap > .card,
html[data-theme="light"]:not([data-palette="mono"]) body.has-wallpaper #calculator,
html[data-theme="light"]:not([data-palette="mono"]) body.has-wallpaper .grid-2 > .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--card);
}

/* === 3.2.1 / 3.5.18: drop duplicate calc titles, soft chart divider === */
#chart .chart-sep {
  height: 0;
  margin: .7rem 0 .55rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  opacity: .7;
}
/* Soft candy mist Mode-Split unchanged (light flat / dark gloss) */


/* === 3.2.2: plans folded into Spender (collapsible Free / Donator) === */
.donors-perks { margin-bottom: 1rem; }
.plan-grid--collapse { align-items: start; }
.plan-grid--collapse > .plan {
  padding: 0;
  overflow: hidden;
}
.plan-grid--collapse .plan__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
  padding: .85rem 1rem;
  font-weight: 600;
  min-height: 44px;
}
.plan-grid--collapse .plan__summary::-webkit-details-marker { display: none; }
.plan-grid--collapse .plan__summary::after {
  content: '+';
  font-weight: 500;
  color: var(--muted);
  margin-left: .35rem;
}
.plan-grid--collapse details[open] > .plan__summary::after { content: '–'; }
.plan-grid--collapse .plan__price { font-weight: 500; color: var(--muted); }
.plan-grid--collapse .plan__price small { margin-left: .25rem; font-weight: 400; }
.plan-grid--collapse .plan__body { padding: 0 1rem 1rem; }
.plan-grid--collapse .plan__body h3 { font-size: 1rem; margin: .6rem 0 .35rem; }


/* === 3.2.3: unified Inter type + rising vapor mist === */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --font-display: var(--font);
}
h1, h2, h3, .site-header .brand-name, .hero h1, .page-h1 {
  font-family: var(--font);
}
.site-header .brand-name {
  font-weight: 650;
  letter-spacing: -0.02em;
}
/* Rising vapor: keep Soft candy palette; idle/pause/reduced-motion from 3.2.0 */
/* No extra will-change while idle; tile loops only when expanded (unchanged) */


/* === 3.2.4: Spenden CTA clarity + Perks collapse defaults === */
.donors-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
}
.donors-cta__hint {
  flex: 1 1 12rem;
  margin: 0;
  font-size: .92rem;
}
.donors-cta__login {
  font-size: .92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: .2rem 0;
  min-height: auto;
}
.donors-cta .btn + .btn { display: none; } /* guard against dual pink CTAs */


/* === 3.2.5: cumulus vapor, manga avatars calm in lists, donor hall === */
.vapcal-avatar.is-animated {
  /* Large/profile may animate; keep header/lists calm Swiss */
}
.donor-wall-list .vapcal-avatar.is-animated,
.site-header .vapcal-avatar.is-animated,
.admin-users .vapcal-avatar.is-animated {
  animation: none !important;
}
.donor-wall-list .vapcal-avatar.is-animated .emblem,
.donor-wall-list .vapcal-avatar.is-animated .ring,
.donor-wall-list .vapcal-avatar.is-animated .crown,
.donor-wall-list .vapcal-avatar.is-animated .shades,
.site-header .vapcal-avatar.is-animated .emblem,
.site-header .vapcal-avatar.is-animated .ring,
.site-header .vapcal-avatar.is-animated .crown,
.site-header .vapcal-avatar.is-animated .shades {
  animation: none !important;
}
.account .avatar-picker .vapcal-avatar.is-animated .emblem,
.account .avatar-picker .vapcal-avatar.is-animated .ring,
.account .avatar-picker .vapcal-avatar.is-animated .crown,
.account .avatar-picker .vapcal-avatar.is-animated .shades,
.avatar-flyover .vapcal-avatar.is-animated .emblem,
.avatar-flyover .vapcal-avatar.is-animated .ring,
.avatar-flyover .vapcal-avatar.is-animated .crown,
.avatar-flyover .vapcal-avatar.is-animated .shades {
  /* profile / flyover: allow SVG-internal anims */
}


/* === 3.2.5 UI: lock-donate modal, cookie consent, age dismiss === */
.age-banner__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin: 0;
  padding: .35rem .75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
}
.age-banner__dismiss {
  font-size: 1.25rem;
  line-height: 1;
  opacity: .7;
}
.age-banner__btn:hover .age-banner__dismiss,
.age-banner__btn:focus-visible .age-banner__dismiss { opacity: 1; }

.vapcal-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.vapcal-modal[hidden] { display: none !important; }
.vapcal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #1A1620 45%, transparent);
  border: 0;
  cursor: pointer;
}
.vapcal-modal__panel {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  padding: 1.25rem 1.35rem;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 50px color-mix(in srgb, #1A1620 22%, transparent);
}
html[data-theme="light"] .vapcal-modal__panel {
  background: color-mix(in srgb, var(--card) 92%, #FFF8F4);
  border: 1.5px solid var(--line);
}
html[data-theme="dark"] .vapcal-modal__panel {
  background: color-mix(in srgb, var(--card) 88%, #2A2430);
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.vapcal-modal__title { margin: 0 0 .5rem; font-size: 1.2rem; }
.vapcal-modal__body { margin: 0 0 1rem; line-height: 1.45; }
.vapcal-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

.cookie-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 85;
  padding: .85rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cookie-consent[hidden] { display: none !important; }
.cookie-consent__panel {
  pointer-events: auto;
  width: min(40rem, 100%);
  padding: 1rem 1.15rem;
  border-radius: calc(var(--radius) + 4px);
  border: 1.5px solid var(--line);
  box-shadow: 0 12px 40px color-mix(in srgb, #1A1620 20%, transparent);
  background: color-mix(in srgb, var(--card) 94%, #FFF8F4);
}
html[data-theme="dark"] .cookie-consent__panel {
  background: color-mix(in srgb, var(--card) 90%, #2A2430);
}
.cookie-consent__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.cookie-consent__body { margin: 0 0 .85rem; font-size: .95rem; line-height: 1.45; }
.cookie-consent__cats {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0 0 .75rem;
}
.cookie-cat {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .55rem .65rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--card) 88%, #FFF5F0);
  cursor: pointer;
}
html[data-theme="dark"] .cookie-cat {
  background: color-mix(in srgb, var(--card) 92%, #2A2430);
}
.cookie-cat--essential {
  opacity: .96;
  cursor: default;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.cookie-cat input {
  margin-top: .2rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.cookie-cat input:disabled {
  opacity: .85;
}
.cookie-cat__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.cookie-cat__name {
  font-weight: 650;
  font-size: .95rem;
}
.cookie-cat__desc {
  font-size: .82rem;
  line-height: 1.35;
}
.cookie-consent__more {
  margin: 0 0 .75rem;
  font-size: .9rem;
}
.cookie-consent__more a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-prefs-row { margin: .75rem 0 0; }
.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* === 3.5.10 Soft candy cookie categories === */
.crown-badge { color: #C9A227; }
html[data-theme="dark"] .crown-badge { color: #FFD4A8; }

/* === 3.2.6: admin pages, account tiles, nav avatar, strong danger === */
.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: .5rem;
}
.admin-head h1 { margin: 0; }
.nav-admin { position: relative; display: inline-flex; }
.nav-admin.is-open .nav-calc__chev { transform: rotate(180deg); }
.nav-admin__menu { z-index: 40; }
.nav-pill--account {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--line);
  background: var(--elevated);
}
.account-tile {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: .65rem .9rem;
  margin: .85rem 0;
  background: var(--elevated);
  box-shadow: var(--shadow-soft);
}
.account-tile > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
}
.account-tile > summary::-webkit-details-marker { display: none; }
.account-tile > summary::after {
  content: '+';
  font-weight: 700;
  color: var(--muted);
}
.account-tile[open] > summary::after { content: '−'; }
.account-tile--danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}
.account-tile--danger > summary { color: var(--danger); }
.btn.danger.btn-danger-strong,
.btn-danger-strong {
  background: #B71C1C !important;
  color: #fff !important;
  border: 2px solid #7F0000 !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(183, 28, 28, .35);
}
.btn.danger.btn-danger-strong:hover {
  filter: brightness(1.08);
}
html[data-theme="light"]:not([data-palette="mono"]) .btn.danger.btn-danger-strong {
  background: #C62828 !important;
  border-color: #8E0000 !important;
}
.admin-tool-tiles,
.admin-legal-langs {
  display: grid;
  gap: .75rem;
}
.admin-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  background: var(--elevated);
}
.admin-tile > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 40px;
}
.admin-sysinfo .stats-card,
.stats-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  background: var(--elevated);
}
.btn-sm { padding: .35rem .6rem; font-size: .85rem; }
.grow { flex: 1; min-width: 12rem; }

/* === 3.2.7: dark vapor clarity + theme blur filters === */
/* Default/light soft blur; dark uses sharper, lighter blur */
/* 3.8.3: filter only when vapor is on (see end-of-file Mode-Split/perf block) */
.vapor-bg--on .vapor-bg__soft { filter: url(#vaporSoft); }
html[data-theme="dark"] .vapor-bg--on .vapor-bg__soft { filter: url(#vaporSoftDark); }
/* Dark: drop top layer + dense puffs so fewer shapes stay readable */
html[data-theme="dark"] .vapor-bg__layer--c { display: none; }
html[data-theme="dark"] .vapor-bg__puff--dense { display: none; }
/* Dark: slightly stronger remaining layer opacity (clearer silhouettes) */
html[data-theme="dark"] .vapor-bg__layer--a { opacity: .48; }
html[data-theme="dark"] .vapor-bg__layer--b { opacity: .40; }

/* 3.2.9: Admin hub tiles (Konto parity) + admin nav-pill */
.nav-pill--admin.is-on { box-shadow: inset 0 0 0 1px var(--accent, #ff8ec8); }
.admin-page .admin-tile { margin-top: .65rem; }
.admin-page .admin-tile > .admin-section:first-child { margin-top: .35rem; }
.account-perks-plans { margin-top: .75rem; }
.account-perks-plans .plan.is-current > .plan__summary { font-weight: 600; }

/* 3.2.10: Soft candy Impressum — card stack, Inter, muted help */
/* 3.2.11: calculator i18n consistency (PG/VG and all modes) */
.legal-page {
  gap: .85rem;
}
.legal-page > .card > h1 {
  margin: 0 0 .35rem;
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.legal-page > .card > h2 {
  margin: 0 0 .65rem;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.legal-page .legal-meta {
  margin: 0 0 .45rem;
}
.legal-page .legal-field {
  margin: .35rem 0;
  line-height: 1.45;
}
.legal-page .help {
  margin: 0 0 .75rem;
}
.legal-page .legal-block {
  margin: .75rem 0 0;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* 3.2.12: batch cost calculator — base data + targets, mobile-first soft candy */
.cost-calc { display: grid; gap: .75rem; }
.cost-block {
  margin: 0;
  padding: .75rem .85rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 1rem);
  background: var(--elevated, rgba(255,255,255,.55));
}
html[data-theme="dark"] .cost-block {
  background: rgba(30, 24, 40, .45);
}
.cost-block > legend {
  padding: 0 .35rem;
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.cost-pair { margin: .55rem 0; }
.cost-pair__label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  font-size: .95rem;
}
.cost-pair__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.cost-pair__fields--nic {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 520px) {
  .cost-pair__fields--nic {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.cost-pair__field {
  display: grid;
  gap: .2rem;
  font-size: .8rem;
  color: var(--muted, #6b6570);
}
.cost-pair__field .num-row-in input,
.cost-calc select {
  width: 100%;
  min-width: 0;
}
.cost-results {
  margin-top: .35rem;
}
.cost-results.soft-card {
  padding: .75rem .9rem;
  border-radius: var(--radius, 1rem);
  border: 1px solid var(--line);
  background: var(--elevated, rgba(255, 182, 210, .12));
}
.cost-break {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  gap: .25rem;
  font-size: .9rem;
}
.cost-break li {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: baseline;
}

/* 3.2.13: Soft candy preset bar — horizontal, mobile-friendly */
.preset-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .55rem;
  margin: 0 0 .85rem;
  padding: .55rem .7rem;
  border-radius: var(--radius, 1rem);
  border: 1px solid var(--line);
  background: var(--elevated, rgba(255, 182, 210, .12));
}
.preset-bar__label {
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--muted, #6b6570);
  margin: 0;
}
.preset-bar__select {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 100%;
}
.preset-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.preset-bar__actions .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .preset-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .preset-bar__select {
    width: auto;
    max-width: min(14rem, 100%);
    flex: 0 1 14rem;
  }
  .preset-bar__actions {
    justify-content: flex-start;
  }
}

/* === 3.2.14: palette toggle in header; Cool Mono; lang size; mono light inputs === */
.palette-toggle {
  border: 0;
  min-width: 2.2rem;
  min-height: 2.2rem;
  font-size: .95rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  padding: .35rem .55rem;
  cursor: pointer;
}
.palette-toggle:hover {
  background: var(--elevated);
}
.palette-toggle:active {
  transform: scale(0.96);
}
.palette-toggle.is-on,
.palette-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--elevated) 70%, #5B8DEF 18%);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #5B8DEF 45%, var(--line));
}
.theme-area.nav-controls .palette-toggle {
  order: 0;
}
.theme-area.nav-controls .theme-toggle {
  order: 1;
}
.theme-area.nav-controls .lang-compact {
  order: 2;
}

/* Slightly larger language picker text — soft candy, layout intact */
.lang-compact > summary {
  font-size: .78rem !important;
  padding: .28rem .48rem !important;
  max-width: 3.6rem;
}
.langs--compact a {
  font-size: .9rem;
  padding: .28rem .58rem;
}

/* Cool Mono + light: stronger input/select/textarea borders */
html[data-palette="mono"][data-theme="light"] .stepper input,
html[data-palette="mono"][data-theme="light"] select,
html[data-palette="mono"][data-theme="light"] textarea,
html[data-palette="mono"][data-theme="light"] input[type=text],
html[data-palette="mono"][data-theme="light"] input[type=email],
html[data-palette="mono"][data-theme="light"] input[type=password],
html[data-palette="mono"][data-theme="light"] input[type=number],
html[data-palette="mono"][data-theme="light"] .stepper-row input {
  border-color: rgba(30, 40, 60, 0.42);
  border-width: 1.5px;
}
html[data-palette="mono"][data-theme="light"] {
  --line: rgba(30, 40, 60, 0.28);
  --input: rgba(255, 255, 255, 0.92);
}

/* Account kerle-toggle: Cool Mono account text toggle */
.kerle-toggle {
  font-size: .72rem !important;
}


/* === 3.2.15: managed countries + per-donation comments === */
#account-donations-table .donation-comment-field {
  width: 100%;
  min-width: 8rem;
  resize: vertical;
  text-align: center;
}
#admin-countries-table input[type="text"],
#admin-countries-table input[data-country-field="name"] {
  min-width: 8rem;
}


/* === 3.2.16: email confirm + account perks expand === */
.candy-verify .ok { font-weight: 600; }
#accountPerksPlans details.plan[open] > .plan__body { display: block; }
#login-resend-wrap { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }

/* === 3.2.17: wallpaper photo gallery + admin UX === */
.wallpaper-page { max-width: 72rem; }
.wp-gallery {
  column-count: 1;
  column-gap: .85rem;
  margin-top: 1rem;
}
@media (min-width: 560px) {
  .wp-gallery { column-count: 2; }
}
@media (min-width: 900px) {
  .wp-gallery { column-count: 3; }
}
.wp-gallery__item {
  break-inside: avoid;
  margin: 0 0 .95rem;
  border: 1px solid var(--border, rgba(255, 107, 157, .22));
  border-radius: 1rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 94%, #FF6B9D 6%);
  box-shadow: 0 8px 24px color-mix(in srgb, #FF6B9D 12%, transparent);
}
.wp-gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.wp-gallery__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.wp-gallery__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  padding: .65rem .75rem .8rem;
}
.wp-gallery__label {
  flex: 1 1 8rem;
  font-size: .88rem;
  font-weight: 600;
}
.wp-gallery__item.is-locked .wp-gallery__thumb img { filter: saturate(.85); }
.wp-gallery__item .lock-badge {
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, #C4A8FF);
  color: var(--fg, inherit);
}
.wp-lightbox[hidden] { display: none !important; }
.wp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.wp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #1A1620 72%, transparent);
  border: 0;
  cursor: pointer;
}
.wp-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 56rem);
  max-height: 92vh;
  overflow: auto;
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
}
.wp-lightbox__title {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
}
.wp-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .75rem;
  background: #1A1620;
}
.wp-lightbox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}
body.wp-lightbox-open { overflow: hidden; }

/* Admin Soft candy forms + dense inline edits */
.soft-candy-form label,
.admin-create-user label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 600;
  font-size: .9rem;
}
.soft-candy-form input,
.soft-candy-form select,
.admin-create-user input,
.admin-create-user select {
  min-height: 2.55rem;
  height: 2.55rem;
  padding: .45rem .7rem;
  border: 1.5px solid color-mix(in srgb, #FF6B9D 35%, var(--border, #e8d5de));
  border-radius: .75rem;
  background: var(--card, #fff);
  font: inherit;
  box-sizing: border-box;
}
.admin-create-user {
  max-width: 28rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, #FF6B9D 22%, var(--border, #e8d5de));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 92%, #FF6B9D 8%);
  margin-bottom: 1rem;
}
.admin-users-table input.admin-inline-edit,
.admin-users-table select.admin-inline-edit {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  padding: .2rem .35rem;
  min-height: 1.7rem;
  height: auto;
  font-size: inherit;
  border-radius: .4rem;
  width: auto;
  max-width: 100%;
}
.admin-users-table input.admin-inline-edit:focus,
.admin-users-table select.admin-inline-edit:focus {
  border-color: color-mix(in srgb, #FF6B9D 45%, var(--border, #e8d5de));
  background: var(--card, #fff);
  outline: 2px solid color-mix(in srgb, #C4A8FF 40%, transparent);
}

/* Plans vertical cards */
.admin-plans-vertical {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .75rem;
}
.admin-plan-card {
  margin: 0;
  padding: .9rem 1rem 1rem;
}
.admin-plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.admin-plan-card__slug {
  font-size: 1.05rem;
}
.admin-plan-card__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem .75rem;
}
@media (min-width: 640px) {
  .admin-plan-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.admin-plan-card__fields label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .88rem;
  font-weight: 600;
}
.admin-plan-card__fields input {
  min-height: 2.4rem;
  padding: .4rem .65rem;
  border: 1.5px solid color-mix(in srgb, #FF6B9D 30%, var(--border, #e8d5de));
  border-radius: .65rem;
  font: inherit;
}
.admin-plan-card__flags {
  margin: .85rem 0 0;
  padding: .65rem .75rem;
  border: 1px dashed color-mix(in srgb, #C4A8FF 40%, var(--border, #e8d5de));
  border-radius: .75rem;
}
.admin-plan-card__flags legend {
  padding: 0 .35rem;
  font-weight: 700;
  font-size: .85rem;
}
.admin-plan-flags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .85rem;
}

/* Friends / legal / plans Soft candy spacing parity */
#admin-friends .table-wrap,
#admin-impressum,
#admin-plans {
  margin-top: .35rem;
}
#admin-friends .inline-form input,
#admin-friends .inline-form button,
#add-friend-form input {
  min-height: 2.4rem;
  border-radius: .65rem;
}
#admin-impressum textarea,
#admin-impressum input {
  border: 1.5px solid color-mix(in srgb, #FF6B9D 28%, var(--border, #e8d5de));
  border-radius: .65rem;
}


/* === 3.3.0: locked calc tile, perf/security harden, no header tagline === */
.calc-detail--locked { text-align: center; }
.calc-lock-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
}
.calc-lock-tile__icon .lock-ico { width: 2rem; height: 2rem; }
.calc-lock-tile__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--font);
}
.calc-lock-tile__hint { text-align: left; width: 100%; margin: 0; }
.calc-lock-tile__cta { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0; }
.admin-tile__nav { color: inherit; text-decoration: none; }
.admin-tile__nav:hover { text-decoration: underline; }
.wp-gallery__img { object-fit: cover; width: 100%; height: auto; background: var(--card); }


/* === 3.3.2: admin system stats + soft-candy config + wraps metals === */
/* === 3.3.1: PG/VG target mode + admin tile nav === */
.pgvg-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;
  margin: 0 0 .55rem;
}
.pgvg-target {
  margin-top: .35rem;
  padding: .65rem .75rem;
  border-radius: var(--radius, 1rem);
  border: 1px solid var(--line);
  background: var(--elevated, rgba(255, 182, 210, .10));
}
.admin-tile[data-admin-section] summary { cursor: pointer; }


/* === 3.3.3: blacklist edit + audit/backup Soft candy === */
.soft-candy-table input.blacklist-word {
  width: 100%;
  min-width: 8rem;
  font: inherit;
}
#admin-backups-table input[type="radio"] {
  accent-color: var(--accent, #7c6cf0);
}
#admin-audit-settings,
#admin-backup-settings {
  margin-bottom: 0.75rem;
}
#backup-storage-path {
  word-break: break-all;
}

/* === 3.5.8: Soft candy compact backup === */
#admin-backup-meta {
  gap: 0.35rem 1rem;
  margin-bottom: 0.5rem;
}
#admin-backup-meta p { margin: 0; }
.admin-backup-actions { margin: 0.35rem 0 0.5rem; flex-wrap: wrap; gap: 0.4rem; }
.admin-backups-wrap { margin-top: 0.25rem; }
#admin-backups-table a.backup-name {
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
  word-break: break-all;
}
#admin-backups-table a.backup-name:hover,
#admin-backups-table a.backup-name:focus-visible {
  color: var(--accent, #6b4c9a);
}
#admin-backups-table .backup-actions .btn { padding: 0.2rem 0.55rem; }
.admin-backup-upload { margin-top: 0.65rem; }

/* === 3.3.4: admin subtilles + Soft candy donor flyover === */
.admin-page .admin-subtile {
  margin-top: .55rem;
}
.admin-page .admin-subtile > summary {
  font-weight: 650;
  cursor: pointer;
}
.admin-page .admin-subtile .admin-section-body {
  margin-top: .45rem;
  padding: .15rem .1rem .35rem;
}
.admin-page .admin-subtile .admin-tile {
  margin-top: .4rem;
}
.avatar-flyover.soft-candy-flyover {
  /* 3.6.10: wider detail so support table has room */
  min-width: 320px;
  max-width: min(520px, calc(100vw - 1rem));
}
.avatar-flyover.soft-candy-flyover .avatar-flyover__inner {
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
}
.avatar-flyover__scroll {
  margin-top: .35rem;
  max-height: 16rem;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  padding-right: .15rem;
}
.avatar-flyover__comment,
.avatar-flyover__about {
  margin: .3rem 0 0;
  text-align: left;
  font-size: .9rem;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}
.avatar-flyover__comment {
  font-style: italic;
  color: var(--ink);
}
.avatar-flyover__about {
  color: var(--muted, inherit);
}
.donor-wall-sort.soft-candy-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
}

/* === 3.3.5: checkout donation Soft candy + major-unit amount === */
.checkout-donation .checkout-amount-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .45rem .55rem;
  align-items: center;
}
.checkout-donation .checkout-amount-row input[type="number"],
.checkout-donation .checkout-amount-row .donate-amount-input {
  min-width: 4.25rem;
  max-width: 6.5rem;
  width: 5.5rem;
  flex: 0 1 5.5rem;
}
.checkout-donation .checkout-amount-row select {
  flex: 1 1 auto;
  min-width: 5.5rem;
}
/* 3.5.1/3.5.2 Soft candy chip for donate create-account (opt-in; alias keeps opt-out class) */
.soft-candy-chip,
.donate-opt-out-chip,
.donate-create-account-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-bubble, 14px);
  border: 1px solid color-mix(in srgb, #FF6B9D 28%, var(--line, #e8d5de));
  background: color-mix(in srgb, var(--elevated, #fff) 88%, #FFD6E8);
  font-weight: 650;
  font-size: .92rem;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.soft-candy-chip input[type="checkbox"],
.donate-opt-out-chip input[type="checkbox"],
.donate-create-account-chip input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
.soft-candy-chip span,
.donate-opt-out-chip span,
.donate-create-account-chip span {
  line-height: 1.35;
}
.donate-email-fields[hidden] {
  display: none !important;
}
.auth-page--wide,
#register-page.account-page {
  max-width: 52rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.candy-verify--center,
#confirm-email-page.candy-verify {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.checkout-donation__body {
  margin: 0 0 .85rem;
  line-height: 1.45;
}
.checkout-perks {
  margin-top: .85rem;
}
.checkout-perks > summary.checkout-perks__summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.checkout-perks > summary.checkout-perks__summary::-webkit-details-marker { display: none; }
.checkout-perks__body { margin-top: .65rem; }

/* === 3.3.6 inline Spenden + level admin === */
.donors-tile { margin-bottom: 1rem; }
.donors-tile__body { padding: 0.75rem 0.25rem 0.5rem; }
.donors-donate-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--candy-pink, #ff8ec8) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--candy-pink, #ff8ec8) 25%, transparent);
}
.donors-donate-panel[hidden] { display: none !important; }
.admin-levels-list { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.admin-level-card__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.admin-level-card__fields { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.admin-fx-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); margin-bottom: 0.75rem; }

/* === 3.3.7 legal full markup per language === */
.legal-page .legal-block.legal-markup {
  white-space: normal;
}
.legal-markup > :first-child { margin-top: 0; }
.legal-markup > :last-child { margin-bottom: 0; }
.legal-markup h2,
.legal-markup h3,
.legal-markup h4 {
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 1rem 0 .45rem;
}
.legal-markup p { margin: .45rem 0; line-height: 1.55; }
.legal-markup ul,
.legal-markup ol {
  margin: .45rem 0 .45rem 1.15rem;
  padding: 0;
  line-height: 1.5;
}
.legal-markup a {
  color: var(--accent, #c2185b);
  text-decoration: underline;
  text-underline-offset: .12em;
}
.legal-markup strong { font-weight: 650; }
#admin-impressum textarea.legal-markup-input,
#admin-langs ~ #admin-impressum textarea.legal-markup-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.45;
  min-height: 8rem;
  border: 1.5px solid color-mix(in srgb, #FF6B9D 28%, var(--border, #e8d5de));
  border-radius: .65rem;
}

/* === 3.3.8 Soft candy contact + inbox read badge === */
.contact-page {
  max-width: 32rem;
}
.contact-page .contact-blurb {
  margin-bottom: 1rem;
  line-height: 1.5;
}
.contact-page .soft-candy-form textarea,
.soft-candy-form textarea {
  min-height: 8rem;
  padding: .65rem .75rem;
  border: 1.5px solid color-mix(in srgb, #FF6B9D 35%, var(--border, #e8d5de));
  border-radius: .75rem;
  background: var(--card, #fff);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
  width: 100%;
}
.contact-page .field-help.contact-empty-hint {
  margin: -.25rem 0 .35rem;
  font-size: .85rem;
}
.contact-success.soft-candy-empty {
  padding: 1.1rem 1.15rem;
  border: 1.5px solid color-mix(in srgb, #7ED321 35%, var(--border, #e8d5de));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 90%, #7ED321 10%);
  margin-bottom: 1rem;
}
.contact-success__actions {
  margin: .75rem 0 0;
}
.soft-candy-empty {
  padding: .85rem 1rem;
  border-radius: .85rem;
  text-align: center;
}
.admin-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .4rem;
  margin-left: .35rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  color: #fff;
  background: color-mix(in srgb, #FF6B9D 82%, #c2185b 18%);
  box-shadow: 0 1px 2px color-mix(in srgb, #FF6B9D 35%, transparent);
}
html[data-theme="dark"] .admin-unread-badge {
  background: color-mix(in srgb, #FF6B9D 70%, #ff8fb8 30%);
  color: #1a0a12;
}
#admin-contact-inbox tr.inbox-unread td {
  font-weight: 600;
}
#admin-contact-inbox tr.inbox-read td {
  opacity: .88;
}
#admin-contact-inbox .inbox-msg {
  max-width: 28rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 400;
}
.btn.btn-sm,
button.btn.btn-sm {
  min-height: 2rem;
  padding: .25rem .65rem;
  font-size: .85rem;
}

/* === 3.3.9 Soft candy audit log: compact filters/sort/pager === */
.admin-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  align-items: flex-end;
  margin: .35rem 0 .65rem;
}
.admin-audit-filters label {
  font-size: .78rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 6.5rem;
}
.admin-audit-filters input,
.admin-audit-filters select {
  font-size: .78rem;
  padding: .28rem .4rem;
  min-height: 1.85rem;
}
#admin-audit.admin-audit-table,
.admin-audit-table,
#admin-donations-table.admin-donations-table {
  font-size: .72rem;
  width: 100%;
}
.admin-audit-table th,
.admin-audit-table td,
#admin-donations-table.admin-donations-table th,
#admin-donations-table.admin-donations-table td {
  padding: .28rem .35rem;
  vertical-align: top;
  line-height: 1.25;
}
#admin-donations-table.admin-donations-table input.admin-inline-edit,
#admin-donations-table.admin-donations-table select.admin-inline-edit,
#admin-donations-table.admin-donations-table textarea.admin-inline-edit {
  font-size: .72rem;
  min-height: 1.65rem;
  height: auto;
  padding: .2rem .35rem;
  border-radius: .45rem;
}
#admin-donations-table.admin-donations-table textarea.admin-inline-edit {
  min-height: 2.4rem;
  line-height: 1.25;
}
#admin-donations-table.admin-donations-table th a.audit-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
#admin-donations-table.admin-donations-table th a.audit-sort:hover {
  color: var(--accent, #FF6B9D);
  text-decoration: underline;
}
.admin-audit-table th a.audit-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.admin-audit-table th a.audit-sort:hover {
  color: var(--accent, #FF6B9D);
  text-decoration: underline;
}
.admin-audit-table .audit-user-id {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: color-mix(in srgb, #FF6B9D 55%, var(--text, #222));
}
.admin-audit-table .audit-detail {
  max-width: 16rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .7rem;
}
.admin-audit-table code {
  font-size: .7rem;
}
.admin-audit-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-top: .55rem;
}
.admin-audit-pager .btn {
  font-size: .75rem;
  padding: .28rem .55rem;
  min-height: 1.75rem;
}
.admin-audit-wrap {
  overflow-x: auto;
}
html[data-theme="dark"] .admin-audit-table .audit-user-id {
  color: color-mix(in srgb, #FF8FB8 70%, #fff 30%);
}


/* === 3.3.10 Soft candy preset name overlay === */
#preset-name-modal .vapcal-modal__panel {
  width: min(24rem, 100%);
}
#preset-name-modal .soft-candy-form label {
  display: grid;
  gap: .35rem;
}
#preset-name-modal #preset-name-input {
  width: 100%;
}


/* === 3.3.12 Soft candy auth (login / register / forgot / reset / confirm) === */
/* 3.5.17: center auth tiles (login/forgot/reset/confirm) like candy-verify--center */
.auth-page,
.card.narrow {
  max-width: 28rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.auth-page--center,
.auth-page.candy-verify--center {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 28rem;
}
.auth-page .auth-blurb {
  margin-bottom: .85rem;
  line-height: 1.5;
}
.auth-page .soft-candy-form label,
.auth-page.soft-candy-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 600;
  font-size: .9rem;
}
.auth-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, #FF6B9D 22%, var(--border, #e8d5de));
}
.auth-nav a {
  font-weight: 650;
  text-decoration: none;
  color: var(--accent, #FF6B9D);
}
.auth-nav a:hover {
  text-decoration: underline;
}
.auth-nav a.btn {
  text-decoration: none;
  color: inherit;
}
.auth-cta {
  margin-top: .85rem;
}
.auth-resend {
  margin-top: .85rem;
  padding: .9rem 1rem;
  border: 1.5px solid color-mix(in srgb, #C4A8FF 35%, var(--border, #e8d5de));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 92%, #C4A8FF 8%);
}
.pw-field__row {
  display: flex;
  gap: .45rem;
  align-items: stretch;
}
.pw-field__row input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.pw-field__row .pw-toggle {
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: .35rem .7rem;
  font-size: .85rem;
  white-space: nowrap;
}
.auth-page .field-help {
  margin: -.15rem 0 .15rem;
  font-size: .85rem;
}
.auth-page .form-msg:not(.form-msg--banner) {
  /* sr-only via global .form-msg rule — toast is primary */
  margin: 0;
}
.auth-page .form-msg--banner {
  margin: .35rem 0 0;
}
.candy-verify.auth-page .soft-candy-empty {
  text-align: left;
}
@media (max-width: 420px) {
  .auth-page {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .pw-field__row {
    flex-direction: column;
  }
  .pw-field__row .pw-toggle {
    width: 100%;
  }
}

/* Cool Mono: keep readable input borders (no pink wash) */
html[data-palette="mono"] .soft-candy-form input,
html[data-palette="mono"] .soft-candy-form select,
html[data-palette="mono"] .soft-candy-form textarea,
html[data-palette="kerle"] .soft-candy-form input,
html[data-palette="kerle"] .soft-candy-form select,
html[data-palette="kerle"] .soft-candy-form textarea {
  border-color: color-mix(in srgb, var(--accent, #5B8DEF) 45%, var(--line, rgba(255,255,255,.18)));
}
html[data-palette="mono"][data-theme="light"] .soft-candy-form input,
html[data-palette="mono"][data-theme="light"] .soft-candy-form select,
html[data-palette="mono"][data-theme="light"] .soft-candy-form textarea,
html[data-palette="kerle"][data-theme="light"] .soft-candy-form input,
html[data-palette="kerle"][data-theme="light"] .soft-candy-form select,
html[data-palette="kerle"][data-theme="light"] .soft-candy-form textarea {
  border-color: rgba(30, 40, 60, 0.42);
}
html[data-palette="mono"] .auth-nav,
html[data-palette="kerle"] .auth-nav {
  border-top-color: var(--line, rgba(255,255,255,.18));
}
html[data-palette="mono"] .auth-nav a,
html[data-palette="kerle"] .auth-nav a {
  color: var(--accent, #5B8DEF);
}
html[data-palette="mono"] .auth-resend,
html[data-palette="kerle"] .auth-resend {
  border-color: color-mix(in srgb, var(--accent, #5B8DEF) 35%, var(--line));
  background: color-mix(in srgb, var(--card) 92%, var(--accent, #5B8DEF) 8%);
}


/* === 3.3.13: admin users compact + money majors === */
.admin-users-table {
  font-size: 0.82rem;
}
.admin-users-table th,
.admin-users-table td {
  padding: 0.28rem 0.35rem;
  vertical-align: middle;
}
/* 3.4.1 / 3.5.5 / 3.5.6: checkbox column stays before e-mail; Soft candy sticky without overflow bleed. */
.admin-users-wrap,
#admin-users-wrap.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.admin-users-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 64rem;
}
/* 3.6.1: Donate/Register Soft candy closeout (confirm center parity)
   3.6.0: Soft candy foundation consistency (auth center parity, Users a11y)
   3.5.23: checkbox column roomy + clickable; sticky without crushing into e-mail */
.admin-users-table .admin-users-check {
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
  text-align: center;
  vertical-align: middle;
  padding: 0.35rem 0.4rem;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--card, var(--panel, var(--bg, #fff)));
  box-shadow: 1px 0 0 color-mix(in srgb, var(--border, #ccc) 70%, transparent);
  overflow: visible; /* 3.5.23: 3.5.20 overflow:hidden crushed select-all / row checks */
}
.admin-users-table thead .admin-users-check {
  z-index: 5;
  background: var(--card, var(--panel, var(--bg, #fff)));
}
.admin-users-table .admin-users-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, #5B8DEF);
}
.admin-users-table td.admin-users-email,
.admin-users-table th:nth-child(3) {
  padding-left: 0.85rem;
  min-width: 9.5rem;
  position: relative;
  z-index: 1;
}
.admin-users-table .admin-users-lang {
  width: 2.75rem;
  min-width: 2.5rem;
  max-width: 3rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.admin-users-table .admin-users-lang-input {
  width: 2.5rem;
  max-width: 2.75rem;
  min-width: 2.25rem;
  box-sizing: border-box;
}
.admin-users-table .admin-users-delete-ordered {
  min-width: 9.5rem;
  white-space: nowrap;
}
.admin-users-table .admin-users-delete-ordered-input {
  width: 11.5rem;
  max-width: 13rem;
  font-size: 0.78rem;
  box-sizing: border-box;
}
.admin-users-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.65rem;
}
.admin-users-bulk-toolbar select {
  min-height: 1.7rem;
  font-size: 0.85rem;
}
.admin-user-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 7.5rem;
  align-items: stretch;
}
.admin-users-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.admin-users-search-label {
  min-width: 12rem;
  max-width: 22rem;
  margin: 0;
}
.admin-users-search {
  width: 100%;
  min-height: 1.7rem;
  font-size: 0.85rem;
}
.admin-users-table .admin-users-email-input {
  width: 100%;
  min-width: 8.5rem;
  max-width: 14rem;
}
.admin-users-table .admin-users-actions {
  white-space: nowrap;
  width: 1%;
  text-align: center;
}
.admin-users-table .admin-users-actions .btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
}
.admin-users-table input.admin-inline-edit,
.admin-users-table select.admin-inline-edit {
  font-size: 0.82rem;
  min-height: 1.55rem;
  padding: 0.12rem 0.28rem;
}
.admin-users-table input.admin-money-major {
  width: 5.5rem;
  max-width: 6rem;
  font-variant-numeric: tabular-nums;
}
#admin-create-user .admin-create-user {
  margin-bottom: 0;
}


/* === 3.4.0: Soft candy admin section wait spinner === */
.admin-section-wait.soft-candy-wait {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 0.25rem;
}
.soft-candy-spinner {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(255, 142, 200, 0.35);
  border-top-color: #FF8EC8;
  border-radius: 50%;
  animation: vapcal-spin .7s linear infinite;
}
@keyframes vapcal-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .soft-candy-spinner { animation: none; border-top-color: rgba(255, 142, 200, 0.35); }
}


/* === 3.4.1: FX fetch admin + users checkbox sticky === */
.admin-fx-fetch-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: end;
  margin: .75rem 0 1rem;
}
.admin-fx-fetch-row label { margin: 0; min-width: 12rem; }


/* === 3.4.6: wider admin shell (public calc pages keep --max) === */
.wrap.wrap--admin {
  max-width: min(1480px, 98vw);
}
.wrap.wrap--admin .admin-page {
  width: 100%;
}
.wrap.wrap--admin .admin-page .table-wrap {
  margin-inline: 0;
}
.wrap.wrap--admin .admin-donations-table,
.wrap.wrap--admin .admin-users-table,
.wrap.wrap--admin #admin-friends,
.wrap.wrap--admin #admin-currencies-table,
.wrap.wrap--admin .mix.compact {
  min-width: 100%;
}
.wrap.wrap--admin .admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.wrap.wrap--admin .admin-fx-grid {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.wrap.wrap--admin .admin-toc {
  margin-bottom: .85rem;
}
@media (max-width: 800px) {
  .wrap.wrap--admin {
    max-width: 100%;
    padding-left: .65rem;
    padding-right: .65rem;
  }
  .wrap.wrap--admin .admin-grid {
    grid-template-columns: 1fr;
  }
}
.admin-busy[disabled],
button.admin-busy {
  opacity: .65;
  cursor: wait;
}


/* 3.4.7 Soft candy HoF level emphasis */
.donor-card.is-hof-candy {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35);
}
.donor-card.is-dry-hit {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45);
}
.donor-card__badge {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  margin: 0.15rem 0 0;
}

/* 3.4.7 Soft candy public level perk ladder */
.level-perk-ladder.soft-candy-ladder {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.level-perk {
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
}
html[data-theme="dark"] .level-perk {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.level-perk__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  list-style: none;
}
.level-perk__summary::-webkit-details-marker { display: none; }
.level-perk__summary::after {
  content: '+';
  color: var(--muted, #888);
  font-weight: 600;
}
.level-perk[open] > .level-perk__summary::after { content: '–'; }
.level-perk__name { font-weight: 600; }
.level-perk__eur { color: var(--muted, #888); font-weight: 500; white-space: nowrap; }
.level-perk__eur small { margin-left: .2rem; font-weight: 400; }
.level-perk__body { padding: 0 1rem 0.85rem; }
.level-perk__list { margin: 0.25rem 0 0.5rem; }
.level-perk[data-level-slug="l2-blush"] {
  box-shadow: 0 0 0 1px rgba(255, 107, 157, 0.28);
}
.level-perk[data-level-slug="l7-top"] {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}

/* 3.6.2: Account perks dark + donation comment Soft candy contrast */
html[data-theme="dark"] .level-perk,
html[data-palette="mono"] .level-perk,
html[data-palette="kerle"] .level-perk {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .level-perk__body,
html[data-theme="dark"] .level-perk__list,
html[data-theme="dark"] .level-perk__name {
  color: var(--ink);
}
#account-donations-table .donation-comment-field {
  background: var(--input, var(--card));
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme="dark"] #account-donations-table .donation-comment-field {
  background: var(--input, #1F1A28);
  color: var(--ink);
  border-color: var(--line);
}




/* === 3.4.8: Soft candy account hierarchy === */
.account-page.soft-candy-account { max-width: 52rem; }
.account-soft-lead { margin-top: .25rem; }
.account-level-summary {
  padding: .75rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #ff8ec8) 12%, transparent);
  margin: .5rem 0 1rem;
}
.account-donations-summary { margin: .35rem 0 .75rem; }
.account-tile--perks > summary { font-weight: 600; }
.admin-level-card__flags { margin: .5rem 0 0; border: none; padding: 0; }
.admin-level-card__flags legend { font-size: .9rem; margin-bottom: .35rem; }


/* 3.4.11: Soft candy pay credential stack — label → input → muted help */
.admin-pay-stack {
  max-width: 36rem;
}
.soft-candy-form .field-help,
.admin-pay-stack .field-help {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
}
.account-page .pw-field .field-help {
  margin-top: 0.1rem;
}


/* 3.4.12: animated wallpaper previews via <object> (SMIL visible) */
.wp-gallery__img--anim {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  border-radius: inherit;
}
.wp-lightbox__media {
  width: 100%;
}
.wp-lightbox__obj {
  display: block;
  width: 100%;
  min-height: 240px;
  max-height: 70vh;
  border: 0;
}


/* === 3.4.14 Soft candy partners theme polish === */
html[data-theme="light"]:not([data-palette="mono"]) .soft-candy-partners .friend-card {
  background: linear-gradient(160deg, color-mix(in srgb, #FF8EC8 7%, #fff), #fff 55%);
  border-color: #E8E0E8;
}
html[data-theme="dark"]:not([data-palette="mono"]) .soft-candy-partners .friend-card {
  background: linear-gradient(160deg, color-mix(in srgb, #FF8EC8 10%, var(--elevated)), var(--elevated));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-palette="mono"] .soft-candy-partners .friend-card,
html[data-palette="kerle"] .soft-candy-partners .friend-card {
  background: var(--elevated, var(--card));
}
.soft-candy-partners .friend-code[data-plan="donator"] {
  background: color-mix(in srgb, #FF8EC8 12%, var(--card));
  border-color: color-mix(in srgb, #FF6B9D 35%, var(--line));
}


/* 3.4.15: pay provider enable toggles + single-line Soft candy field labels */
.admin-pay-enable {
  margin: 0 0 .65rem;
}
.admin-pay-enable .field-help {
  margin: .25rem 0 0;
  padding-left: 1.45rem;
}
.admin-pay-stack > label > .field-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 600;
}

.admin-pay-status {
  font-weight: 600;
  white-space: nowrap;
}


/* 3.4.16 Soft candy donations audit table: narrow timestamp, provider, payment_intent */
#admin-donations-table.admin-donations-table th.admin-don-when,
#admin-donations-table.admin-donations-table td.admin-don-when {
  width: 7.25rem;
  max-width: 8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
#admin-donations-table.admin-donations-table .admin-don-when-ro {
  display: inline-block;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
}
#admin-donations-table.admin-donations-table td.admin-don-provider {
  max-width: 4.5rem;
  white-space: nowrap;
  text-transform: lowercase;
}
#admin-donations-table.admin-donations-table td.admin-don-pi {
  max-width: 9rem;
}
#admin-donations-table.admin-donations-table .admin-don-pi-code {
  display: inline-block;
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 500;
}


/* 3.4.17 Soft candy admin donations compact + assign modal */
.admin-donations-table .admin-don-narrow {
  width: 4.25rem;
  max-width: 5rem;
  box-sizing: border-box;
}
.admin-donations-table th.admin-don-compact,
.admin-donations-table td.admin-don-compact {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.admin-don-email {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85em;
}
.soft-candy-modal {
  border: 1px solid color-mix(in srgb, var(--accent, #c48) 35%, transparent);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  max-width: min(28rem, 94vw);
  background: var(--card, #fff);
  color: inherit;
  box-shadow: 0 12px 40px rgba(40, 20, 40, 0.18);
}
.soft-candy-modal::backdrop {
  background: rgba(40, 20, 50, 0.35);
  backdrop-filter: blur(2px);
}
.avatar-flyover__donations-wrap {
  margin: 0.45rem 0 0;
}
.avatar-flyover__donations-title {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 650;
}
.avatar-flyover__donations {
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
}
.avatar-flyover__donations th,
.avatar-flyover__donations td {
  padding: 0.22rem 0.35rem;
  vertical-align: top;
  line-height: 1.25;
  word-break: break-word;
}
.avatar-flyover__donations th:nth-child(1),
.avatar-flyover__donations td:nth-child(1) {
  white-space: nowrap;
  width: 4.5rem;
}
.avatar-flyover__donations th:nth-child(2),
.avatar-flyover__donations td:nth-child(2) {
  white-space: nowrap;
  width: 3.2rem;
}
.avatar-flyover__donation td:nth-child(3) {
  font-style: italic;
}


/* === 3.5.1 Soft candy donate/register/confirm polish === */
label.check.soft-candy-chip { flex-direction: row; font-weight: 650; }

/* === 3.5.3 Soft candy form toast (see .save-status / .form-msg above) === */

/* === 3.5.4: Soft candy account My donations (compact audit-like) === */
.account-donations-wrap {
  margin: .35rem 0 .5rem;
}
#account-donations-table.account-donations-table,
.account-donations-table {
  font-size: .72rem;
  width: 100%;
}
#account-donations-table.account-donations-table th,
#account-donations-table.account-donations-table td {
  padding: .28rem .35rem;
  vertical-align: middle;
  line-height: 1.25;
}
#account-donations-table.account-donations-table th.account-don-when,
#account-donations-table.account-donations-table td.account-don-when {
  white-space: nowrap;
  width: 1%;
  max-width: 12rem;
}
#account-donations-table .account-don-when-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 0.35rem;
  max-width: 100%;
}
#account-donations-table .account-don-when-btn:hover,
#account-donations-table .account-don-when-btn:focus-visible {
  text-decoration: underline;
  outline: none;
}
#account-donations-table .account-don-when-btn.is-expanded {
  max-width: none;
  white-space: normal;
}
#account-donations-table .account-don-when-btn.is-expanded time {
  white-space: normal;
}
#account-donations-table.account-donations-table th.account-don-compact,
#account-donations-table.account-donations-table td.account-don-compact {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}
#account-donations-table.account-donations-table th.account-don-status,
#account-donations-table.account-donations-table td.account-don-status {
  white-space: nowrap;
  width: 1%;
  text-align: center;
}
#account-donations-table.account-donations-table td.account-don-comment {
  text-align: center;
  min-width: 10rem;
}
#account-donations-table .donation-comment-field {
  display: block;
  margin: 0 auto;
  max-width: 18rem;
  text-align: center;
  font-size: .72rem;
  line-height: 1.3;
  padding: .28rem .4rem;
  border-radius: .45rem;
  min-height: 2.2rem;
}
.account-donations-totals-hint {
  margin: 0 0 .55rem;
  font-size: .82rem;
}
.don-status-pill {
  display: inline-block;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  background: color-mix(in srgb, var(--accent, #ff8ec8) 14%, transparent);
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--accent, #ff8ec8) 28%, transparent);
}
.don-status-pill--confirmed,
.don-status-pill--paid {
  background: color-mix(in srgb, #3cb371 18%, transparent);
  border-color: color-mix(in srgb, #3cb371 40%, transparent);
}
.don-status-pill--pending,
.don-status-pill--processing,
.don-status-pill--open {
  background: color-mix(in srgb, #e6a23c 18%, transparent);
  border-color: color-mix(in srgb, #e6a23c 42%, transparent);
}
.don-status-pill--failed,
.don-status-pill--cancelled,
.don-status-pill--canceled,
.don-status-pill--expired {
  background: color-mix(in srgb, #e85d75 16%, transparent);
  border-color: color-mix(in srgb, #e85d75 40%, transparent);
}
html[data-theme="dark"] .don-status-pill--confirmed,
html[data-theme="dark"] .don-status-pill--paid {
  background: color-mix(in srgb, #5ddea0 22%, transparent);
}

/* === 3.5.18: Soft candy Mischtabelle / mix chart toolbar + sticky table === */
#chart .chart-toolbar.soft-candy-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .65rem 1rem;
  margin: 0 0 .35rem;
}
#chart .chart-toolbar__filters,
#chart .chart-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .55rem .75rem;
}
#chart .chart-toolbar__filters label {
  margin: 0;
  min-width: 7.5rem;
}
#chart .chart-toolbar__filters select,
#chart .chart-toolbar__actions .print-paper select,
#chart .chart-toolbar__actions .btn {
  min-height: 44px;
}
#chart .chart-toolbar__hint {
  margin: 0 0 .65rem;
  font-size: .82rem;
  line-height: 1.35;
}
#chart .mix-table-wrap.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  max-height: min(70vh, 28rem);
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, #FF6B9D 22%, var(--line, #e8d5de));
  background:
    linear-gradient(180deg, color-mix(in srgb, #FF8EC8 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--card, #fff) 94%, #FF8EC8 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 8px 24px color-mix(in srgb, #C4A8FF 10%, transparent);
}
#chart table.mix.soft-candy-mix {
  width: 100%;
  min-width: 18rem;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
#chart table.mix.soft-candy-mix th,
#chart table.mix.soft-candy-mix td {
  padding: .55rem .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  vertical-align: middle;
  color: var(--fg, inherit);
  background: transparent;
}
#chart table.mix.soft-candy-mix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--card, #fff) 88%, #FF8EC8 12%);
  box-shadow: 0 1px 0 color-mix(in srgb, #FF6B9D 28%, transparent);
}
#chart table.mix.soft-candy-mix .mix-col-strength {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  font-weight: 650;
  white-space: nowrap;
  background: color-mix(in srgb, var(--card, #fff) 92%, #C4A8FF 8%);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--line) 65%, transparent);
}
#chart table.mix.soft-candy-mix thead .mix-col-strength {
  z-index: 4;
  background: color-mix(in srgb, var(--card, #fff) 86%, #FF8EC8 14%);
}
#chart table.mix.soft-candy-mix .mix-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#chart table.mix.soft-candy-mix tbody tr:nth-child(even) th,
#chart table.mix.soft-candy-mix tbody tr:nth-child(even) td {
  background: color-mix(in srgb, #FF8EC8 7%, transparent);
}
#chart table.mix.soft-candy-mix tbody tr:nth-child(even) .mix-col-strength {
  background: color-mix(in srgb, var(--card, #fff) 88%, #FF8EC8 12%);
}
#chart table.mix.soft-candy-mix tbody tr:hover th,
#chart table.mix.soft-candy-mix tbody tr:hover td {
  background: color-mix(in srgb, #C4A8FF 14%, transparent);
}
#chart table.mix.soft-candy-mix tbody tr:hover .mix-col-strength {
  background: color-mix(in srgb, var(--card, #fff) 82%, #C4A8FF 18%);
}
#chart table.mix.soft-candy-mix tbody tr:last-child th,
#chart table.mix.soft-candy-mix tbody tr:last-child td {
  border-bottom: 0;
}
html[data-theme="dark"] #chart .mix-table-wrap.table-wrap {
  background:
    linear-gradient(180deg, color-mix(in srgb, #FF8EC8 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--card, #1a1620) 92%, #FF8EC8 8%);
  border-color: color-mix(in srgb, #FF6B9D 28%, var(--line));
}
html[data-theme="dark"] #chart table.mix.soft-candy-mix thead th,
html[data-theme="dark"] #chart table.mix.soft-candy-mix thead .mix-col-strength {
  background: color-mix(in srgb, var(--card, #1a1620) 82%, #FF8EC8 18%);
}
html[data-theme="dark"] #chart table.mix.soft-candy-mix .mix-col-strength {
  background: color-mix(in srgb, var(--card, #1a1620) 88%, #C4A8FF 12%);
}
html[data-palette="mono"] #chart .mix-table-wrap.table-wrap,
html[data-palette="kerle"] #chart .mix-table-wrap.table-wrap {
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: none;
}
html[data-palette="mono"] #chart table.mix.soft-candy-mix tbody tr:nth-child(even) th,
html[data-palette="mono"] #chart table.mix.soft-candy-mix tbody tr:nth-child(even) td,
html[data-palette="kerle"] #chart table.mix.soft-candy-mix tbody tr:nth-child(even) th,
html[data-palette="kerle"] #chart table.mix.soft-candy-mix tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fg, #000) 4%, transparent);
}
html[data-palette="mono"] #chart table.mix.soft-candy-mix tbody tr:hover th,
html[data-palette="mono"] #chart table.mix.soft-candy-mix tbody tr:hover td,
html[data-palette="kerle"] #chart table.mix.soft-candy-mix tbody tr:hover th,
html[data-palette="kerle"] #chart table.mix.soft-candy-mix tbody tr:hover td {
  background: color-mix(in srgb, var(--fg, #000) 7%, transparent);
}
@media (max-width: 560px) {
  #chart .chart-toolbar.soft-candy-form {
    flex-direction: column;
    align-items: stretch;
  }
  #chart .chart-toolbar__filters,
  #chart .chart-toolbar__actions {
    width: 100%;
  }
  #chart .chart-toolbar__filters label {
    flex: 1 1 7rem;
  }
}
@media print {
  #chart .mix-table-wrap.table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* === 3.5.20: Soft candy centered footer on auth pages === */
body.page-auth .site-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.page-auth .site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.35rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* === 3.5.20: admin users checkbox clamp + Friends Soft candy cards === */
.admin-friends-list {
  display: grid;
  gap: 0.85rem;
}
.admin-friend-card {
  border: 1px solid color-mix(in srgb, var(--line, #3A3348) 80%, transparent);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--card, #252030) 92%, transparent);
  box-shadow: var(--shadow-soft, 0 4px 16px rgba(10, 6, 16, 0.28));
}
.admin-friend-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.admin-friend-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  font-size: 0.9rem;
}
.admin-friend-card__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
}
@media (max-width: 720px) {
  .admin-friend-card__grid { grid-template-columns: 1fr; }
}
.admin-friend-card .friend-logo-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.admin-friend-card .friend-logo-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: color-mix(in srgb, var(--input, #1F1A28) 80%, transparent);
  padding: 0.25rem;
}
.admin-friend-card__fields {
  display: grid;
  gap: 0.45rem;
}
.admin-friend-card__fields input,
.admin-friend-card__fields textarea {
  width: 100%;
  box-sizing: border-box;
}
.admin-friend-card__codes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.admin-friend-card .friend-code-row {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 4.5rem 1fr 1fr auto;
  align-items: center;
}
@media (max-width: 720px) {
  .admin-friend-card .friend-code-row { grid-template-columns: 1fr; }
}
.admin-friend-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.65rem;
  font-size: 0.9rem;
}

/* 3.6.5: Soft candy narrow ID columns (Users / Donations / inbox / cards) */
.admin-entity-id,
#admin-users-table .admin-entity-id,
#admin-donations-table .admin-entity-id,
#admin-contact-inbox .admin-entity-id {
  width: 2.75rem;
  min-width: 2.5rem;
  max-width: 4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .78em;
  padding-left: .25rem;
  padding-right: .35rem;
  vertical-align: middle;
}
.admin-friend-card__head .admin-entity-id,
.admin-level-card__head .admin-entity-id {
  font-weight: 600;
  margin-right: .35rem;
}

/* === 3.6.6: Soft candy mobile layout polish — donation heart + compact selects === */
.bar-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem .5rem;
  min-width: 0;
}
.bar-quiet {
  display: inline-flex;
  align-items: center;
  gap: .05rem;
}

/* Desktop: quiet icons stay with nav cluster (brand | tools) */
@media (min-width: 801px) {
  .bar {
    justify-content: space-between;
  }
  .bar-tools {
    flex: 0 1 auto;
  }
}

@media (max-width: 800px) {
  .bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .4rem .5rem;
  }
  .brand {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }
  .bar-tools {
    display: contents;
  }
  .bar-quiet {
    grid-column: 2;
    justify-self: end;
  }
  .nav-toggle {
    grid-column: 3;
    justify-self: end;
  }
  .site-nav {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Stronger Soft candy heart (and wallpaper) on narrow — not washed gray */
  html[data-theme="light"]:not([data-palette="mono"]) .bar-quiet .nav-quiet__ico {
    color: #FF6B9D;
  }
  html[data-theme="light"]:not([data-palette="mono"]) .bar-quiet .nav-quiet--donate .nav-quiet__ico svg {
    fill: #FF6B9D;
    stroke: #E84A7F;
    stroke-width: 1.25;
  }
  html[data-theme="dark"]:not([data-palette="mono"]) .bar-quiet .nav-quiet__ico {
    color: color-mix(in srgb, var(--accent) 85%, #FFE0F0);
  }
  html[data-theme="dark"]:not([data-palette="mono"]) .bar-quiet .nav-quiet--donate .nav-quiet__ico svg {
    fill: color-mix(in srgb, var(--accent) 75%, #FF8EC8);
    stroke: currentColor;
    stroke-width: 1.25;
  }
  .bar-quiet .nav-quiet__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .bar-quiet .nav-quiet {
    min-height: 44px;
    min-width: 44px;
    padding: .4rem;
    opacity: 1;
  }
  .bar-quiet .nav-quiet__ico {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* Chart / calc selects: do not stretch full card width */
  #chart .chart-toolbar__filters select,
  #chart .chart-toolbar__actions .print-paper select,
  #SlctStart,
  #SlctSteps {
    width: auto;
    max-width: min(12rem, 100%);
    min-width: 5.5rem;
  }
  #chart .chart-toolbar__filters label {
    min-width: 0;
    max-width: 14rem;
  }
  #chart .chart-toolbar__filters,
  #chart .chart-toolbar__actions {
    align-items: flex-end;
  }

}

/* === 3.6.7: Soft candy mobile calm header — quiet pills, presets, calc bar === */
@media (max-width: 800px) {
  /* One calm baseline: brand | quiet pills (no nervous height drift) */
  .bar {
    align-items: center;
  }
  .bar-quiet {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    align-self: center;
    gap: .35rem;
  }
  /* 3.8.0: .nav-toggle rules removed (Menü gone since 3.7.22) */

  /* Quiet donate/wallpaper: Soft candy pill chrome (elevated + line) */
  .bar-quiet .nav-quiet {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-bubble);
    background: var(--elevated);
    color: var(--ink);
    opacity: 1;
  }
  .bar-quiet .nav-quiet:hover,
  .bar-quiet .nav-quiet:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--elevated));
  }
  /* Short Soft candy labels (Donation / Wallpaper) — strengthen vs bare icons */
  .bar-quiet .nav-quiet__txt {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: unset;
    clip-path: none;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .bar-quiet .nav-quiet__ico {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }

  /* Presets: cap iOS elongated select; keep ≥40px touch, compact width */
  #calcPresetSelect,
  .preset-bar__select {
    flex: 0 1 auto;
    width: auto;
    max-width: min(14rem, 100%);
    min-width: 7rem;
    min-height: 40px;
    height: 2.5rem;
    max-height: 2.75rem;
    padding: .3rem .55rem;
    font-size: .88rem;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .preset-bar__actions .btn {
    min-height: 40px;
    padding: .35rem .7rem;
    font-size: .82rem;
  }

  /* Calc bar: chip + “Choose calculator” share one calm row */
  .calc-tiles__bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .45rem;
  }
  .calc-tiles__chip {
    flex: 0 1 auto;
    max-width: 48%;
    min-width: 0;
  }
  .calc-tiles__toggle {
    flex: 1 1 auto;
    max-width: min(14rem, 55%);
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  #calcPresetSelect,
  .preset-bar__select {
    max-width: min(14rem, 100%);
    min-height: 40px;
    height: 2.4rem;
    max-height: 2.5rem;
    padding: .28rem .5rem;
    font-size: .86rem;
    line-height: 1.15;
  }
  .calc-tiles__bar {
    gap: .4rem;
  }
  .calc-tiles__chip {
    flex: 0 1 auto;
    max-width: 46%;
    padding: .3rem .65rem .3rem .5rem;
    font-size: .85rem;
  }
  .calc-tiles__toggle {
    flex: 1 1 0;
    max-width: none;
    padding: .35rem .75rem;
    font-size: .85rem;
  }
}

/* Ultra-narrow: icon-only quiet pills so logo + Menu stay one line */
@media (max-width: 360px) {
  .bar-quiet .nav-quiet__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .bar-quiet .nav-quiet {
    padding: 0 .45rem;
    min-width: 44px;
  }
}


/* === 3.6.10: Soft candy bordered checkboxes (user area Umrandung) === */
label.check.soft-candy-check,
.soft-candy-form label.check.soft-candy-check,
#privacy-form label.check.soft-candy-check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: .55rem .85rem;
  margin: 0 0 .35rem;
  border-radius: var(--radius-bubble, 14px);
  border: 1px solid color-mix(in srgb, #FF6B9D 28%, var(--line, #e8d5de));
  background: color-mix(in srgb, var(--elevated, #fff) 88%, #FFD6E8);
  font-weight: 650;
  font-size: .92rem;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
}
html[data-theme="dark"] label.check.soft-candy-check,
html[data-theme="dark"] #privacy-form label.check.soft-candy-check {
  background: color-mix(in srgb, var(--elevated, #1e1a22) 90%, #3a2430);
  border-color: color-mix(in srgb, #FF8EC8 32%, var(--line));
}
label.check.soft-candy-check input[type="checkbox"],
#privacy-form label.check.soft-candy-check input[type="checkbox"],
.soft-candy-form label.check.soft-candy-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, #FF6B9D 45%, var(--line, #c9b0bc));
  border-radius: 6px;
  background: var(--elevated, #fff);
  accent-color: var(--accent, #FF6B9D);
  display: grid;
  place-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, #FFD6E8 40%, transparent);
}
label.check.soft-candy-check input[type="checkbox"]::before {
  content: "";
  width: .65rem;
  height: .65rem;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  box-shadow: inset 1em 1em var(--accent, #FF6B9D);
  border-radius: 3px;
  background-color: var(--accent, #FF6B9D);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  box-shadow: none;
}
label.check.soft-candy-check input[type="checkbox"]:checked {
  border-color: var(--accent, #FF6B9D);
  background: color-mix(in srgb, #FFD6E8 55%, var(--elevated, #fff));
}
label.check.soft-candy-check input[type="checkbox"]:checked::before {
  transform: scale(1);
}
label.check.soft-candy-check input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #FF6B9D) 70%, transparent);
  outline-offset: 2px;
}
/* donate chip already bordered — keep chip + soft-candy-check from double-padding clash */
label.check.soft-candy-chip.soft-candy-check {
  /* chip owns padding/border; keep custom checkbox mark */
  padding: .55rem .85rem;
}
#privacy-form.soft-candy-form {
  gap: .35rem;
}

/* === 3.7.1: hide brand wordmark on Soft candy mobile nav === */
/* Match Soft candy mobile/nav breakpoint (max-width: 800px): keep logo icon, drop “VapCal” text
   so longer quiet pills (e.g. Unterstütze mich) + Menu no longer overlap the wordmark. */
@media (max-width: 800px) {
  .brand-text {
    display: none;
  }
}


/* === 3.7.7/3.7.12: Soft candy admin inline i18n — chrome only when header toggle ON === */
.vapcal-i18n-wrap {
  position: relative;
  display: inline;
}
.vapcal-i18n-edit {
  border-radius: 0.35rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: box-shadow .15s ease, background-color .15s ease;
}
/* Off by default: no cursor/chrome/token hover (toggle gates edit mode). */
html:not([data-i18n-edit="1"]) .vapcal-i18n-edit {
  cursor: inherit;
}
html[data-i18n-edit="1"] .vapcal-i18n-edit {
  cursor: text;
  position: relative;
}
html[data-i18n-edit="1"] .vapcal-i18n-edit:hover,
html[data-i18n-edit="1"] .vapcal-i18n-edit:focus,
html[data-i18n-edit="1"] .vapcal-i18n-edit.is-editing {
  outline: none;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent, #FF8EC8) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #FF8EC8) 10%, transparent);
}
html[data-i18n-edit="1"] .vapcal-i18n-edit:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #FF8EC8) 70%, transparent);
}
html[data-i18n-edit="1"] .vapcal-i18n-edit[data-i18n-key]::after {
  content: attr(data-i18n-key);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text, #2a2430);
  background: color-mix(in srgb, var(--card, #fff7fb) 88%, var(--accent, #FF8EC8));
  border: 1px solid color-mix(in srgb, var(--accent, #FF8EC8) 35%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, #1a1620 12%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 40;
}
html[data-i18n-edit="1"] .vapcal-i18n-edit:hover::after,
html[data-i18n-edit="1"] .vapcal-i18n-edit:focus::after,
html[data-i18n-edit="1"] .vapcal-i18n-edit.is-editing::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Per-field language tabs (shown only in edit mode; Soft candy pills) */
.vapcal-i18n-tabs {
  display: none;
}
html[data-i18n-edit="1"] .vapcal-i18n-wrap:hover > .vapcal-i18n-tabs,
html[data-i18n-edit="1"] .vapcal-i18n-wrap:focus-within > .vapcal-i18n-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  position: absolute;
  left: 0;
  bottom: calc(100% + 22px);
  z-index: 45;
  max-width: min(90vw, 22rem);
  padding: .2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card, #fff7fb) 92%, var(--accent, #FF8EC8));
  border: 1px solid color-mix(in srgb, var(--accent, #FF8EC8) 30%, var(--line, #e8d5de));
  box-shadow: 0 6px 18px color-mix(in srgb, #1a1620 14%, transparent);
}
.vapcal-i18n-tab {
  appearance: none;
  border: 0;
  margin: 0;
  padding: .12rem .4rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  cursor: pointer;
  color: var(--ink, #2a2430);
  background: transparent;
}
.vapcal-i18n-tab:hover {
  background: color-mix(in srgb, var(--accent, #FF8EC8) 18%, transparent);
}
.vapcal-i18n-tab.is-on,
.vapcal-i18n-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent, #FF8EC8) 55%, #fff);
  color: #1a1620;
}

/* Header Soft candy edit-texts switch (admins only) */
.i18n-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: .15rem;
  cursor: pointer;
  user-select: none;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted, #7a6f7a);
}
.i18n-edit-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.i18n-edit-toggle__track {
  position: relative;
  width: 1.7rem;
  height: .95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--elevated, #f3e8ef) 80%, var(--line, #e8d5de));
  border: 1px solid var(--line, #e8d5de);
  transition: background .15s ease, border-color .15s ease;
  flex: 0 0 auto;
}
.i18n-edit-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, #1a1620 25%, transparent);
  transition: transform .15s ease;
}
.i18n-edit-toggle input:checked + .i18n-edit-toggle__track {
  background: color-mix(in srgb, var(--accent, #FF8EC8) 70%, #fff);
  border-color: color-mix(in srgb, var(--accent, #FF8EC8) 55%, transparent);
}
.i18n-edit-toggle input:checked + .i18n-edit-toggle__track .i18n-edit-toggle__thumb {
  transform: translateX(.72rem);
}
.i18n-edit-toggle input:focus-visible + .i18n-edit-toggle__track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #FF8EC8) 55%, transparent);
}
html[data-theme="dark"] .i18n-edit-toggle__thumb {
  background: #f7f0f5;
}
.i18n-edit-toggle__label {
  letter-spacing: .02em;
}
@media (max-width: 800px) {
  .i18n-edit-toggle__label { display: none; }
}


/* 3.7.17 Soft candy image placeholder shimmer (lazy / processing) */
.img-soft-ph {
  background: linear-gradient(110deg, #f7eef5 25%, #edd6e6 37%, #f7eef5 63%);
  background-size: 200% 100%;
  animation: vapcal-img-shimmer 1.2s ease-in-out infinite;
}
.img-soft-ph[src]:not([src=""]):not([src^="data:image/svg+xml"]) {
  animation: none;
  background: transparent;
}
@keyframes vapcal-img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .img-soft-ph { animation: none; background: #f7eef5; }
}


/* Soft candy footer offers (3.7.19) */
.site-footer .footer-offers {
  max-width: 42rem;
  margin: 0 auto 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  border-radius: 12px;
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--accent, #e8a0bf));
  font-size: 0.85rem;
  line-height: 1.45;
}
.site-footer .footer-offers__title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.site-footer .footer-offers__item {
  margin: 0.25rem 0;
}
@media (max-width: 800px) {
  .site-footer .footer-offers { margin-inline: 0.5rem; }
}

/* === 3.7.22 / 3.8.0: Soft candy flat primary header nav (no Menü); hide any leftover toggle === */
.nav-toggle { display: none !important; }

.nav-pill__ico {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}
.nav-pill__ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-pill__txt { white-space: nowrap; }

.nav-pill--logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  min-width: 44px;
  padding: .35rem .55rem;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--ink);
  opacity: .78;
  font: inherit;
  cursor: pointer;
}
.nav-pill--logout:hover,
.nav-pill--logout:focus-visible {
  opacity: 1;
  background: var(--elevated);
  outline: none;
}
.nav-pill--logout:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.nav-pill--logout .nav-pill__ico {
  color: var(--muted);
}

.site-nav--flat {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .25rem .35rem;
  min-width: 0;
}

/* Theme/lang always in primary cluster */
.site-nav--flat .theme-area.nav-controls {
  margin-left: .15rem;
  flex: 0 0 auto;
}

@media (max-width: 800px) {
  .bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .45rem;
    padding: .5rem .7rem;
  }
  .bar-tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem .35rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .bar-quiet {
    display: inline-flex;
    flex: 0 0 auto;
    grid-column: unset;
  }
  .site-nav,
  .site-nav--flat,
  .site-nav.open {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    max-width: 100%;
    grid-column: unset;
    gap: .2rem .3rem;
    padding-bottom: 0;
  }

  /* Icon-first: hide pill text; keep aria-label/title */
  .site-nav--flat .nav-pill__txt,
  .site-nav--flat .nav-calc__chev {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .site-nav--flat .nav-pill,
  .site-nav--flat .nav-calc__btn {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    width: 44px;
    padding: .35rem;
    gap: 0;
    justify-content: center;
  }
  .site-nav--flat .nav-pill--account {
    padding: .2rem;
  }
  .site-nav--flat .nav-pill--account .nav-avatar {
    width: 28px;
    height: 28px;
  }
  .site-nav--flat .nav-pill--logout {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: .35rem;
  }
  .site-nav--flat .nav-pill__ico {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Compact quiet donate pill */
  .bar-quiet .nav-quiet {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: 44px;
    min-width: 44px;
    width: 44px;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-bubble);
    background: var(--elevated);
    gap: 0;
  }
  .bar-quiet .nav-quiet__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .bar-quiet .nav-quiet__ico {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Theme cluster: keep readable, touch-friendly */
  .site-nav--flat .theme-area.nav-controls {
    gap: .15rem;
    padding: .15rem;
    margin-left: .1rem;
  }
  .site-nav--flat .palette-toggle,
  .site-nav--flat .theme-toggle {
    min-width: 40px;
    min-height: 40px;
    padding: .3rem .4rem;
  }
  .site-nav--flat .lang-compact > summary {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .45rem;
    font-size: .7rem;
  }

  /* Admin edit toggle: icon-ish compact */
  .site-nav--flat .i18n-edit-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Very narrow: tighten theme cluster slightly */
@media (max-width: 380px) {
  .site-nav--flat .theme-area.nav-controls {
    gap: .05rem;
  }
  .bar {
    padding: .45rem .5rem;
    gap: .25rem;
  }
}

/* Desktop: icon + text on primary pills */
@media (min-width: 801px) {
  .site-nav--flat .nav-pill {
    gap: .4rem;
  }
  .site-nav--flat .nav-pill__ico {
    width: 1.05rem;
    height: 1.05rem;
  }
}

html[data-theme="light"]:not([data-palette="mono"]) .nav-pill__ico { color: #8B8494; }
html[data-theme="light"]:not([data-palette="mono"]) .nav-pill:hover .nav-pill__ico { color: #FF6B9D; }
html[data-theme="dark"]:not([data-palette="mono"]) .nav-pill__ico { color: color-mix(in srgb, var(--accent) 55%, #E8E0E8); }

/* === 3.7.23: Soft candy calc menu viewport clamp (mobile) === */

/* === 3.7.24: Soft candy theme-aware brand logo === */
.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.print-header .brand-logo {
  width: 48px;
  height: 48px;
}
.brand-logo--light { display: none; }
html[data-theme="light"] .brand-logo--dark { display: none; }
html[data-theme="light"] .brand-logo--light { display: block; }
html[data-theme="dark"] .brand-logo--dark { display: block; }
html[data-theme="dark"] .brand-logo--light { display: none; }

/* === 3.7.25: Soft candy language menu dropdown (not inline expand) === */
.theme-area.nav-controls {
  overflow: visible; /* language dropdown must layer above page content */
}
.langs--compact a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: .45rem .75rem;
  border-radius: calc(var(--radius) - 4px);
  font-size: .9rem;
  font-weight: 550;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.langs--compact a:hover,
.langs--compact a:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--elevated));
  outline: none;
}
.langs--compact a.on {
  background: color-mix(in srgb, var(--accent) 16%, var(--elevated));
  font-weight: 700;
}
html[data-theme="light"]:not([data-palette="mono"]) .langs--compact {
  border: 2px solid #E8E0E8;
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
html[data-theme="dark"]:not([data-palette="mono"]) .langs--compact {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}


/* ——— 3.8.2 Soft candy SEO/UX convenience (focus, empty states, calc hint) ——— */
.stepper input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=password]:focus-visible,
input[type=number]:focus-visible,
.soft-candy-form input:focus-visible,
.soft-candy-form select:focus-visible,
.soft-candy-form textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #FF8EC8) 72%, #fff);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--accent, #FF8EC8) 55%, var(--line, #e8d5de));
}

.stepper-caption {
  display: block;
  cursor: pointer;
}

.soft-candy-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .85rem 0 0;
}

.calc-tiles__hint {
  margin: .35rem 0 0;
  font-size: .82rem;
  line-height: 1.35;
}
.calc-tiles:not(.is-collapsed) .calc-tiles__hint {
  display: none;
}

.notfound-page h1 {
  margin-bottom: .35rem;
}

/* ——— 3.8.3 Soft candy UX hierarchy + Mode-Split + calc options + perf ——— */
/* Hierarchy: tiles → detail rhythm (no childish redesign) */
.calc-tiles { margin-bottom: 1rem; }
.calc-detail { margin-top: .4rem; }
#calculator > .help:first-of-type {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 .8rem;
}
#calculator .result-box {
  letter-spacing: -0.015em;
}
#calculator .preset-bar + .help,
#calculator .preset-bar + form.calc {
  margin-top: .15rem;
}

/* Calc options: fit-content — no full-width stretch (desktop + mobile) */
#chart .chart-toolbar__filters select,
#chart .chart-toolbar__actions .print-paper select,
#SlctStart,
#SlctSteps,
#printPaper,
#wrapWire,
#wrapAwg,
#costCurrency,
.preset-bar__select,
#wraps-form label > select,
.cost-calc select#costCurrency {
  width: auto;
  max-width: min(16rem, 100%);
  min-width: 5.5rem;
  box-sizing: border-box;
}
/* Marker for smoke: calc-opt-fit / no full-width stretch */
.calc-opt-fit { /* structural hook */ }

/* Mode-Split: light flat / dark gloss on small Soft candy chrome */
html[data-theme="light"]:not([data-palette="mono"]) .theme-area.nav-controls {
  background: #FFFFFF;
  border: 1.5px solid #E8E0E8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"]:not([data-palette="mono"]) .theme-area.nav-controls {
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
html[data-theme="light"]:not([data-palette="mono"]) .bar-quiet .nav-quiet {
  background: #FFFFFF;
  border: 1.5px solid #E8E0E8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"]:not([data-palette="mono"]) .bar-quiet .nav-quiet {
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
html[data-theme="light"]:not([data-palette="mono"]) .preset-bar,
html[data-theme="light"]:not([data-palette="mono"]) #chart .chart-toolbar.soft-candy-form {
  background: #FFFFFF;
  border: 1.5px solid #E8E0E8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"]:not([data-palette="mono"]) .preset-bar,
html[data-theme="dark"]:not([data-palette="mono"]) #chart .chart-toolbar.soft-candy-form {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.12);
}
/* Chart toolbar needs padding when it gains Mode-Split chrome */
#chart .chart-toolbar.soft-candy-form {
  padding: .55rem .7rem;
  border-radius: var(--radius-bubble, 22px);
}

/* Mobile header / footer calm (flat stroke icons already on nav) */
@media (max-width: 800px) {
  .site-header .bar {
    padding: .45rem .65rem;
    gap: .3rem .4rem;
  }
  .site-footer {
    padding: .85rem .75rem 2.25rem;
  }
  .site-footer .footer-offers {
    font-size: .82rem;
    line-height: 1.4;
    margin-bottom: .55rem;
  }
  .site-footer .footer-offers__item {
    margin: .35rem 0;
  }
  .site-footer .footer-nav {
    font-size: .82rem;
    line-height: 1.55;
  }
  .site-nav--flat .nav-pill__ico svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* Perf: idle vapor — skip expensive SVG filter until mist is on */
.vapor-bg--idle .vapor-bg__soft {
  filter: none !important;
}
.vapor-bg--on .vapor-bg__soft {
  filter: url(#vaporSoft);
}
html[data-theme="dark"] .vapor-bg--on .vapor-bg__soft {
  filter: url(#vaporSoftDark);
}
/* Auth vapor calm — keep Soft candy mist presence, skip drift cost */
body.page-auth .vapor-bg {
  opacity: .55;
}
body.page-auth .vapor-bg--on .vapor-bg__layer,
body.page-auth .vapor-bg--on .vapor-bg__layer--a,
body.page-auth .vapor-bg--on .vapor-bg__layer--b,
body.page-auth .vapor-bg--on .vapor-bg__layer--c {
  animation: none !important;
  will-change: auto;
}
body.page-auth .vapor-bg--on .vapor-bg__soft {
  filter: none !important; /* auth vapor: no blur filter cost */
}