/* ═══════════════════════════════════════════════════════
   ZEIT FÜR UNS v4.1 — Hybrid Design
   Farbpalette: v3 (hell, Lila/Pastell) · Layout: v4
   Themes: unisex (Standard) | feminine | masculine
═══════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── TOKENS: Unisex (Standard) ── */
.zfu-root {
  --p:      #6c63ff;
  --p2:     #574fd6;
  --pale:   #eeeaff;
  --glow:   rgba(108,99,255,.18);
  --acc:    #9b93ff;
  --bg:     #f4f4f8;
  --sur:    #ffffff;
  --txt:    #1e1b30;
  --mid:    #4e4a6a;
  --dim:    #9896b0;
  --bdr:    rgba(108,99,255,.14);
  --shd:    rgba(70,50,180,.12);
  --like:   #e84c8b;
  --r:      20px;
  --r-sm:   12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --t-fast: .18s;
  --t-med:  .32s;
  /* Dark-mode aliases → keep v4 classes working */
  --text:     var(--txt);
  --text-sub: var(--dim);
  --surface:  var(--sur);
  --border:   var(--bdr);
  --accent:   var(--p);
  --accent2:  var(--p2);
  --shadow:   0 10px 40px var(--shd);
  --shadow-sm:0 2px 10px var(--shd);
  --radius:   var(--r);
  --radius-sm:var(--r-sm);
}

/* ── Feminine ── */
.zfu-root[data-theme="feminine"],
.zfu-root[data-theme="warm"] {
  --p:    #e8788a; --p2: #d45f72; --pale:  #fce8ec;
  --glow: rgba(232,120,138,.2);   --acc:   #f5a3b0;
  --bg:   #fdf0f3; --txt: #2e1a22; --mid:  #7a4a58;
  --dim:  #b8909a; --bdr: rgba(232,120,138,.16);
  --shd:  rgba(180,70,90,.12);
  --like: #e84c8b;
  --accent: var(--p); --accent2: var(--p2);
}

/* ── Masculine ── */
.zfu-root[data-theme="masculine"],
.zfu-root[data-theme="cool"] {
  --p:    #2563eb; --p2: #1d4ed8; --pale:  #dbeafe;
  --glow: rgba(37,99,235,.18);    --acc:   #60a5fa;
  --bg:   #f0f4ff; --txt: #0f172a; --mid:  #334155;
  --dim:  #94a3b8; --bdr: rgba(37,99,235,.14);
  --shd:  rgba(30,60,180,.12);
  --like: #3b82f6;
  --accent: var(--p); --accent2: var(--p2);
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ── ROOT ── */
.zfu-root {
  font-family: var(--font-sans);
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* ── SCREENS ── */
.zfu-screen { display: none; min-height: 100dvh; position: relative; }
.zfu-screen.active { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════
   ANIMATED BACKGROUND — soft pastel orbs (v3 colours)
═══════════════════════════════════════════════════ */
.zfu-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 0% 0%, var(--pale) 0%, transparent 65%),
              radial-gradient(ellipse 50% 40% at 100% 100%, var(--glow) 0%, transparent 65%);
  pointer-events: none;
}
.zfu-bg-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.zfu-bg-particles span {
  position: absolute; width: 3px; height: 3px;
  background: var(--p); opacity: .12; border-radius: 50%;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: .18; }
  90%  { opacity: .08; }
  100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}
/* Grid overlay (v3 feel) */
.zfu-bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--bdr) 1px, transparent 1px),
                    linear-gradient(90deg, var(--bdr) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .4;
}

/* ═══════════════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════════════ */
.zfu-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; border-radius: 14px; border: none;
  background: linear-gradient(140deg, var(--p), var(--p2));
  color: #fff; font-size: .95rem; font-weight: 500; letter-spacing: .02em;
  box-shadow: 0 6px 20px var(--glow);
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.zfu-btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.zfu-btn-primary:active:not(:disabled) { transform: scale(.97); }
.zfu-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.zfu-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--bdr);
  background: transparent; color: var(--mid); font-size: .88rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.zfu-btn-ghost:hover { background: var(--pale); color: var(--p); }

.zfu-btn-sm { padding: 6px 12px; border-radius: 8px; font-size: .78rem; font-weight: 500; }
.zfu-btn-sm.zfu-btn-ghost  { border: 1.5px solid var(--bdr); color: var(--mid); background: transparent; }
.zfu-btn-sm.zfu-btn-primary { background: linear-gradient(135deg, var(--p), var(--p2)); color: #fff; border: none; box-shadow: 0 3px 10px var(--glow); }

.zfu-btn-full { width: 100%; }
.zfu-error { font-size: .8rem; color: #e04060; min-height: 16px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════
   AUTH SCREEN
═══════════════════════════════════════════════════ */
#zfu-auth {
  align-items: center; justify-content: center; overflow-y: auto;
  padding: max(var(--safe-t), 20px) 16px max(var(--safe-b), 20px);
}
.zfu-auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.zfu-auth-wrap {
  position: relative; z-index: 1; width: 100%; max-width: 400px; margin: auto;
  background: var(--sur); border: 1px solid var(--bdr); border-radius: 28px;
  box-shadow: 0 20px 60px var(--shd); padding: 36px 28px 30px;
}
.zfu-auth-logo {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, var(--p), var(--like));
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  box-shadow: 0 4px 20px var(--glow);
}
.zfu-auth-logo svg { width: 28px; height: 28px; stroke: #fff; fill: none; }

.zfu-auth-title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(26px, 7vw, 34px); text-align: center; margin-bottom: 5px;
}
.zfu-auth-title em { font-style: italic; color: var(--p); }
.zfu-auth-sub { text-align: center; font-size: .82rem; color: var(--dim); margin-bottom: 22px; }

.zfu-auth-tabs {
  display: flex; gap: 3px; background: var(--pale);
  border-radius: 12px; padding: 3px; margin-bottom: 20px;
}
.zfu-auth-tab {
  flex: 1; padding: 9px; border-radius: 10px; font-size: .85rem; font-weight: 500;
  color: var(--dim); transition: background var(--t-fast), color var(--t-fast);
}
.zfu-auth-tab.active { background: var(--p); color: #fff; }
.zfu-auth-panel { display: none; }
.zfu-auth-panel.active { display: flex; flex-direction: column; gap: 12px; }

.zfu-field-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
.zfu-field-label { font-size: .82rem; font-weight: 500; color: var(--mid); }
.zfu-optional { font-weight: 400; color: var(--dim); }

.zfu-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--bdr); background: var(--bg); color: var(--txt);
  font-size: .9rem; outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.zfu-input:focus { border-color: var(--p); background: var(--sur); box-shadow: 0 0 0 3px var(--glow); }
.zfu-textarea { resize: vertical; min-height: 88px; }
.zfu-select { appearance: none; cursor: pointer; }
.zfu-field-row { display: flex; gap: 10px; }
.zfu-field-row .zfu-field-group { flex: 1; }

.zfu-pw-wrap { position: relative; }
.zfu-pw-wrap .zfu-input { padding-right: 44px; }
.zfu-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--dim);
  padding: 4px; display: flex; align-items: center;
  transition: color var(--t-fast);
}
.zfu-pw-toggle svg { width: 18px; height: 18px; }
.zfu-pw-toggle:hover { color: var(--p); }

.zfu-checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--mid); cursor: pointer;
}
.zfu-checkbox-label input { accent-color: var(--p); width: 15px; height: 15px; }
.zfu-auth-error { font-size: .82rem; color: #e04060; min-height: 18px; text-align: center; }

.zfu-btn-auth { margin-top: 4px; }
.zfu-pw-reset-link { text-align: center; }
.zfu-pw-reset-link button {
  font-size: .82rem; color: var(--p); text-decoration: underline;
  background: none; border: none; cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════════════════ */
#zfu-onboarding {
  justify-content: center; align-items: center; overflow-y: auto;
  padding: max(var(--safe-t), 16px) 16px max(var(--safe-b), 20px);
}
.zfu-ob-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.zfu-ob-wrap {
  position: relative; z-index: 1; width: 100%; max-width: 480px; margin: auto;
  background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r);
  box-shadow: 0 20px 60px var(--shd); padding: 32px 24px 26px;
}
.zfu-ob-logo { text-align: center; margin-bottom: 10px; }
.zfu-ob-logo svg { width: 44px; height: 44px; stroke: var(--p); fill: none; margin: 0 auto; }
.zfu-ob-title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(22px, 6vw, 28px); text-align: center; margin-bottom: 5px;
}
.zfu-ob-sub { text-align: center; font-size: .82rem; color: var(--dim); margin-bottom: 22px; }
.zfu-ob-step { display: none; }
.zfu-ob-step.active { display: block; }
.zfu-ob-step h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.zfu-ob-hint { font-size: .75rem; color: var(--dim); margin-bottom: 13px; }

.zfu-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.zfu-chip {
  padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--bdr);
  background: transparent; font-size: .82rem; color: var(--mid); cursor: pointer;
  transition: all var(--t-fast);
}
.zfu-chip:hover   { border-color: var(--p); color: var(--p); }
.zfu-chip.selected { background: var(--p); border-color: var(--p); color: #fff; }
.zfu-chip:active  { transform: scale(.96); }

.zfu-radios { display: flex; flex-direction: column; gap: 8px; }
.zfu-radio-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: 12px; border: 1.5px solid var(--bdr); cursor: pointer;
  transition: all var(--t-fast); font-size: .9rem; color: var(--mid);
}
.zfu-radio-item:has(input:checked) { border-color: var(--p); background: var(--pale); color: var(--txt); }
.zfu-radio-item input { accent-color: var(--p); width: 16px; height: 16px; flex-shrink: 0; }

.zfu-ob-nav { display: flex; gap: 10px; margin-top: 22px; }
.zfu-ob-nav .zfu-btn-ghost  { flex: 0 0 auto; }
.zfu-ob-nav .zfu-btn-primary { flex: 1; }
.zfu-ob-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.zfu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bdr); transition: background var(--t-fast), transform var(--t-fast); }
.zfu-dot.active { background: var(--p); transform: scale(1.25); }

/* ═══════════════════════════════════════════════════
   MAIN APP LAYOUT
═══════════════════════════════════════════════════ */
#zfu-app {
  position: relative; z-index: 1;
  padding-top: calc(var(--safe-t) + 0px);
  padding-bottom: calc(var(--safe-b) + 16px);
}

/* HEADER */
.zfu-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bdr);
}
.zfu-header-center { text-align: center; flex: 1; }
.zfu-eyebrow {
  display: block; font-size: .65rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p); opacity: .8; margin-bottom: 2px;
}
.zfu-app-title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(22px, 6vw, 32px); line-height: 1; color: var(--txt);
}
.zfu-app-title em { font-style: italic; color: var(--p); }

.zfu-icon-btn {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--sur); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px var(--shd); transition: transform var(--t-fast), background var(--t-fast);
  cursor: pointer; flex-shrink: 0; position: relative;
  -webkit-appearance: none; appearance: none;
  color: var(--mid);
}
.zfu-icon-btn:hover   { background: var(--pale); }
.zfu-icon-btn:active  { transform: scale(.88); }
.zfu-icon-btn svg {
  width: 20px; height: 20px;
  stroke: var(--mid); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible; display: block; pointer-events: none;
  flex-shrink: 0;
}

.zfu-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; border-radius: 9px; padding: 0 3px;
  background: var(--p); color: #fff; font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* PROGRESS */
.zfu-progress-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 6px; position: relative; z-index: 2;
}
.zfu-progress-track {
  flex: 1; height: 3px; border-radius: 3px; background: var(--bdr); overflow: hidden;
}
.zfu-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--p), var(--acc));
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.zfu-counter { font-size: .72rem; color: var(--dim); white-space: nowrap; min-width: 48px; text-align: right; letter-spacing: .12em; }

/* ═══════════════════════════════════════════════════
   CARD STACK
═══════════════════════════════════════════════════ */
.zfu-stack-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 16px 8px; position: relative; z-index: 2; min-height: 0;
}
.zfu-stack {
  position: relative; width: 100%; max-width: 380px;
  height: min(56vh, 420px);
}
.zfu-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--dim); font-size: .88rem;
}
.zfu-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--bdr); border-top-color: var(--p);
  animation: zfu-spin .7s linear infinite;
}
@keyframes zfu-spin { to { transform: rotate(360deg); } }

/* Cards */
.zfu-card {
  position: absolute; inset: 0; border-radius: var(--r);
  background: var(--sur); border: 1px solid var(--bdr);
  box-shadow: 0 10px 40px var(--shd);
  transform-origin: 50% 110%; user-select: none; touch-action: none;
  overflow: hidden; cursor: grab;
  transition: transform var(--t-med) cubic-bezier(.4,0,.2,1), box-shadow var(--t-med);
}
.zfu-card:not(.top) {
  --d: 1;
  transform: scale(calc(1 - var(--d) * .04)) translateY(calc(var(--d) * 14px));
  filter: brightness(calc(1 - var(--d) * .04));
  pointer-events: none;
}
.zfu-card.top { cursor: grab; z-index: 5; }
.zfu-card.dragging { cursor: grabbing; transition: none !important; box-shadow: 0 20px 60px var(--shd); }
.zfu-card.fly-right { animation: flyRight .38s cubic-bezier(.4,0,.2,1) forwards; }
.zfu-card.fly-left  { animation: flyLeft  .38s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes flyRight { to { transform: translateX(130vw) rotate(25deg); opacity: 0; } }
@keyframes flyLeft  { to { transform: translateX(-130vw) rotate(-25deg); opacity: 0; } }

.zfu-card-image {
  width: 100%; height: 190px; object-fit: cover;
  border-radius: var(--r) var(--r) 0 0;
}
.zfu-card-inner {
  height: 100%; overflow-y: auto; padding: 20px 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none;
}
.zfu-card-inner::-webkit-scrollbar { display: none; }
.zfu-card-toprow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.zfu-card-num { font-size: .72rem; color: var(--dim); font-weight: 600; letter-spacing: .06em; }
.zfu-card-badges { display: flex; gap: 6px; }
.zfu-cbadge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 500;
  background: var(--pale); border: 1px solid var(--bdr); color: var(--mid);
}
.zfu-cbadge svg { width: 12px; height: 12px; }

.zfu-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--p), var(--p2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px var(--glow); margin-bottom: 4px;
}
.zfu-card-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; }
.zfu-card-cat { font-size: .72rem; color: var(--p); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.zfu-card-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; line-height: 1.15; color: var(--txt); }
.zfu-card-desc  { font-size: .88rem; color: var(--mid); line-height: 1.55; flex: 1; }
.zfu-card-tags  { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.zfu-tag {
  padding: 3px 10px; border-radius: 20px; font-size: .72rem;
  background: var(--pale); border: 1px solid var(--bdr); color: var(--mid);
}

/* Swipe indicators */
.zfu-ind {
  position: absolute; top: 28px; padding: 8px 18px; border-radius: 10px;
  font-weight: 700; font-size: .9rem; letter-spacing: .06em; opacity: 0;
  pointer-events: none; transition: opacity .1s;
}
.zfu-ind-like { left: 20px;  background: rgba(46,213,115,.15); border: 2px solid #2ed573; color: #2ed573; transform: rotate(-12deg); }
.zfu-ind-skip { right: 20px; background: rgba(224,64,96,.12);  border: 2px solid #e04060; color: #e04060; transform: rotate(12deg); }

/* Empty */
.zfu-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 24px; width: 100%; max-width: 360px; margin: 0 auto;
}
.zfu-empty-icon {
  width: 64px; height: 64px; background: var(--pale); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.zfu-empty-icon svg { width: 32px; height: 32px; stroke: var(--p); fill: none; }
.zfu-empty h2 { font-family: var(--font-serif); font-size: 1.4rem; }
.zfu-empty p  { color: var(--dim); font-size: .88rem; }
.zfu-btn-restart {
  padding: 11px 24px; border-radius: 14px; font-weight: 500; font-size: .9rem;
  background: var(--pale); border: 1.5px solid var(--bdr); color: var(--p);
  transition: background var(--t-fast);
}
.zfu-btn-restart:hover { background: var(--p); color: #fff; }

/* ═══════════════════════════════════════════════════
   CONTROLS
═══════════════════════════════════════════════════ */
.zfu-controls {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 8px 16px 6px; position: relative; z-index: 5;
}
.zfu-ctrl {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bdr); transition: all var(--t-fast);
  box-shadow: 0 2px 10px var(--shd); background: var(--sur);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0; margin: 0; flex-shrink: 0;
}
.zfu-ctrl svg { fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; pointer-events: none; }

.zfu-ctrl-skip { width: 54px; height: 54px; color: #e04060; }
.zfu-ctrl-skip svg { width: 22px; height: 22px; stroke: #e04060; stroke-width: 2.2; }
.zfu-ctrl-skip:hover { background: #e04060; border-color: #e04060; }
.zfu-ctrl-skip:hover svg { stroke: #fff; }

.zfu-ctrl-surprise { width: 44px; height: 44px; color: var(--dim); }
.zfu-ctrl-surprise svg { width: 18px; height: 18px; stroke: var(--dim); stroke-width: 1.8; }
.zfu-ctrl-surprise:hover { background: var(--pale); border-color: var(--p); color: var(--p); transform: scale(1.06); }
.zfu-ctrl-surprise:hover svg { stroke: var(--p); }

.zfu-ctrl-heart {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--like), hsl(330 80% 55%));
  border-color: transparent; box-shadow: 0 6px 28px rgba(232,76,139,.4);
}
.zfu-ctrl-heart svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 1.8; }
.zfu-ctrl-heart:hover { transform: scale(1.12); box-shadow: 0 8px 36px rgba(232,76,139,.6); }

.zfu-swipe-hint {
  text-align: center; font-size: .75rem; color: var(--dim);
  padding: 2px 0 10px; position: relative; z-index: 2; letter-spacing: .04em;
  user-select: none; -webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════
   OVERLAY + SIDEBARS
═══════════════════════════════════════════════════ */
.zfu-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30,27,48,.35); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-med);
}
.zfu-overlay.on { opacity: 1; pointer-events: all; }

.zfu-sidebar {
  position: fixed; top: 0; bottom: 0; width: min(320px, 88vw); z-index: 60;
  background: var(--sur); border-color: var(--bdr);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
  display: flex; flex-direction: column;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  transition: transform var(--t-med) cubic-bezier(.4,0,.2,1);
}
.zfu-sidebar-left  { left: 0; transform: translateX(-100%); border-right: 1px solid var(--bdr); }
.zfu-sidebar-right { right: 0; transform: translateX(100%);  border-left:  1px solid var(--bdr); }
.zfu-sidebar.open  { transform: translateX(0); }

.zfu-sidebar-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 16px 14px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.zfu-sidebar-brand { font-family: var(--font-serif); font-size: 1.15rem; color: var(--txt); }
.zfu-close-btn {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pale); color: var(--mid); font-size: 1rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.zfu-close-btn:hover { background: var(--p); color: #fff; }

/* User row */
.zfu-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.zfu-avatar {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--p), var(--like));
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem; color: #fff; flex-shrink: 0;
  border: 2px solid var(--bdr);
}
.zfu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zfu-user-info { flex: 1; min-width: 0; }
.zfu-user-info strong { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zfu-user-info span   { font-size: .75rem; color: var(--dim); }
.zfu-user-info code   { font-size: .75rem; background: var(--pale); padding: 1px 5px; border-radius: 4px; }

/* Profile upload */
.zfu-profile-actions { display: flex; gap: 8px; padding: 12px 16px 14px; flex-shrink: 0; }
.zfu-profile-actions label { flex: 1; text-align: center; }
.zfu-upload-btn {
  display: block; width: 100%; padding: 8px; border-radius: 10px; font-size: .78rem; font-weight: 500;
  background: var(--pale); border: 1.5px solid var(--bdr); color: var(--mid);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast); text-align: center;
}
.zfu-upload-btn:hover { background: var(--p); color: #fff; border-color: var(--p); }
.zfu-upload-btn svg { width: 14px; height: 14px; display: inline; vertical-align: middle; margin-right: 4px; stroke: currentColor; fill: none; }
input[type="file"].zfu-file-input { display: none; }

/* Partner box */
.zfu-partner-box { padding: 12px 16px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.zfu-partner-connected { display: flex; align-items: center; gap: 10px; }
.zfu-partner-connected svg { width: 22px; height: 22px; stroke: var(--p); fill: none; flex-shrink: 0; }
.zfu-partner-text { flex: 1; }
.zfu-partner-text strong { display: block; font-size: .88rem; }
.zfu-partner-text span   { font-size: .75rem; color: var(--dim); }
.zfu-partner-details summary {
  cursor: pointer; list-style: none; font-size: .88rem; color: var(--mid);
  display: flex; align-items: center; gap: 6px;
}
.zfu-partner-details summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.zfu-partner-inner { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.zfu-partner-inner-head { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.zfu-partner-close {
  background: none; border: none; cursor: pointer; color: var(--dim);
  font-size: 1rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.zfu-partner-close:hover { color: var(--txt); background: var(--pale); }
.zfu-qr-box { text-align: center; }
.zfu-qr-box img { display: inline-block; border-radius: 12px; border: 1px solid var(--bdr); }
.zfu-qr-label { font-size: .75rem; color: var(--dim); margin-top: 6px; }
.zfu-connect-row { display: flex; gap: 8px; }
.zfu-connect-row .zfu-input { flex: 1; padding: 9px 11px; }

/* Cat nav */
.zfu-cat-nav { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.zfu-nav-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin: 8px 0 4px; }
.zfu-cat-btn {
  padding: 9px 12px; border-radius: 10px; text-align: left; font-size: .86rem; color: var(--mid);
  transition: background var(--t-fast), color var(--t-fast);
  display: flex; align-items: center; gap: 8px;
}
.zfu-cat-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.zfu-cat-btn:hover  { background: var(--pale); color: var(--p); }
.zfu-cat-btn.active { background: var(--pale); color: var(--p); font-weight: 600; }

/* Theme section */
.zfu-theme-section { padding: 8px 16px 12px; border-top: 1px solid var(--bdr); flex-shrink: 0; }
.zfu-theme-row { display: flex; gap: 6px; }
.zfu-theme-btn {
  flex: 1; padding: 9px 4px; border-radius: 10px; font-size: .78rem; font-weight: 500; text-align: center;
  border: 1.5px solid var(--bdr); color: var(--mid); background: transparent;
  transition: all var(--t-fast);
}
.zfu-theme-btn.active { background: var(--p); color: #fff; border-color: var(--p); }
.zfu-theme-btn:hover:not(.active) { background: var(--pale); color: var(--p); }

/* Sidebar footer */
.zfu-sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--bdr); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }

/* ═══════════════════════════════════════════════════
   RIGHT SIDEBAR — Likes & Matches
═══════════════════════════════════════════════════ */
.zfu-tabs-bar { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.zfu-tab {
  flex: 1; padding: 9px; border-radius: 10px; font-size: .84rem; font-weight: 500; color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.zfu-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.zfu-tab.active { background: var(--pale); color: var(--p); }

.zfu-list-wrap { flex: 1; overflow-y: auto; padding: 8px; }
.zfu-list-loading, .zfu-list-empty {
  padding: 24px 16px; text-align: center; font-size: .85rem; color: var(--dim); line-height: 1.6;
}
.zfu-list-item-wrap { margin-bottom: 4px; }
.zfu-list-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 10px;
  border-radius: 12px; cursor: pointer; transition: background var(--t-fast);
  border: 1px solid transparent;
}
.zfu-list-item:hover { background: var(--pale); border-color: var(--bdr); }
.zfu-list-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--p), var(--p2));
  display: flex; align-items: center; justify-content: center;
}
.zfu-list-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.zfu-list-info { flex: 1; min-width: 0; }
.zfu-list-info strong { display: block; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zfu-list-info span   { font-size: .75rem; color: var(--dim); }
.zfu-list-match-badge {
  width: 24px; height: 24px; border-radius: 50%; background: var(--pale); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--p);
}
.zfu-list-match-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

/* Affiliate in list */
.zfu-list-affiliate { border-top: 1px solid var(--bdr); padding: 10px; margin-top: 4px; }
.zfu-list-affiliate-label {
  font-size: .7rem; color: var(--dim); margin-bottom: 8px;
  display: flex; align-items: center; gap: 4px;
}
.zfu-list-affiliate-label svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

/* ═══════════════════════════════════════════════════
   AFFILIATE CARDS
═══════════════════════════════════════════════════ */
.zfu-affiliate-card {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--pale); border: 1.5px solid var(--bdr); border-radius: 12px;
  text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast);
  margin-bottom: 6px;
}
.zfu-affiliate-card:hover { background: var(--bg); border-color: var(--p); }
.zfu-affiliate-card-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--p), var(--p2));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.zfu-affiliate-card-icon svg { width: 14px; height: 14px; stroke: #fff; fill: none; }
.zfu-affiliate-card-text { flex: 1; min-width: 0; }
.zfu-affiliate-card-text strong { display: block; font-size: .8rem; font-weight: 600; color: var(--txt); }
.zfu-affiliate-card-text span   { font-size: .72rem; color: var(--dim); }
.zfu-affiliate-badge {
  font-size: .65rem; padding: 2px 6px; border-radius: 4px;
  background: rgba(251,191,36,.15); color: #b45309; border: 1px solid rgba(251,191,36,.4);
  white-space: nowrap; flex-shrink: 0;
}
.zfu-affiliate-section { display: flex; flex-direction: column; gap: 8px; }
.zfu-affiliate-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 6px;
}
.zfu-affiliate-title svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.zfu-affiliate-hint { font-size: .72rem; color: var(--dim); line-height: 1.5; }
.zfu-dsgvo-hint { font-size: .68rem; color: var(--dim); padding: 6px 0; line-height: 1.5; opacity: .7; }

/* ═══════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════ */
.zfu-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end;
  background: rgba(30,27,48,.5); backdrop-filter: blur(6px);
  padding: 0 0 var(--safe-b);
}
.zfu-modal-inner {
  width: 100%; max-height: 90dvh; overflow-y: auto;
  background: var(--sur); border-radius: 28px 28px 0 0;
  border: 1px solid var(--bdr); border-bottom: none;
  padding: 0 20px calc(16px + var(--safe-b));
  display: flex; flex-direction: column; gap: 14px;
}

.zfu-modal-topbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 14px 0 4px; position: sticky; top: 0;
  background: var(--sur); z-index: 2;
}

.zfu-modal-close-x {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--pale); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--mid); transition: background var(--t-fast), color var(--t-fast);
  -webkit-appearance: none; flex-shrink: 0;
}
.zfu-modal-close-x:hover { background: var(--p); color: #fff; }
.zfu-modal-close-x svg { width: 16px; height: 16px; stroke: currentColor; display: block; }
.zfu-modal.zfu-modal-centered { align-items: center; justify-content: center; padding: 20px; }
.zfu-modal.zfu-modal-centered .zfu-modal-inner {
  max-width: 440px; border-radius: 28px; border-bottom: 1px solid var(--bdr); max-height: 85dvh;
}
.zfu-modal-icon {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto;
  background: linear-gradient(135deg, var(--p), var(--like));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px var(--glow);
}
.zfu-modal-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; }
.zfu-modal-title { font-family: var(--font-serif); font-size: 1.55rem; text-align: center; color: var(--txt); }
.zfu-modal-sub   { text-align: center; font-size: .875rem; color: var(--dim); }
.zfu-modal-btns  { display: flex; gap: 10px; }
.zfu-modal-btns .zfu-btn-ghost   { flex: 1; text-align: center; }
.zfu-modal-btns .zfu-btn-primary { flex: 2; }

/* Match card in modal */
.zfu-match-card {
  background: var(--pale); border: 1px solid var(--bdr);
  border-radius: 16px; padding: 16px; text-align: center;
}
.zfu-mc-icon {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--p), var(--p2));
  display: flex; align-items: center; justify-content: center;
}
.zfu-mc-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; }
.zfu-mc-title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 6px; color: var(--txt); }
.zfu-mc-desc  { font-size: .875rem; color: var(--mid); line-height: 1.55; }

/* Calendar */
.zfu-cal-title { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.zfu-date-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.zfu-date-scroll::-webkit-scrollbar { display: none; }
.zfu-date-chip {
  flex-shrink: 0; padding: 8px 14px; border-radius: 20px; font-size: .8rem; font-weight: 500;
  background: var(--pale); border: 1.5px solid var(--bdr); color: var(--mid); cursor: pointer;
  transition: all var(--t-fast); white-space: nowrap;
}
.zfu-date-chip.selected, .zfu-date-chip:hover { background: var(--p); color: #fff; border-color: var(--p); }
.zfu-cal-btns { display: flex; flex-direction: column; gap: 8px; }
.zfu-cal-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: var(--pale); border: 1.5px solid var(--bdr); color: var(--txt);
  font-size: .875rem; font-weight: 500; transition: background var(--t-fast); text-decoration: none;
}
.zfu-cal-btn:hover { background: var(--p); color: #fff; border-color: var(--p); }
.zfu-cal-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* Prep list */
.zfu-prep-title { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.zfu-prep-list { display: flex; flex-direction: column; gap: 6px; }
.zfu-prep-list li {
  display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; color: var(--mid);
  padding: 8px 10px; background: var(--pale); border-radius: 8px;
}
.zfu-prep-list li::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--p); margin-top: 5px; flex-shrink: 0;
}

/* Confetti */
.zfu-confetti-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px 28px 0 0; }
.zfu-conf { position: absolute; top: -10px; animation: confFall linear both; }
@keyframes confFall { to { transform: translateY(110%) rotate(360deg); opacity: 0; } }

/* ═══════════════════════════════════════════════════
   PWA INSTALL BANNER
═══════════════════════════════════════════════════ */
.zfu-pwa-banner {
  position: fixed; bottom: calc(var(--safe-b) + 12px); left: 12px; right: 12px; z-index: 55;
  background: var(--sur); backdrop-filter: blur(12px);
  border: 1.5px solid var(--bdr); border-radius: 18px; padding: 14px;
  box-shadow: 0 12px 40px var(--shd); display: flex; flex-direction: column; gap: 10px;
}
.zfu-pwa-inner { display: flex; align-items: flex-start; gap: 12px; }
.zfu-pwa-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--p), var(--like));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.zfu-pwa-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.zfu-pwa-text { flex: 1; }
.zfu-pwa-text strong { display: block; font-size: .88rem; font-weight: 600; color: var(--txt); }
.zfu-pwa-text span   { font-size: .78rem; color: var(--dim); }
.zfu-pwa-close {
  padding: 6px; border-radius: 8px; background: var(--pale); color: var(--dim);
  font-size: .9rem; line-height: 1;
}
.zfu-pwa-install-btn {
  width: 100%; padding: 11px; border-radius: 12px; font-weight: 500; font-size: .88rem;
  background: linear-gradient(135deg, var(--p), var(--p2)); color: #fff;
  box-shadow: 0 4px 16px var(--glow);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .zfu-card-title { font-size: 1.8rem; }
  .zfu-auth-wrap  { padding: 42px 36px 36px; }
}
@media (min-width: 768px) {
  .zfu-sidebar { width: 320px; }
  .zfu-modal { align-items: center; justify-content: center; }
  .zfu-modal-inner { border-radius: 28px; border-bottom: 1px solid var(--bdr); max-width: 480px; max-height: 85dvh; }
  .zfu-confetti-wrap { border-radius: 28px; }
  .zfu-ctrl-skip     { width: 58px; height: 58px; }
  .zfu-ctrl-heart    { width: 70px; height: 70px; }
  .zfu-ctrl-surprise { width: 48px; height: 48px; }
}