/* ═══════════════════════════════════════════════════════
   ZEIT FÜR UNS v4.1.6 — Apple Glass UI Restyle (Light)
   Design: Frosted glass · Cormorant + Jakarta · Rose accent
   Palette: Cloud white · Blush rose · Warm neutral
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

.zfu-root {
  --p:      #e8506a;
  --p2:     #c93d55;
  --pale:   rgba(232,80,106,.09);
  --glow:   rgba(232,80,106,.22);
  --acc:    #f28fa0;
  --bg:     #f5f5f7;
  --sur:    rgba(255,255,255,0.72);
  --sur-solid: #ffffff;
  --txt:    #1d1d1f;
  --mid:    #4a3a40;
  --dim:    #8e8e93;
  --bdr:    rgba(0,0,0,.08);
  --bdr-strong: rgba(0,0,0,.12);
  --shd:    rgba(0,0,0,.08);
  --shd-lg: rgba(0,0,0,.14);
  --like:   #34c759;
  --nope:   #ff3b30;
  --r:      22px;
  --r-sm:   14px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:  'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --t-fast: .16s;
  --t-med:  .28s;
  --t-slow: .42s;
  --text:     var(--txt);
  --text-sub: var(--dim);
  --surface:  var(--sur);
  --border:   var(--bdr);
  --accent:   var(--p);
  --accent2:  var(--p2);
  --shadow:   0 8px 32px var(--shd);
  --shadow-sm:0 2px 12px var(--shd);
  --radius:   var(--r);
  --radius-sm:var(--r-sm);
  --glass-bg:       rgba(255,255,255,0.68);
  --glass-bg-heavy: rgba(255,255,255,0.85);
  --glass-border:   rgba(255,255,255,0.90);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.10), 0 1.5px 0 rgba(255,255,255,.9) inset;
  --glass-shadow-lg:0 20px 60px rgba(0,0,0,.13), 0 1.5px 0 rgba(255,255,255,.9) inset;
  --blur:           blur(22px) saturate(1.6);
  --blur-light:     blur(12px) saturate(1.4);
}

.zfu-root[data-theme="feminine"],
.zfu-root[data-theme="warm"] {
  --p: #e8788a; --p2: #d45f72; --pale: rgba(232,120,138,.09);
  --glow: rgba(232,120,138,.20); --acc: #f5a3b0;
  --bg: #fdf5f6; --txt: #2e1a22; --mid: #7a4a58;
  --dim: #b8909a; --bdr: rgba(180,60,80,.10); --shd: rgba(180,70,90,.08);
  --like: #ff375f; --accent: var(--p); --accent2: var(--p2);
}

.zfu-root[data-theme="masculine"],
.zfu-root[data-theme="cool"] {
  --p: #0a84ff; --p2: #0071e3; --pale: rgba(10,132,255,.09);
  --glow: rgba(10,132,255,.20); --acc: #64acff;
  --bg: #f0f4ff; --txt: #0f172a; --mid: #334155;
  --dim: #8e9ab8; --bdr: rgba(10,100,230,.10); --shd: rgba(20,60,180,.08);
  --like: #30d158; --accent: var(--p); --accent2: var(--p2);
}

*, *::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; }

.zfu-root {
  font-family: var(--font-sans);
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  min-height: 100dvh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  max-width: none !important;
  overflow-x: clip;
}

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

/* BACKGROUND */
.zfu-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(255,200,210,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(200,210,255,.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,240,245,.35) 0%, transparent 70%),
    linear-gradient(165deg, #fdf5f7 0%, #f5f5f7 45%, #f0f4ff 100%);
  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: 2px; height: 2px;
  background: var(--p); opacity: .07; border-radius: 50%;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: .10; }
  90%  { opacity: .04; }
  100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}
.zfu-bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .6;
}

/* BUTTONS */
.zfu-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 22px; border-radius: 14px; border: none;
  background: var(--p); color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 4px 16px var(--glow), 0 1px 0 rgba(255,255,255,.3) inset;
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.zfu-btn-primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow), 0 1px 0 rgba(255,255,255,.3) inset; }
.zfu-btn-primary:active:not(:disabled) { transform: scale(.97); filter: brightness(.97); }
.zfu-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.zfu-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--bdr-strong);
  background: var(--glass-bg); backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
  color: var(--mid); font-size: .88rem; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.zfu-btn-ghost:hover { background: var(--pale); color: var(--p); border-color: rgba(232,80,106,.25); }

.zfu-btn-sm { padding: 7px 14px; border-radius: 10px; font-size: .78rem; font-weight: 600; }
.zfu-btn-sm.zfu-btn-ghost  { border: 1px solid var(--bdr-strong); color: var(--mid); background: var(--glass-bg); backdrop-filter: var(--blur-light); }
.zfu-btn-sm.zfu-btn-primary { background: var(--p); color: #fff; border: none; box-shadow: 0 3px 10px var(--glow); }
.zfu-btn-full { width: 100%; }
.zfu-error { font-size: .8rem; color: #ff3b30; min-height: 16px; margin-top: 4px; }

/* AUTH */
#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(--glass-bg-heavy); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius: 28px;
  box-shadow: var(--glass-shadow-lg); padding: 38px 30px 32px;
}
.zfu-auth-logo {
  width: 60px; height: 60px; border-radius: 18px; background: var(--p);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  box-shadow: 0 6px 24px var(--glow), 0 1px 0 rgba(255,255,255,.4) inset; overflow: hidden;
}
.zfu-auth-logo svg { width: 28px; height: 28px; stroke: #fff; fill: none; }
.zfu-auth-logo-img { width: 100%; height: 100%; object-fit: contain; }
.zfu-auth-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(28px,7vw,36px); text-align: center; margin-bottom: 6px; letter-spacing: -.01em; }
.zfu-auth-title em { font-style: italic; color: var(--p); }
.zfu-auth-sub { text-align: center; font-size: .82rem; color: var(--dim); margin-bottom: 24px; }
.zfu-auth-tabs {
  display: flex; gap: 4px; background: rgba(0,0,0,.05);
  border-radius: 14px; padding: 4px; margin-bottom: 22px;
}
.zfu-auth-tab { flex: 1; padding: 9px; border-radius: 11px; font-size: .84rem; font-weight: 600; color: var(--dim); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.zfu-auth-tab.active { background: #fff; color: var(--txt); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.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: 6px; margin-bottom: 0; }
.zfu-field-label { font-size: .78rem; font-weight: 600; color: var(--mid); letter-spacing: .01em; }
.zfu-optional { font-weight: 400; color: var(--dim); }
.zfu-input {
  width: 100%; padding: 12px 15px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
  color: var(--txt); font-size: .9rem; outline: none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.zfu-input:focus { border-color: var(--p); background: #fff; box-shadow: 0 0 0 3.5px rgba(232,80,106,.15); }
.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: #ff3b30; 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(--glass-bg-heavy); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius: 28px;
  box-shadow: var(--glass-shadow-lg); padding: 34px 26px 28px;
}
.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,30px); text-align: center; margin-bottom: 5px; letter-spacing: -.01em; }
.zfu-ob-sub { text-align: center; font-size: .82rem; color: var(--dim); margin-bottom: 24px; }
.zfu-ob-step { display: none; }
.zfu-ob-step.active { display: block; }
.zfu-ob-step h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--txt); }
.zfu-ob-hint { font-size: .75rem; color: var(--dim); margin-bottom: 14px; }
.zfu-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.zfu-chip {
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.65); backdrop-filter: blur(8px);
  font-size: .82rem; color: var(--mid); cursor: pointer; transition: all var(--t-fast);
}
.zfu-chip:hover { border-color: var(--p); color: var(--p); background: var(--pale); }
.zfu-chip.selected { background: var(--p); border-color: transparent; color: #fff; box-shadow: 0 2px 10px var(--glow); }
.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: 13px 16px; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.65); backdrop-filter: blur(8px);
  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); box-shadow: 0 0 0 3px rgba(232,80,106,.10); }
.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: 7px; justify-content: center; margin-top: 16px; }
.zfu-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.15); transition: background var(--t-fast), transform var(--t-fast); }
.zfu-dot.active { background: var(--p); transform: scale(1.3); }

/* MAIN APP */
#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: 14px 16px 12px;
  background: var(--glass-bg-heavy); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255,255,255,.80);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.04);
}
.zfu-header-center { text-align: center; flex: 1; }
.zfu-eyebrow {
  display: inline-block; font-size: .60rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--p);
  background: var(--pale); border: 1px solid rgba(232,80,106,.20); padding: 3px 11px; border-radius: 100px; margin-bottom: 4px;
}
.zfu-app-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(22px,6vw,32px); line-height: 1; color: var(--txt); letter-spacing: -.01em; }
.zfu-app-title em { font-style: italic; color: var(--p); }
.zfu-icon-btn {
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255,255,255,.80); backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
  border: 1px solid rgba(255,255,255,.90);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer; flex-shrink: 0; position: relative;
  -webkit-appearance: none; appearance: none; color: var(--mid);
}
.zfu-icon-btn:hover { background: rgba(255,255,255,.95); box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.9) inset; }
.zfu-icon-btn:active { transform: scale(.88); }
.zfu-icon-btn svg { width: 20px; height: 20px; stroke: var(--mid); fill: none; stroke-width: 1.8; 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: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); box-shadow: 0 2px 6px var(--glow);
}

/* 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: rgba(0,0,0,.08); overflow: hidden; }
.zfu-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--p), var(--acc)); box-shadow: 0 0 6px var(--glow); transition: width .45s cubic-bezier(.4,0,.2,1); }
.zfu-counter { font-size: .70rem; color: var(--dim); white-space: nowrap; min-width: 48px; text-align: right; letter-spacing: .10em; font-weight: 500; }

/* 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 rgba(0,0,0,.08); border-top-color: var(--p); animation: zfu-spin .7s linear infinite; }
@keyframes zfu-spin { to { transform: rotate(360deg); } }

.zfu-card {
  position: absolute; inset: 0; border-radius: 24px;
  background: var(--glass-bg-heavy); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  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) * .035)) translateY(calc(var(--d) * 14px)); filter: brightness(calc(1 - var(--d) * .03)); pointer-events: none; }
.zfu-card.top { cursor: grab; z-index: 5; }
.zfu-card.dragging { cursor: grabbing; transition: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 24px 60px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08); }
.zfu-card.fly-right { animation: flyRight .36s cubic-bezier(.4,0,.2,1) forwards; }
.zfu-card.fly-left  { animation: flyLeft  .36s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes flyRight { to { transform: translateX(130vw) rotate(22deg); opacity: 0; } }
@keyframes flyLeft  { to { transform: translateX(-130vw) rotate(-22deg); opacity: 0; } }

.zfu-card-image { width: 100%; height: 190px; object-fit: cover; border-radius: 24px 24px 0 0; }
.zfu-card-inner { height: 100%; overflow-y: auto; padding: 20px 22px 18px; 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: .68rem; color: var(--dim); font-weight: 600; letter-spacing: .08em; }
.zfu-card-badges { display: flex; gap: 6px; }
.zfu-cbadge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 100px; font-size: .68rem; font-weight: 600; background: var(--pale); border: 1px solid rgba(232,80,106,.18); color: var(--p); letter-spacing: .02em; }
.zfu-cbadge svg { width: 12px; height: 12px; }
.zfu-card-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--p); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px var(--glow), 0 1px 0 rgba(255,255,255,.3) inset; margin-bottom: 4px; }
.zfu-card-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; }
.zfu-card-cat { font-size: .68rem; color: var(--p); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.zfu-card-title { font-family: var(--font-serif); font-size: 1.65rem; font-weight: 400; line-height: 1.12; color: var(--txt); letter-spacing: -.01em; }
.zfu-card-desc  { font-size: .875rem; color: var(--mid); line-height: 1.60; flex: 1; }
.zfu-card-tags  { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.zfu-tag { padding: 4px 11px; border-radius: 100px; font-size: .68rem; font-weight: 500; background: rgba(255,255,255,.65); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,.08); color: var(--mid); }

.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; backdrop-filter: blur(10px); }
.zfu-ind-like { left: 20px;  background: rgba(52,199,89,.18); border: 2px solid #34c759; color: #28a745; transform: rotate(-12deg); }
.zfu-ind-skip { right: 20px; background: rgba(255,59,48,.14);  border: 2px solid #ff3b30; color: #ff3b30; transform: rotate(12deg); }

.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: 68px; height: 68px; background: rgba(255,255,255,.80); backdrop-filter: var(--blur-light); border: 1px solid rgba(255,255,255,.90); border-radius: 22px; display: flex; align-items: center; justify-content: center; box-shadow: var(--glass-shadow); }
.zfu-empty-icon svg { width: 32px; height: 32px; stroke: var(--p); fill: none; }
.zfu-empty h2 { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -.01em; }
.zfu-empty p  { color: var(--dim); font-size: .88rem; }
.zfu-btn-restart { padding: 12px 26px; border-radius: 14px; font-weight: 600; font-size: .88rem; background: rgba(255,255,255,.75); backdrop-filter: var(--blur-light); border: 1px solid rgba(0,0,0,.10); color: var(--p); transition: background var(--t-fast), box-shadow var(--t-fast); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.zfu-btn-restart:hover { background: var(--p); color: #fff; border-color: transparent; box-shadow: 0 4px 16px var(--glow); }

/* 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; transition: all var(--t-fast); 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: 56px; height: 56px; background: rgba(255,255,255,.82); backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light); border: 1px solid rgba(255,255,255,.90); box-shadow: 0 4px 16px rgba(255,59,48,.12), 0 1px 0 rgba(255,255,255,.9) inset; }
.zfu-ctrl-skip svg { width: 22px; height: 22px; stroke: #ff3b30; stroke-width: 2; }
.zfu-ctrl-skip:hover { background: #ff3b30; border-color: transparent; box-shadow: 0 6px 22px rgba(255,59,48,.35), 0 1px 0 rgba(255,255,255,.3) inset; }
.zfu-ctrl-skip:hover svg { stroke: #fff; }

.zfu-ctrl-undo { width: 46px; height: 46px; background: rgba(255,255,255,.75); backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light); border: 1px solid rgba(255,255,255,.90); box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.9) inset; }
.zfu-ctrl-undo svg { width: 18px; height: 18px; stroke: var(--dim); stroke-width: 2; }
.zfu-ctrl-undo:not(:disabled):hover { background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.9) inset; }
.zfu-ctrl-undo:not(:disabled):hover svg { stroke: var(--p); }
.zfu-ctrl-undo:disabled { cursor: not-allowed; opacity: .4; }

.zfu-ctrl-heart { width: 68px; height: 68px; background: var(--p); border: none; box-shadow: 0 6px 28px var(--glow), 0 1px 0 rgba(255,255,255,.35) inset; }
.zfu-ctrl-heart svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 1.8; }
.zfu-ctrl-heart:hover { transform: scale(1.10); box-shadow: 0 10px 36px var(--glow), 0 1px 0 rgba(255,255,255,.35) inset; }
.zfu-ctrl-heart:active { transform: scale(.95); }

.zfu-swipe-hint { text-align: center; font-size: .72rem; 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(0,0,0,.20); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); 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: rgba(255,255,255,.88); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border-color: rgba(255,255,255,.80); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.10) 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 rgba(255,255,255,.70); box-shadow: 4px 0 40px rgba(0,0,0,.10); }
.zfu-sidebar-right { right: 0; transform: translateX(100%);  border-left:  1px solid rgba(255,255,255,.70); box-shadow: -4px 0 40px rgba(0,0,0,.10); }
.zfu-sidebar.open  { transform: translateX(0); }
.zfu-sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px 16px; border-bottom: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.zfu-sidebar-brand { font-family: var(--font-serif); font-size: 1.2rem; color: var(--txt); letter-spacing: -.01em; }
.zfu-close-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); color: var(--mid); font-size: 1rem; transition: background var(--t-fast), color var(--t-fast); border: none; }
.zfu-close-btn:hover { background: var(--p); color: #fff; }

.zfu-user-row { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.zfu-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--p); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0; border: 2px solid rgba(255,255,255,.90); box-shadow: 0 2px 10px var(--glow); }
.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: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zfu-user-info span   { font-size: .72rem; color: var(--dim); }
.zfu-user-info code   { font-size: .72rem; background: var(--pale); padding: 1px 6px; border-radius: 5px; }

.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: 9px; border-radius: 11px; font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.70); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,.09); color: var(--mid); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); text-align: center; }
.zfu-upload-btn:hover { background: var(--p); color: #fff; border-color: transparent; }
.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; }

.zfu-partner-box { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.07); 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; font-weight: 600; }
.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: rgba(0,0,0,.06); }
.zfu-qr-box { text-align: center; }
.zfu-qr-box img { display: inline-block; border-radius: 14px; border: 1px solid rgba(0,0,0,.08); }
.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; }

.zfu-cat-nav { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.zfu-nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; margin: 10px 0 5px; }
.zfu-cat-btn { padding: 10px 12px; border-radius: 12px; text-align: left; font-size: .86rem; color: var(--mid); transition: background var(--t-fast), color var(--t-fast); display: flex; align-items: center; gap: 9px; }
.zfu-cat-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.zfu-cat-btn:hover  { background: rgba(0,0,0,.05); color: var(--txt); }
.zfu-cat-btn.active { background: var(--pale); color: var(--p); font-weight: 600; box-shadow: 0 0 0 1px rgba(232,80,106,.15) inset; }

.zfu-theme-section { padding: 8px 16px 14px; border-top: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.zfu-theme-row { display: flex; gap: 6px; }
.zfu-theme-btn { flex: 1; padding: 9px 4px; border-radius: 11px; font-size: .78rem; font-weight: 600; text-align: center; border: 1px solid rgba(0,0,0,.09); color: var(--mid); background: rgba(255,255,255,.65); backdrop-filter: blur(6px); transition: all var(--t-fast); }
.zfu-theme-btn.active { background: var(--p); color: #fff; border-color: transparent; box-shadow: 0 2px 10px var(--glow); }
.zfu-theme-btn:hover:not(.active) { background: rgba(255,255,255,.90); color: var(--txt); }

.zfu-sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(0,0,0,.07); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }

/* RIGHT SIDEBAR */
.zfu-tabs-bar { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid rgba(0,0,0,.07); flex-shrink: 0; background: rgba(0,0,0,.03); }
.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), box-shadow var(--t-fast); }
.zfu-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.zfu-tab.active { background: #fff; color: var(--p); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.zfu-list-wrap { flex: 1; overflow-y: auto; padding: 8px; }
.zfu-list-loading, .zfu-list-empty { padding: 28px 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: 12px 10px; border-radius: 14px; cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); border: 1px solid transparent; }
.zfu-list-item:hover { background: rgba(255,255,255,.80); backdrop-filter: blur(10px); border-color: rgba(0,0,0,.07); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.zfu-list-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: var(--p); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--glow); }
.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: .72rem; 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; }
.zfu-list-affiliate { border-top: 1px solid rgba(0,0,0,.07); padding: 10px; margin-top: 4px; }
.zfu-list-affiliate-label { font-size: .70rem; 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: 10px; padding: 11px 13px; background: rgba(255,255,255,.72); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.90); border-radius: 14px; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); margin-bottom: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.zfu-affiliate-card:hover { background: rgba(255,255,255,.92); border-color: rgba(232,80,106,.25); box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.zfu-affiliate-card-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--p); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px var(--glow); }
.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: .80rem; font-weight: 600; color: var(--txt); }
.zfu-affiliate-card-text span   { font-size: .72rem; color: var(--dim); }
.zfu-affiliate-badge { font-size: .65rem; padding: 3px 8px; border-radius: 6px; background: rgba(251,191,36,.12); color: #92600a; border: 1px solid rgba(251,191,36,.30); white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.zfu-affiliate-section { display: flex; flex-direction: column; gap: 8px; }
.zfu-affiliate-title { font-size: .72rem; font-weight: 700; letter-spacing: .10em; 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.55; }
.zfu-dsgvo-hint { font-size: .68rem; color: var(--dim); padding: 6px 0; line-height: 1.5; opacity: .65; }

/* MODALS */
.zfu-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(0,0,0,.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0 0 var(--safe-b); }
.zfu-modal-inner { width: 100%; max-height: 90dvh; overflow-y: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); border-radius: 28px 28px 0 0; border: 1px solid rgba(255,255,255,.90); border-bottom: none; box-shadow: 0 -4px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.9) inset; padding: 0 22px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.zfu-modal-inner::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.18); margin: 14px auto 0; flex-shrink: 0; }
.zfu-modal-topbar { display: flex; justify-content: flex-end; align-items: center; padding: 6px 0 4px; position: sticky; top: 0; background: transparent; z-index: 2; }
.zfu-modal-close-x { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.07); 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 rgba(255,255,255,.80); max-height: 85dvh; }
.zfu-modal.zfu-modal-centered .zfu-modal-inner::before { display: none; }
.zfu-modal-icon { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto; background: var(--p); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px var(--glow), 0 1px 0 rgba(255,255,255,.3) inset; }
.zfu-modal-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; }
.zfu-modal-title { font-family: var(--font-serif); font-size: 1.6rem; text-align: center; color: var(--txt); letter-spacing: -.01em; }
.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; }

.zfu-match-card { background: var(--pale); border: 1px solid rgba(232,80,106,.14); border-radius: 18px; padding: 18px; text-align: center; }
.zfu-mc-icon { width: 50px; height: 50px; border-radius: 16px; margin: 0 auto 12px; background: var(--p); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px var(--glow); }
.zfu-mc-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; }
.zfu-mc-title { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 6px; color: var(--txt); }
.zfu-mc-desc  { font-size: .875rem; color: var(--mid); line-height: 1.58; }

.zfu-cal-title { font-size: .78rem; font-weight: 700; letter-spacing: .10em; 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 16px; border-radius: 100px; font-size: .8rem; font-weight: 500; background: rgba(255,255,255,.70); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,.08); 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: transparent; box-shadow: 0 2px 10px var(--glow); }
.zfu-cal-btns { display: flex; flex-direction: column; gap: 8px; }
.zfu-cal-btn { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,.70); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,.08); color: var(--txt); font-size: .875rem; font-weight: 500; transition: all var(--t-fast); text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.zfu-cal-btn:hover { background: var(--p); color: #fff; border-color: transparent; box-shadow: 0 4px 16px var(--glow); }
.zfu-cal-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.zfu-prep-title { font-size: .78rem; font-weight: 700; letter-spacing: .10em; 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: 9px 12px; background: rgba(255,255,255,.65); backdrop-filter: blur(8px); border-radius: 10px; border: 1px solid rgba(0,0,0,.07); }
.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; }

.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 BANNER */
.zfu-pwa-banner { position: fixed; bottom: calc(var(--safe-b) + 12px); left: 12px; right: 12px; z-index: 55; background: rgba(255,255,255,.88); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.90); border-radius: 20px; padding: 15px; box-shadow: 0 14px 48px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.9) inset; display: flex; flex-direction: column; gap: 10px; }
.zfu-pwa-inner { display: flex; align-items: flex-start; gap: 12px; }
.zfu-pwa-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--p); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 10px var(--glow); }
.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: rgba(0,0,0,.06); color: var(--dim); font-size: .9rem; line-height: 1; }
.zfu-pwa-install-btn { width: 100%; padding: 12px; border-radius: 13px; font-weight: 600; font-size: .88rem; background: var(--p); color: #fff; box-shadow: 0 4px 16px var(--glow), 0 1px 0 rgba(255,255,255,.3) inset; }

/* RESPONSIVE */
@media (min-width: 480px) {
  .zfu-card-title { font-size: 1.85rem; }
  .zfu-auth-wrap  { padding: 44px 38px 38px; }
}
@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 rgba(255,255,255,.80); max-width: 480px; max-height: 85dvh; }
  .zfu-modal-inner::before { display: none; }
  .zfu-confetti-wrap { border-radius: 28px; }
  .zfu-ctrl-skip  { width: 60px; height: 60px; }
  .zfu-ctrl-heart { width: 72px; height: 72px; }
  .zfu-ctrl-undo  { width: 50px; height: 50px; }
}