/* ================================================================
   DALIA PORTAL — Shared design system (pastel)
   Used by /moj-profil and all sub-pages.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ─── TYPOGRAPHY (Phase B, 2026-05-05) ─────────────────────────
     Bundle D sweep (2026-05-18) — flatten na 3 font familije:
       Cardo (display + italic script) + Caveat (handwriting) + Manrope (body).
     Drift drop: Playfair Display, Jost, Spectral, Inter, Josefin,
     JetBrains Mono. Cormorant Garamond ostaje na fallback chain dok
     Bundle F ne refactor-a hardcoded `'Cormorant Garamond'` reference
     u CSS tokene. Caveat vraćen kao primary handwriting (prošli
     Phase B plan ga je htio uklonit, novi sprint plan kaže drugačije).
     Pravilo: novi kod NIKAD ne pise font-family direkt — pise
     `var(--font-display)` / `var(--font-script)` / `var(--font-body)`.
     ────────────────────────────────────────────────────────────── */
  --font-display: 'Cardo', 'Cormorant Garamond', Garamond, serif;
  --font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', 'Cardo', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── ORNAMENT LIBRARY (Phase C, 2026-05-05) ────────────────
     Renaissance geometric ornament-i (Quattrocento manuscript marginalia +
     Brunelleschi/Trajan kapital reference, ne Victorian floral swirl-ovi).
     SVG fajlovi koriste currentColor — nasljeduju color iz parent element-a,
     gold accent dot-ovi su hardcoded #c9a55c (var(--gold)).
     Use cases:
       --ornament-divider-thin: tihi page break, zamjenjuje horizontalne fade-linije
       --ornament-divider-rich: major section transition (hero→mark, itd.)
       --ornament-medallion:    section marker, hero accent, brand backdrop
       --ornament-fleuron:      in-line ornament, list marker, CTA accent
     ────────────────────────────────────────────────────────── */
  --ornament-divider-thin: url("/static/img/ornaments/divider-thin.svg");
  --ornament-divider-rich: url("/static/img/ornaments/divider-rich.svg");
  --ornament-medallion:    url("/static/img/ornaments/medallion.svg");
  --ornament-fleuron:      url("/static/img/ornaments/fleuron.svg");

  /* Paper & ink — aliased na couple-portal palette (2026-05-12 visual unification) */
  --paper:        var(--body-bg, #fffaf6);
  --paper-2:      var(--ivory, #f2e6db);
  --paper-soft:   #fffaf6;
  --ink:          var(--warm-black, #3f3138);
  --ink-soft:     var(--stone, #8B7F6E);
  --ink-mute:     var(--stone, #8B7F6E);
  --ink-faint:    #c8bfbe;

  /* Pastel palette — Dalia signature (kept za feature areas, soft tints) */
  --lilac-50:     #faf6ff;
  --lilac-100:    var(--ivory, #f2e6db);
  --lilac-200:    #e2cff3;
  --lilac-300:    #d3bbe8;
  --lilac-400:    #b692d4;
  --lilac-500:    #8e62b8;
  --lilac-700:    #6b4f8a;

  /* Couple signature mauve — prije je živio SAMO kao fallback u var(--color-deep-mauve,#b56b8d)
     svuda; sad je pravi token (jedno mjesto istine). Inline fallback ostaje kao obrana
     (render prije :root). Rasmus pre-launch: ne uvodim mrtav --mauve-signature alias. */
  --color-deep-mauve: #b56b8d;

  --sky-50:       #f4faff;
  --sky-100:      #e3f0fa;
  --sky-200:      #cfe2f3;
  --sky-300:      #b6d3ee;
  --sky-400:      #87b5dd;
  --sky-500:      #5d8cc0;
  --sky-700:      #3d6391;

  --butter-50:    #fefcf2;
  --butter-100:   #fbf6dd;
  --butter-200:   #f5e9b8;
  --butter-300:   #ecda90;
  --butter-400:   #dfc669;
  --butter-700:   #8a7224;

  --rose-100:     #fbe9e6;
  --rose-200:     #f3d2cd;
  --rose-300:     #e9b6ad;
  --rose-500:     #b87a76;
  --rose-700:     #7a4c48;

  --sage-100:     #e6efe2;
  --sage-200:     #d2e1cb;
  --sage-300:     #b7cdac;
  --sage-500:     #7e9484;
  --sage-700:     #4d6053;

  /* Accent — aliased na couple-portal gold-accent */
  --gold:         var(--gold-accent, #C9A84C);
  --gold-bright:  #e8cc88;
  --gold-deep:    var(--gold-accent, #8e6e2e);

  /* Lines & shadows — aliased na ivory variants */
  --line:         var(--ivory, rgba(63, 49, 56, 0.1));
  --line-warm:    rgba(201, 168, 76, 0.18);
  --line-strong:  rgba(63, 49, 56, 0.22);
  --shadow-sm:    0 4px 14px -8px rgba(45,34,56,0.18);
  --shadow:       0 14px 40px -22px rgba(45,34,56,0.32);
  --shadow-lg:    0 30px 70px -36px rgba(45,34,56,0.42);

  /* Easing */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emo:     cubic-bezier(0.65, 0, 0.35, 1);

  /* Chart palette (mauve/gold for couple, sage swap u .portal-theme-vendor) */
  --chart-impr-fill:    rgba(181, 107, 141, 0.20);  /* mauve 20% */
  --chart-impr-stroke:  rgba(181, 107, 141, 0.55);
  --chart-click-line:   #b56b8d;
  --chart-spend-line:   #d68aa1;
  --chart-intensity-0:  transparent;
  --chart-intensity-1:  rgba(181, 107, 141, 0.15);
  --chart-intensity-2:  rgba(181, 107, 141, 0.35);
  --chart-intensity-3:  rgba(181, 107, 141, 0.55);
  --chart-intensity-4:  rgba(181, 107, 141, 0.75);
  --chart-intensity-5:  #b56b8d;
  /* Status badge palette */
  --badge-success-bg:   rgba(95, 142, 119, 0.18);
  --badge-success-fg:   #4a7a55;
  --badge-warning-bg:   rgba(184, 130, 89, 0.18);
  --badge-warning-fg:   #8a6a20;
  --badge-danger-bg:    rgba(214, 138, 161, 0.18);
  --badge-danger-fg:    #b04060;
  --badge-neutral-bg:   rgba(155, 145, 136, 0.18);
  --badge-neutral-fg:   #777;

  /* ──────────────────────────────────────────────────────────────
     Z-INDEX REGISTAR (Sprint 10 prerequisite, 2026-05-18)
     Single source of truth za layer ordering. Sprint 10 dodaje 3
     nova layera (bottom sheet, bloom expanded, Dalia full sheet).
     Postojeći z-index values su mapped na tokens — nove komponente
     MORAJU koristiti tokens, ne raw brojeve.

     Layer scale (low → high):
       background    -2 / -1   pozadinski ornaments (paper texture)
       content        0–3      cards, polaroids, decoration
       sticky        10–20     in-flow sticky elements
       topbar        50        shell topbar (couple-topbar)
       progress      60        scroll progress bar
       corner-nav    70        5-corner nav (Sprint 10)
       dalia-tap1    95        Dalia button po prvom tap-u (gold ball)
       bloom         100       cvijet bloom expanded sub-icons
       lightbox      600       photo lightbox (postojeće .dp-plb)
       modal        1000       legacy modal (postojeće .dp-modal)
       sheet-bd     1040       bottom sheet backdrop
       sheet        1050       bottom sheet body
       dalia-sheet  1100       Dalia full-height sheet (vrh hijerarhije)
     ────────────────────────────────────────────────────────────── */
  --z-content:        1;
  --z-sticky:         10;
  --z-topbar:         50;
  --z-progress:       60;
  --z-corner-nav:     70;
  --z-dalia-tap1:     95;
  --z-bloom:          100;
  --z-lightbox:       600;
  --z-modal:          1000;
  --z-sheet-backdrop: 1040;
  --z-sheet:          1050;
  --z-dalia-sheet:    1100;
}

/* ====================================================================
   VENDOR THEME — full palette + typography override (Rasmus night 2026-05-12)
   ====================================================================
   Cascade rule: any element with class="portal-theme-vendor" replaces
   couple-portal warm tokens (paper rose-tinted, gold-deep accent, Cardo
   display) with vendor cooler northern palette (paper sage-tinted, sage
   accent, Spectral display). Per RASMUS_VENDORS_NIGHT_AUDIT.md Q1+Q2.

   Apply on: shell_vendor.html <body>, all templates/public/dobavljaci/*.html
   wrappers. Does NOT cascade into couple portal.

   Why split: Marko (vendor) and Ana (couple) open different applications.
   Ana wants intimate diary; Marko wants professional shopfront.
   ==================================================================== */
.portal-theme-vendor {
  /* Paper & ink — cooler, less warm rose, less luxury cream */
  --paper-vendor:       #f7f5f2;      /* cooler off-white, sage undertone */
  --paper-vendor-2:     #edeae5;      /* paper-2 cooler */
  --paper-vendor-soft:  #fbfaf8;
  --ink-vendor:         #2c2a28;      /* darker than couple ink, less violet */
  --ink-vendor-soft:    #6d6862;
  --ink-vendor-mute:    #8e887f;

  /* Sage accent (replaces gold-deep) — professional, not emotional.
     Line + tint tightened per Rasmus night-2 audit: less border weight,
     less wash, so contrast carries hierarchy instead of color saturation. */
  --accent-vendor:      #4a6051;      /* sage-deep */
  --accent-vendor-2:    #5e7866;      /* sage-mid (hover) */
  --accent-vendor-soft: #98a890;      /* sage-soft */
  --accent-vendor-tint: rgba(74, 96, 81, 0.06);
  --accent-vendor-line: rgba(74, 96, 81, 0.18);

  /* Override couple aliases when inside vendor theme */
  --paper:        var(--paper-vendor);
  --paper-2:      var(--paper-vendor-2);
  --paper-soft:   var(--paper-vendor-soft);
  --ink:          var(--ink-vendor);
  --ink-soft:     var(--ink-vendor-soft);
  --ink-mute:     var(--ink-vendor-mute);
  --gold-deep:    var(--accent-vendor);    /* legacy refs auto-pick sage */
  --gold-bright:  var(--accent-vendor-2);
  --line:         rgba(74, 96, 81, 0.14);
  --line-warm:    rgba(74, 96, 81, 0.22);
  --line-strong:  rgba(74, 96, 81, 0.35);

  /* Typography — Spectral replaces Cardo for vendor display (sharper,
     less ecclesiastical, more editorial-magazine — per Q2 Spectral
     resolution, OFL no license cost). Body Manrope stays. */
  --font-display: 'Spectral', 'Cardo', Garamond, serif;
  --font-script:  'Spectral', 'Cardo', Garamond, serif;

  /* Chart palette (sage — already set, kept here for cohesion) */
  --chart-impr-fill:    rgba(125, 140, 107, 0.22);
  --chart-impr-stroke:  rgba(125, 140, 107, 0.6);
  --chart-click-line:   #5f7050;
  --chart-spend-line:   #c39a86;
  --chart-intensity-1:  rgba(125, 140, 107, 0.15);
  --chart-intensity-2:  rgba(125, 140, 107, 0.35);
  --chart-intensity-3:  rgba(125, 140, 107, 0.55);
  --chart-intensity-4:  rgba(125, 140, 107, 0.75);
  --chart-intensity-5:  #7d8c6b;

  /* Couple-portal pastel tokens → sage equivalents (auto-cascade for
     untouched vendor templates that still reference rose/butter/lilac/mauve). */
  --rose-100:   var(--paper-vendor-2);
  --rose-300:   var(--accent-vendor-line);
  --rose-400:   var(--accent-vendor-soft);
  --rose-700:   var(--accent-vendor);
  --butter-100: var(--paper-vendor-2);
  --butter-300: var(--accent-vendor-line);
  --butter-700: var(--accent-vendor);
  --lilac-100:  var(--paper-vendor-2);
  --lilac-300:  var(--accent-vendor-line);
  --sage-100:   var(--accent-vendor-tint);
  --sage-300:   var(--accent-vendor-line);
  --sage-700:   var(--accent-vendor);
  --mauve-100:  var(--paper-vendor-2);
  --mauve-300:  var(--accent-vendor-line);
}

/* ════════════════════════════════════════════════════════════════════
   ZANDER POLISH PRIMITIVES — atmospheric layer (2026-05-13)
   Subtle micro-animations + asymmetry helpers. All opt-in via classes.
   No-JS fallback safe: reveal starts visible, JS hides + reveals.
   ════════════════════════════════════════════════════════════════════ */

/* Subtle paper grain — barely visible, breaks flat color */
.portal-theme-vendor.zd-grain,
.zd-grain.portal-theme-vendor { position: relative; }
.portal-theme-vendor.zd-grain::before,
.zd-grain.portal-theme-vendor::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.18; mix-blend-mode: multiply;
}

/* ── Reveal on scroll (stagger via data-delay or DOM order) ── */
.zd-reveal {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--zd-delay, 0ms);
}
body.zd-js .zd-reveal { opacity: 0; transform: translateY(24px); }
body.zd-js .zd-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.zd-js .zd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Counter — tabular nums, count-up animation handled by JS ── */
.zd-counter { font-variant-numeric: tabular-nums; }

/* ── Drop cap — editorial bio openings ── */
.zd-cap::first-letter,
.zd-cap > p:first-child::first-letter {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 4.4em;
  line-height: 0.86;
  float: left;
  margin: 0.08em 0.14em 0 0;
  color: var(--accent-vendor, #4a6051);
  font-weight: 300;
  letter-spacing: -0.04em;
}

/* ── Photo hover overlay — reveals an action label on dark scrim ── */
.zd-photo-hover { position: relative; overflow: hidden; }
.zd-photo-hover::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(28, 27, 25, 0.42);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}
.zd-photo-hover:hover::before,
a:hover > .zd-photo-hover::before { opacity: 1; }
.zd-photo-hover .zd-hover-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #f7f5f2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  pointer-events: none;
}
.zd-photo-hover:hover .zd-hover-label,
a:hover > .zd-photo-hover .zd-hover-label {
  opacity: 1; transform: translateY(0);
}

/* ── Magnetic CTA — JS sets transform, CSS provides easing ── */
.zd-magnetic {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s, box-shadow 0.25s;
  will-change: transform;
}

/* ── Heart pop — favorite toggle bounce ── */
@keyframes zd-heart-pop {
  0%   { transform: scale(1) rotate(0); }
  25%  { transform: scale(1.32) rotate(-6deg); }
  55%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.v-heart-btn.is-popping { animation: zd-heart-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Vertical edge caption — site-wide page-edge mono label ── */
.zd-edge-caption {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(28, 27, 25, 0.32);
  pointer-events: none;
  z-index: 9;
  white-space: nowrap;
  user-select: none;
}
.zd-edge-caption-left {
  right: auto; left: 18px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}
@media (max-width: 1180px) { .zd-edge-caption { display: none; } }

/* ── Section divider — sage hairline with center dot ornament ── */
.zd-divider {
  position: relative;
  height: 1px;
  background: var(--accent-vendor-line, rgba(74,96,81,0.22));
  margin: clamp(48px, 6vw, 80px) 0;
}
.zd-divider::after {
  content: "·";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-vendor, #4a6051);
  font-family: 'Spectral', Georgia, serif;
  font-size: 2.2rem;
  line-height: 0;
  background: var(--paper-vendor, #f7f5f2);
  padding: 0 14px;
}

/* ── Slow drift on hero photos (Ken-Burns alternative) ── */
@keyframes zd-drift {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.06) translate3d(-1%, -0.6%, 0); }
  100% { transform: scale(1.02) translate3d(0.4%, -0.2%, 0); }
}
.zd-drift {
  animation: zd-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .zd-drift { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════
   MOIRÉ INTERFERENCE LAYER (2026-05-13)
   Two SVG pattern layers overlapped — one static, one slowly drifting.
   Interference produces a living, breathing texture without heavy GPU.
   Mix-blend-mode multiply with paper underneath = subtle sage ghosting.
   Variants:
     .zd-moire           — radial-dot grid (organic, default)
     .zd-moire-lines     — fine horizontal lines (editorial, sharper)
     .zd-moire-curves    — concentric arcs (premium, ornament-adjacent)
   Apply on a positioned wrapper (e.g. hero, page section). Layer sits
   between background and content via z-index. Pointer-events: none.
   Opacity capped 0.10 — moiré is whisper, not shout.
   ════════════════════════════════════════════════════════════════════ */
.zd-moire {
  position: relative;
  isolation: isolate;
}
.zd-moire::before,
.zd-moire::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.09;
  background-repeat: repeat;
}
.zd-moire > * { position: relative; z-index: 1; }

/* Layer A — dot grid 8px (static base) */
.zd-moire::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.7' fill='%234a6051'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}
/* Layer B — dot grid 8.4px (slightly offset → interference) + slow drift */
.zd-moire::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.7' fill='%234a6051'/%3E%3C/svg%3E");
  background-size: 8.4px 8.4px;
  animation: zd-moire-drift 38s ease-in-out infinite alternate;
}

/* Variant: fine horizontal lines */
.zd-moire-lines::before,
.zd-moire-lines::after {
  background-image: linear-gradient(0deg,
    transparent 0,
    transparent 3px,
    rgba(74, 96, 81, 0.55) 3px,
    rgba(74, 96, 81, 0.55) 3.5px,
    transparent 3.5px,
    transparent 7px);
  background-size: 100% 7px;
}
.zd-moire-lines::after {
  background-size: 100% 7.4px;
  animation: zd-moire-drift 44s ease-in-out infinite alternate;
}

/* Variant: concentric arcs (uses two radial gradients) */
.zd-moire-curves::before,
.zd-moire-curves::after {
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 11px,
    rgba(74, 96, 81, 0.42) 11px,
    rgba(74, 96, 81, 0.42) 11.5px);
}
.zd-moire-curves::after {
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 11.6px,
    rgba(74, 96, 81, 0.42) 11.6px,
    rgba(74, 96, 81, 0.42) 12.1px);
  animation: zd-moire-drift 56s ease-in-out infinite alternate;
}

/* Drift keyframes — minimal translate + sub-degree rotation. Two layers
   at slightly different periodicities create slow-moving interference
   bands. Avoid full rotation (causes nausea); 0.4deg is enough. */
@keyframes zd-moire-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-3px, -2px, 0) rotate(0.4deg); }
  100% { transform: translate3d(2px, 3px, 0) rotate(-0.3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .zd-moire::after,
  .zd-moire-lines::after,
  .zd-moire-curves::after { animation: none; }
}

/* When moiré sits over a photo, ink palette swap (paler dots on dark) */
.zd-moire.is-over-photo::before,
.zd-moire.is-over-photo::after {
  mix-blend-mode: screen;
  opacity: 0.16;
}
.zd-moire.is-over-photo::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.7' fill='%23f7f5f2'/%3E%3C/svg%3E");
}
.zd-moire.is-over-photo::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.7' fill='%23f7f5f2'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════
   PAGE-LEVEL ATMOSPHERIC FOUNDATION (Rasmus night batch, 2026-05-14)
   Body-level fixed photo + moiré overlay, couple-side only.
   Rasmus Sekcija 2.2 explicit: "page-level moiré ide na couple-emotivne
   surface (landing, /mladenci). Vendor surface koristi moiré samo
   per-wrapper, kao i sad. Body-level foto pozadina je isključivo
   couple-side — Ana zaslužuje da se osjeća kao da je u nekoj sobi;
   Marko zaslužuje da osjeća da je u svom shopu."
   ════════════════════════════════════════════════════════════════════ */
body.dp-atmosphere {
  position: relative;
}
body.dp-atmosphere::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('/static/img/higgsfield/optimized/landing-foundation-atmospheric-1920.webp');
  background-size: cover;
  background-position: center 55%;
  background-attachment: fixed;
  background-color: var(--paper);
  opacity: 0.10;
  pointer-events: none;
}
/* Until landing-foundation-atmospheric is generated (P1 image batch),
   fallback uses feature-twilight which already exists in optimized/. */
body.dp-atmosphere.dp-atmosphere-fallback::before {
  background-image: url('/static/img/higgsfield/optimized/feature-twilight-1920.webp');
  opacity: 0.07;
}
body.dp-atmosphere::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 11px,
    rgba(182, 146, 212, 0.18) 11px,
    rgba(182, 146, 212, 0.18) 11.5px);
  mix-blend-mode: multiply;
  opacity: 0.06;
  animation: dp-atmosphere-drift 72s ease-in-out infinite alternate;
}
@keyframes dp-atmosphere-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-4px, -2px, 0) rotate(0.3deg); }
  100% { transform: translate3d(3px, 4px, 0) rotate(-0.2deg); }
}

/* Couple portal variant — dots layered on subtle curves, manja opacity
   (Rasmus 2.2: "portal je dnevnik, ne marketing — moiré tiši nego landing"). */
body.dp-atmosphere.dp-atmosphere-portal::before { opacity: 0.07; }
body.dp-atmosphere.dp-atmosphere-portal::after {
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0, transparent 11px,
      rgba(182, 146, 212, 0.10) 11px, rgba(182, 146, 212, 0.10) 11.5px),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='0.8' fill='%23b692d4' opacity='0.55'/%3E%3C/svg%3E");
  background-size: auto, 8.4px 8.4px;
  opacity: 0.05;
}

/* Mobile fallback — iOS Safari brokens `background-attachment: fixed`,
   pa idemo scroll + dodatno smanjena opacity (Rasmus 2.3 mobile note). */
@media (max-width: 880px) {
  body.dp-atmosphere::before {
    background-attachment: scroll;
    opacity: 0.05;
  }
  body.dp-atmosphere::after { opacity: 0.04; }
  body.dp-atmosphere.dp-atmosphere-portal::after { opacity: 0.03; }
}

@media (prefers-reduced-motion: reduce) {
  body.dp-atmosphere::after { animation: none; }
}

/* ── Asymmetric stat row — first numeric oversized vs second ── */
.zd-stat-asym { display: flex; gap: clamp(24px, 4vw, 56px); align-items: flex-end; flex-wrap: wrap; }
.zd-stat-asym .zd-figure {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink-vendor, #1c1b19);
}
.zd-stat-asym .zd-figure.is-primary { font-size: clamp(4.8rem, 11vw, 9.2rem); }
.zd-stat-asym .zd-figure.is-secondary { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.zd-stat-asym .zd-figure-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-vendor-soft, #6d6862);
  max-width: 11ch; line-height: 1.4;
  padding-bottom: 14px;
}
.zd-stat-asym .zd-figure-divider {
  width: 1px; background: var(--accent-vendor-line, rgba(74,96,81,0.22));
  height: clamp(56px, 8vw, 96px);
  margin-bottom: 10px;
  align-self: flex-end;
}

/* ── CTA arrow that extends on hover ── */
.zd-arrow-cta { display: inline-flex; align-items: center; gap: 14px; }
.zd-arrow-cta .zd-arrow-line {
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.zd-arrow-cta .zd-arrow-line::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.zd-arrow-cta:hover .zd-arrow-line { width: 44px; }

/* ────────────────────────────────────────────────────────────────────
   Vendor catalog primitives — asymmetric grid + filter chips
   Per Rasmus audit Section VI. Reusable across category + search.
   ──────────────────────────────────────────────────────────────────── */
.portal-theme-vendor .vc-asymmetric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: clamp(20px, 2.4vw, 32px);
}
.portal-theme-vendor .vc-asymmetric-grid .v-card.tier-top {
  grid-column: span 2; grid-row: span 2;
}
.portal-theme-vendor .vc-asymmetric-grid .v-card.tier-premium {
  grid-column: span 2; grid-row: span 1;
}
.portal-theme-vendor .vc-asymmetric-grid .v-card.tier-free {
  grid-column: span 1; grid-row: span 1;
}
@media (max-width: 980px) {
  .portal-theme-vendor .vc-asymmetric-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-theme-vendor .vc-asymmetric-grid .v-card.tier-top,
  .portal-theme-vendor .vc-asymmetric-grid .v-card.tier-premium { grid-column: span 2; grid-row: span 1; }
  .portal-theme-vendor .vc-asymmetric-grid .v-card.tier-free { grid-column: span 1; }
}
@media (max-width: 540px) {
  .portal-theme-vendor .vc-asymmetric-grid { grid-template-columns: 1fr; }
  .portal-theme-vendor .vc-asymmetric-grid .v-card { grid-column: span 1 !important; grid-row: span 1 !important; }
}

.portal-theme-vendor .vc-filter-row {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px clamp(20px, 5vw, 64px);
  background: rgba(247, 245, 242, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--accent-vendor-line);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.portal-theme-vendor .vc-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--accent-vendor-line);
  border-radius: 999px;
  font-family: var(--font-body); font-size: .85rem;
  color: var(--ink-vendor); cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.portal-theme-vendor .vc-filter-chip:hover { background: var(--accent-vendor-tint); }
.portal-theme-vendor .vc-filter-chip[data-active="1"] {
  border-color: var(--accent-vendor);
  background: var(--accent-vendor-tint);
  color: var(--accent-vendor);
  font-weight: 500;
}
.portal-theme-vendor .vc-filter-chip[data-active="1"] .chip-x {
  display: inline-block; margin-left: 4px; opacity: .6;
}
.portal-theme-vendor .vc-filter-chip .chip-x { display: none; }

/* Vendor trust-signal badge (replaces tier-badge on cards) */
.portal-theme-vendor .v-trust {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 252, 248, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 2px;
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-vendor);
}
.portal-theme-vendor .v-trust .star { color: var(--accent-vendor); }

/* Top-tier card composition (asymmetric span 2x2) — bigger photo, pull-quote */
.portal-theme-vendor .v-card.tier-top .v-photo { aspect-ratio: 1/1; }
.portal-theme-vendor .v-card.tier-top .v-body { padding: 28px 28px 32px; }
.portal-theme-vendor .v-card.tier-top .v-name { font-size: 1.7rem; }
.portal-theme-vendor .v-card.tier-top .v-quote {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-style: italic;
  font-size: .98rem; line-height: 1.5;
  color: var(--ink-vendor-soft);
}

/* Free-tier list-row (compact) */
.portal-theme-vendor .v-card.tier-free .v-photo { aspect-ratio: 4/5; }
.portal-theme-vendor .v-card.tier-free .v-body { padding: 16px 18px 20px; }
.portal-theme-vendor .v-card.tier-free .v-name { font-size: 1.18rem; }
.portal-theme-vendor .v-card.tier-free .v-tag { display: none; }

html, body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow-x: hidden; min-height: 100vh; min-height: 100dvh; }
/* ::selection definiran u POLISH bloku (Phase F.1.5) — gold tonality umjesto lilac. */
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; }
.script { font-family: var(--font-script); font-style: italic; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.uppercase-tag {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ─── ORNAMENT UTILITY CLASSES (Phase C, 2026-05-05) ─────────────────
   Default color: var(--gold-deep). Override-aj bojom kroz parent .dp-ornament-on-dark
   ako ide na tamnu pozadinu (currentColor mijenja unutar SVG-a).
   ──────────────────────────────────────────────────────────────── */
.dp-divider-thin,
.dp-divider-rich {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--gold-deep);
  margin: 0 auto;
  pointer-events: none;
}
.dp-divider-thin {
  height: 24px;
  max-width: 240px;
  background-image: var(--ornament-divider-thin);
  background-size: contain;
}
.dp-divider-rich {
  height: 40px;
  max-width: 320px;
  background-image: var(--ornament-divider-rich);
  background-size: contain;
}
.dp-medallion {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: var(--ornament-medallion);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--gold-deep);
  pointer-events: none;
}
.dp-medallion-lg {
  width: 96px;
  height: 96px;
}
.dp-medallion-sm {
  width: 40px;
  height: 40px;
}
.dp-fleuron {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: var(--ornament-fleuron);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--gold-deep);
  pointer-events: none;
  vertical-align: middle;
}
/* Inverzija za dark sections (face discovery, dark hero) — currentColor je svjetla */
.dp-ornament-on-dark {
  color: var(--gold-bright);
}

/* ─── BREATH LAYER (Phase F.1.5, 2026-05-05) ─────────────────────────
   "Wind through crinoline" — fiksni overlay na cijeloj stranici koji
   subtilno pulzira i lagano se pomjera (lateralni drift, ne vertikalni).
   Cilj: dah u prostoru, ne dekoracija. Ide iznad pozadinskih slika
   (z-index 1, slike su -2/-1) ali ispod content-a (content je auto = 2+).

   Opt-in: dodaje se kao <div class="dp-breath" aria-hidden="true">
   na stranice gdje je atmosfera primarna (landing + 3 sobe). Admin
   portal i forme ga ne nasljeduju — nije svuda potreban.

   Honors prefers-reduced-motion: animacija staje, opacity ostaje na 0.2.
   ──────────────────────────────────────────────────────────────────── */
.dp-breath {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .25;
  background:
    radial-gradient(ellipse 70% 50% at 28% 18%, rgba(232, 204, 136, .12), transparent 62%),
    radial-gradient(ellipse 60% 70% at 72% 82%, rgba(182, 146, 212, .09), transparent 65%);
  animation: dpBreath 14s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes dpBreath {
  0%   { opacity: .15; transform: translate3d(0, 0, 0); }
  100% { opacity: .38; transform: translate3d(.8%, -.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-breath { animation: none; opacity: .2; transform: none; }
}

/* ─── AQUARELLE BACKGROUND (Rasmus AQUARELLE audit, 2026-05-29) ───────
   Ručno slikani akvarel kao "dah" aplikacije — NE tapeta, NE vrtnja.
   "Akvarel je dobar točno tamo gdje Ana ne radi, i smetnja točno tamo
   gdje radi." — RASMUS_AQUARELLE_AUDIT.md, ODLUKA 1.

   Opt-in po template-u, SAMO na emotivnim površinama (couple landing /
   prazna stanja / auth, guest invite). NIKAD iza radnih ekrana (popis
   gostiju, seating, forme), nikad vendor/org/admin.

   Mehanizam (ODLUKA 1): glaze (ne puna), jedan sloj, opacity 0.10–0.16
   (token), vrlo spori dah (scale 1.00→1.03, ~52s — "dah, ne pulsiranje"),
   paper-veo radial da akvarel ne curi do rubova, reduced-motion gasi dah.

   Upotreba:
     <div class="dp-aquarelle" aria-hidden="true"></div>   tik unutar wrappera
   Slika i jačina biraju se tokenima na wrapperu/body-ju:
     couple →  --aquarelle-img: url("/static/img/aquarelle/aquarelle-1-glaze.webp")
     guest  →  --aquarelle-img: url("/static/img/aquarelle/aquarelle-6-glaze.webp")
     --aquarelle-opacity (default 0.12; landing ~0.12, prazna stanja ~0.16, auth ~0.12)

   Asseti: mobile-first WebP, 900w q64 (~150-200 KB, 95% lakše od glaze PNG-a).
   Generira scripts/optimize_aquarelle.py iz glaze PNG-ova; PNG ostaju kao source.
   ──────────────────────────────────────────────────────────────────── */
:root {
  --aquarelle-opacity: 0.12;
  /* Unifikacija (Rasmus 2026-06-08): couple default = guest = aquarelle-6 → jedan
     akvarel kroz oba portala + landing/auth/prazna-stanja = jedan brend. Couple ne
     postavlja --aquarelle-img → konzumira ovaj default (shell_couple ostaje netaknut). */
  --aquarelle-img: url("/static/img/aquarelle/aquarelle-6-glaze.webp");
}
.dp-aquarelle {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* background layer, ispod content-a (registar: -2/-1) */
  pointer-events: none;
  overflow: hidden;
}
.dp-aquarelle::before {        /* akvarel sloj koji diše */
  content: "";
  position: absolute;
  inset: -6%;                  /* preljev da scale ne otkrije rub papira */
  background-image: var(--aquarelle-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--aquarelle-opacity);
  transform-origin: 55% 45%;
  animation: dpAquarelleBreath 52s ease-in-out infinite alternate;
  will-change: transform;
}
.dp-aquarelle::after {         /* paper-veo: akvarel naslućen preko CIJELE plohe */
  content: "";
  position: absolute;
  inset: 0;
  /* Rasmus 2026-06-08: prag 38%→52% + centar niže (12%) — akvarel čist preko >½
     ekrana, prisutan "u svim segmentima" (lakoća = veća površina, ne veća opacity).
     Kartice ostaju neprozirne i čitljive (zaseban sloj iznad). */
  background: radial-gradient(135% 135% at 50% 12%, transparent 52%, var(--paper) 100%);
}
@keyframes dpAquarelleBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-aquarelle::before { animation: none; transform: none; }
}

/* ─── AQUARELLE SKELETON (Rasmus AQUARELLE audit, ODLUKA 4, 2026-05-29) ─
   Loading skeleton koji se RASTOPI u sadržaj (cross-fade 400ms), ne
   "cvjeta". Tri apstraktna arhetipa, NIKAD per-page:
     list   — vertikalni ritam redaka (popis, playlist, chat)
     grid   — mreža kartica (galerija, vendori, paketi)
     canvas — jedna velika ploha (seating, dashboard hero)

   Trenutno: NEUTRALNI SIVI placeholder (shimmer). Kad stignu 3 ručno
   slikana arhetipa od umjetnice (brief: docs/ARTIST_BRIEF_AQUARELLE_SKELETON.md),
   zamijeni se samo --skeleton-* background — markup i tranzicija ostaju.

   Upotreba:
     <div class="dp-skel dp-skel--list" data-skel aria-hidden="true">… linije …</div>
   Kad podaci stignu, JS doda .is-loaded na skeleton (fade out) i .is-ready
   na pravi sadržaj (fade in). "Rastapanje, ne cvjetanje."
   ──────────────────────────────────────────────────────────────────── */
:root {
  --skel-base:    #efeae6;            /* sivi placeholder dok arhetipi ne stignu */
  --skel-sheen:   #f7f4f1;
  --skel-img-list:   none;            /* ← zamijeni url(...) kad arhetip stigne */
  --skel-img-grid:   none;
  --skel-img-canvas: none;
}
.dp-skel {
  position: relative;
  opacity: 1;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.dp-skel.is-loaded { opacity: 0; }    /* rastapanje van */
.dp-skel__bar {                       /* sivi shimmer blok (list/grid ćelija) */
  border-radius: 12px;
  background: linear-gradient(100deg, var(--skel-base) 30%, var(--skel-sheen) 50%, var(--skel-base) 70%);
  background-size: 220% 100%;
  animation: dpSkelShimmer 1.4s ease-in-out infinite;
}
/* arhetip: list — vodoravne trake, vertikalni ritam */
.dp-skel--list .dp-skel__bar { height: 18px; margin: 0 0 16px; }
.dp-skel--list .dp-skel__bar:nth-child(3n) { width: 72%; }
/* arhetip: grid — mreža kartica 3-stupčana */
.dp-skel--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dp-skel--grid .dp-skel__bar { aspect-ratio: 4 / 5; height: auto; }
/* arhetip: canvas — jedna velika ploha */
.dp-skel--canvas .dp-skel__bar { height: clamp(220px, 42vh, 420px); border-radius: 20px; }
/* kad arhetip stigne: glaze obris preko shimmera, 50% prozirno */
.dp-skel[style*="--skel-art"] .dp-skel__bar,
.dp-skel.has-art .dp-skel__bar {
  background-image: var(--skel-art, none);
  background-size: cover; background-position: center;
  opacity: .5; animation: none;
}
@keyframes dpSkelShimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-skel__bar { animation: none; }
  .dp-skel { transition: none; }
}

/* ─── PAGE TRANSITIONS (Phase F.1.5, 2026-05-05) ────────────────────
   Soft fade enter/exit za stranice koje uklucuju static/js/dp-transitions.js.
   "Otvaranje vrata u novu sobu" osjecaj umjesto instant page swap.
   Body classes:
     .is-entering — page just loaded, opacity 0 (JS removes immediately
                    after one frame, browser interpolates do .is-entered)
     .is-entered  — opacity 1, transition .42s
     .is-leaving  — opacity 0, transition .28s (kraci jer korisnik vec klikao)

   Honors prefers-reduced-motion (CSS skip-a sve transitions, JS skip-a delay).
   ──────────────────────────────────────────────────────────────────── */
body.is-leaving {
  opacity: 0;
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1);
}
body.is-entering {
  opacity: 0;
}
body.is-entered {
  opacity: 1;
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.is-leaving,
  body.is-entering,
  body.is-entered {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ─── PUBLIC NAV (cross-page shared, 2026-05-05 batch 2) ─────────────
   Move-out iz landing.html da sub-pageovi (pozivnice/trenuci/dvorane)
   mogu reusati istu nav strukturu unutar svojih topbar-a (pz-/tn-/dv-).
   `.is-active` modifier — current room dobiva permanent gold-deep
   underline + bold weight. */
.lx-nav { display: flex; align-items: center; gap: 4px; }
.lx-nav-link {
  padding: 10px 14px; font-size: .72rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: color .25s var(--ease);
  position: relative;
  text-decoration: none;
}
.lx-nav-link:hover { color: var(--gold-deep); }
.lx-nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.lx-nav-link:hover::after { transform: scaleX(1); }
.lx-nav-link.is-active {
  color: var(--gold-deep);
  font-weight: 600;
}
.lx-nav-link.is-active::after {
  transform: scaleX(1);
}
.lx-nav-divider { width: 1px; height: 20px; background: var(--line-strong); margin: 0 12px; }

@media (max-width: 880px) {
  .lx-nav-link { padding: 8px 10px; font-size: .66rem; letter-spacing: .14em; }
  .lx-nav-link.hide-mobile { display: none; }
  .lx-nav-divider { display: none; }
}

/* ─── POLISH (Phase F.1.5, 2026-05-05) ──────────────────────────────
   Sitne stvari koje "ne vidiš u screenshotu, ali stvore drukciji osjecaj"
   (Rasmus). Scope-ane na public namespace-e (.lx-, .pz-, .tn-, .dv-) da
   se ne propagiraju u admin/couple form-e gdje native browser focus-ring
   ima svoj smisao.
   ──────────────────────────────────────────────────────────────────── */

/* Focus-visible — gold glow umjesto default browser blue na public CTA-i */
.dp-btn:focus-visible,
.lx-nav-link:focus-visible,
.pz-back:focus-visible,
.tn-back:focus-visible,
.dv-back:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Form inputs (dvorane #vlasnici form) — gold ring + subtle glow */
.dv-field input:focus-visible,
.dv-field textarea:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(232, 204, 136, 0.16);
}
.dv-vlasnici-submit:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* Cursor — public clickable cards koje nisu nužno <a>. Branding gestura,
   ne semantička obveza. */
.lx-rail-card,
.lx-vignette,
.pz-card,
.dv-partner {
  cursor: default;
}
.lx-rail-card a,
.lx-vignette a,
.pz-card,
.dv-partner a {
  cursor: pointer;
}

/* Selection color — brand-tonality umjesto default plave */
::selection {
  background: rgba(201, 165, 92, 0.28);
  color: var(--ink);
}

/* ─── PAGE LOADER ──────────────────────────────────────────── */
.dp-loader {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, var(--paper) 0%, var(--lilac-50) 50%, var(--sky-50) 100%);
  display: grid; place-items: center;
  transition: opacity .9s .8s var(--ease), visibility .9s .8s var(--ease);
}
.dp-loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.dp-loader-stack { display: grid; gap: 22px; text-align: center; max-width: 520px; padding: 0 24px; }
.dp-loader-mark { font-family: var(--font-display); font-size: .8rem; letter-spacing: .55em; text-transform: uppercase; color: var(--lilac-700); opacity: 0; animation: dpFadeIn .6s .15s var(--ease) forwards; }
.dp-loader-line { height: 1px; background: linear-gradient(90deg, transparent, var(--lilac-400), var(--gold), var(--sky-400), transparent); transform: scaleX(0); transform-origin: left; animation: dpLineDraw 1s .4s var(--ease) forwards, dpLineFade .5s 1.6s var(--ease) forwards; }
.dp-loader-name { font-family: var(--font-script); font-style: italic; font-size: clamp(2.6rem, 7vw, 4.4rem); color: var(--ink); opacity: 0; line-height: 1; animation: dpFadeUp .9s .8s var(--ease) forwards; }
.dp-loader-sub { font-size: .78rem; letter-spacing: .18em; color: var(--ink-mute); opacity: 0; animation: dpFadeIn .6s 1.2s var(--ease) forwards; }
@keyframes dpFadeIn { to { opacity: 1; } }
@keyframes dpFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dpLineDraw { to { transform: scaleX(1); } }
@keyframes dpLineFade { from { opacity: 1; } to { opacity: .15; } }

/* ─── TOP BAR ──────────────────────────────────────────────── */
.dp-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 52px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  background: rgba(253, 250, 239, 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
}
.dp-topbar.scrolled {
  background: rgba(253, 250, 239, 0.92);
  border-bottom-color: var(--line);
}
.dp-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .04em; color: var(--ink); }
.dp-brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lilac-400), var(--sky-400));
  box-shadow: 0 0 14px rgba(182, 146, 212, .55);
}
.dp-nav { display: flex; align-items: center; gap: 4px; }
.dp-nav-link {
  position: relative; display: inline-flex; align-items: center;
  padding: 10px 14px; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.dp-nav-link:hover { color: var(--ink); }
.dp-nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.dp-nav-link:hover::after { transform: scaleX(1); }
.dp-nav-link.active { color: var(--lilac-700); }
.dp-nav-link.active::after { transform: scaleX(1); background: var(--lilac-400); }

.dp-meta { display: flex; align-items: center; gap: 12px; }
.dp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer; background: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  color: var(--ink-soft);
}
.dp-pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dp-pill.lilac:hover { background: var(--lilac-400); border-color: var(--lilac-400); color: white; }

.dp-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--lilac-400), var(--sky-400), var(--butter-400));
  transition: width .12s linear;
  box-shadow: 0 0 12px rgba(182,146,212,.6);
}

@media (max-width: 880px) {
  .dp-topbar { padding: 12px 18px; }
  .dp-meta .dp-pill:not(:last-child) { display: none; }
  .dp-nav-link { padding: 8px 10px; font-size: .68rem; letter-spacing: .1em; }
  .dp-brand span:not(.dp-brand-dot) { display: none; }
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.dp-btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--paper);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  overflow: hidden; will-change: transform;
}
.dp-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold-deep), #6e5520);
  transform: translateY(101%); transition: transform .45s var(--ease-emo);
  z-index: 0;
}
.dp-btn:hover::before { transform: translateY(0); }
.dp-btn:hover { color: var(--paper); box-shadow: 0 16px 44px -14px rgba(142, 110, 46, .45); }
.dp-btn > * { position: relative; z-index: 1; }
.dp-btn .arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  font-size: .72rem;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.dp-btn:hover .arrow { background: var(--gold-bright); color: var(--ink); transform: translateX(3px); }

.dp-btn-light {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.dp-btn-light::before { background: var(--ink); }
.dp-btn-light:hover { color: var(--paper); border-color: var(--ink); box-shadow: none; }
.dp-btn-light .arrow { background: var(--ink); color: var(--paper); }
.dp-btn-light:hover .arrow { background: var(--gold-bright); color: var(--ink); }

.dp-btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.dp-btn-ghost::before { background: var(--ink); }
.dp-btn-ghost:hover { color: var(--paper); }
.dp-btn-ghost .arrow { background: var(--ink); color: var(--paper); }
.dp-btn-ghost:hover .arrow { background: var(--paper); color: var(--ink); }

.dp-btn-lilac {
  background: var(--lilac-400); color: white; border-color: var(--lilac-400);
}
.dp-btn-lilac::before { background: var(--lilac-700); }
.dp-btn-lilac:hover { color: white; border-color: var(--lilac-700); }
.dp-btn-lilac .arrow { background: white; color: var(--lilac-700); }

.dp-btn-sky {
  background: var(--sky-400); color: white; border-color: var(--sky-400);
}
.dp-btn-sky::before { background: var(--sky-700); }
.dp-btn-sky:hover { color: white; border-color: var(--sky-700); }
.dp-btn-sky .arrow { background: white; color: var(--sky-700); }

.dp-btn-butter {
  background: var(--butter-400); color: var(--butter-700); border-color: var(--butter-400);
}
.dp-btn-butter::before { background: var(--butter-700); }
.dp-btn-butter:hover { color: var(--butter-100); border-color: var(--butter-700); }
.dp-btn-butter .arrow { background: var(--butter-700); color: var(--butter-100); }
.dp-btn-butter:hover .arrow { background: white; color: var(--butter-700); }

.dp-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); position: relative; padding: 4px 0;
}
.dp-link::after {
  content: ""; width: 36px; height: 1px; background: currentColor;
  transition: width .35s var(--ease);
}
.dp-link:hover::after { width: 64px; }

/* ─── COMMON SECTION SHELL ────────────────────────────────── */
.dp-section {
  padding: clamp(80px, 9vw, 130px) clamp(20px, 5vw, 64px);
  position: relative;
}
.dp-wrap { max-width: 1320px; margin: 0 auto; }
.dp-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 64px; flex-wrap: wrap;
}
.dp-section-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
  line-height: .96; letter-spacing: -0.012em; max-width: 780px;
}
.dp-section-head h2 em { font-style: italic; color: var(--lilac-700); font-weight: 500; }
.dp-section-head h2 .gold { color: var(--gold-deep); font-style: italic; }
.dp-section-head h2 .sky { color: var(--sky-700); font-style: italic; }
.dp-section-head h2 .butter { color: var(--butter-700); font-style: italic; }
.dp-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--lilac-700); font-size: .68rem; letter-spacing: .36em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 18px;
}
.dp-eyebrow::before {
  content: ""; width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--lilac-400), var(--sky-400));
}
.dp-eyebrow.sky { color: var(--sky-700); }
.dp-eyebrow.sky::before { background: linear-gradient(90deg, var(--sky-400), var(--sky-700)); }
.dp-eyebrow.butter { color: var(--butter-700); }
.dp-eyebrow.butter::before { background: linear-gradient(90deg, var(--butter-400), var(--gold-deep)); }
.dp-eyebrow.gold { color: var(--gold-deep); }
.dp-eyebrow.gold::before { background: var(--gold); }
.dp-eyebrow.rose { color: var(--rose-700); }
.dp-eyebrow.rose::before { background: linear-gradient(90deg, var(--rose-300), var(--rose-500)); }
.dp-section-head .lead {
  max-width: 380px; color: var(--ink-soft); font-size: .98rem;
  line-height: 1.65; font-weight: 300;
}

/* ─── REVEAL ────────────────────────────────────────────── */
.dp-reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.dp-reveal.in { opacity: 1; transform: none; }
.dp-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.dp-stagger.in > * { opacity: 1; transform: none; }
.dp-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.dp-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.dp-stagger.in > *:nth-child(3) { transition-delay: .20s; }
.dp-stagger.in > *:nth-child(4) { transition-delay: .28s; }
.dp-stagger.in > *:nth-child(5) { transition-delay: .36s; }
.dp-stagger.in > *:nth-child(6) { transition-delay: .44s; }
.dp-stagger.in > *:nth-child(7) { transition-delay: .52s; }
.dp-stagger.in > *:nth-child(8) { transition-delay: .60s; }

/* ─── EMPTY STATE ───────────────────────────────────────── */
.dp-empty {
  padding: 64px 32px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 220, 243, 0.25), rgba(214, 231, 245, 0.25));
}
.dp-empty .ornament {
  font-family: var(--font-display); font-size: 2.4rem;
  color: var(--lilac-400); margin-bottom: 14px; font-style: italic; font-weight: 300;
}
.dp-empty strong {
  display: block; font-family: var(--font-display);
  font-weight: 500; font-size: 1.5rem; margin-bottom: 8px; color: var(--ink);
}
.dp-empty p {
  color: var(--ink-soft); max-width: 480px; margin: 0 auto;
  line-height: 1.65; font-size: .96rem; font-weight: 300;
}
.dp-empty .dp-btn { margin-top: 20px; }

/* ─── BADGES ────────────────────────────────────────────── */
.dp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.dp-badge.yes { background: var(--sage-200); color: var(--sage-700); }
.dp-badge.no { background: var(--rose-200); color: var(--rose-700); }
.dp-badge.pending { background: var(--butter-200); color: var(--butter-700); }
.dp-badge.lilac { background: var(--lilac-200); color: var(--lilac-700); }
.dp-badge.sky { background: var(--sky-200); color: var(--sky-700); }
.dp-badge.gold { background: rgba(232, 204, 136, .35); color: var(--gold-deep); }
.dp-badge::before {
  content: "●"; font-size: .6em;
}

/* ─── LIGHTBOX (shared) ─────────────────────────────────── */
.dp-plb { position: fixed; inset: 0; z-index: 600; background: rgba(45,34,56,.94); display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.dp-plb.open { display: flex; animation: dpFadeIn .3s ease forwards; }
.dp-plb img { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dp-plb button {
  position: absolute; color: rgba(253, 250, 239, .82); background: rgba(45,34,56,.45);
  border: 1px solid rgba(253, 250, 239, .22); border-radius: 50%;
  cursor: pointer; width: 48px; height: 48px;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: all .25s var(--ease);
}
.dp-plb button:hover { background: var(--lilac-400); color: white; border-color: var(--lilac-400); }
.dp-plb-close { top: 24px; right: 28px; }
.dp-plb-nav { top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.dp-plb-prev { left: 28px; } .dp-plb-next { right: 28px; }
.dp-plb-cap { position: absolute; bottom: 24px; color: rgba(253, 250, 239, .55); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; letter-spacing: .08em; }

/* ─── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .dp-reveal, .dp-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ─── FACE FRAME (used in memories page only, sparingly) ─── */
.dp-face-frame { position: relative; display: block; overflow: hidden; }
.dp-face-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.dp-face-mark { opacity: 0; transition: opacity .4s var(--ease); }
.dp-face-mark.show { opacity: 1; }
.dp-face-corner {
  stroke: var(--gold-bright); stroke-width: 1.5; fill: none;
  stroke-linecap: square; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(232,204,136,.45));
  transform-box: fill-box; transform-origin: center;
}
.dp-face-mark .dp-face-corner { transform: scale(0); transition: transform .55s var(--ease-emo); }
.dp-face-mark.show .dp-face-corner { transform: scale(1); }
.dp-face-scan { stroke: var(--gold-bright); stroke-width: .6; vector-effect: non-scaling-stroke; opacity: .85; filter: drop-shadow(0 0 4px rgba(232,204,136,.7)); }
.dp-face-rect {
  stroke: var(--gold-bright); stroke-width: .6;
  fill: rgba(232, 204, 136, .04);
  vector-effect: non-scaling-stroke; opacity: 0;
  transition: opacity .3s ease .25s;
}
.dp-face-mark.show .dp-face-rect { opacity: 1; }
.dp-face-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dp-face-label {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(45, 34, 56, .82); color: var(--gold-bright);
  padding: 5px 9px; border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .04em;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 204, 136, .35);
  transform: translateY(-50%) translateX(8px) scale(.85);
  opacity: 0;
  transition: opacity .35s var(--ease) .25s, transform .35s var(--ease) .25s;
  white-space: nowrap;
}
.dp-face-label.show { opacity: 1; transform: translateY(-50%) translateX(8px) scale(1); }
.dp-face-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px rgba(232,204,136,.7); animation: dpBlink 1.6s ease-in-out infinite; }
.dp-face-label .conf { color: rgba(232,204,136,.65); }
@keyframes dpBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ─── PASTEL SECTIONS (utility) ─────────────────────────── */
.dp-bg-lilac   { background: linear-gradient(135deg, var(--lilac-50), var(--lilac-100)); }
.dp-bg-sky     { background: linear-gradient(135deg, var(--sky-50), var(--sky-100)); }
.dp-bg-butter  { background: linear-gradient(135deg, var(--butter-50), var(--butter-100)); }
.dp-bg-cream   { background: var(--paper); }
.dp-bg-rose    { background: linear-gradient(135deg, var(--rose-100), var(--rose-200)); }
.dp-bg-paper   { background: var(--paper-2); }
.dp-bg-gradient {
  background: linear-gradient(135deg, var(--lilac-50) 0%, var(--paper) 35%, var(--sky-50) 70%, var(--butter-50) 100%);
}

/* ─── COUNTERS ──────────────────────────────────────────── */
.dp-counter-num {
  font-family: var(--font-display);
  font-weight: 300; line-height: .9;
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
}

/* ─── SHARED FORM STYLE ─────────────────────────────────── */
.dp-form-field { margin-bottom: 18px; }
.dp-form-field label {
  display: block; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 8px;
}
.dp-form-field input[type="text"],
.dp-form-field input[type="email"],
.dp-form-field input[type="password"],
.dp-form-field input[type="tel"],
.dp-form-field textarea,
.dp-form-field select {
  width: 100%; padding: 14px 16px;
  background: white; border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: .96rem; color: var(--ink); outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dp-form-field input:focus,
.dp-form-field textarea:focus,
.dp-form-field select:focus {
  border-color: var(--lilac-400);
  box-shadow: 0 0 0 4px rgba(182, 146, 212, .14);
}

.dp-toggle {
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
  width: 48px; height: 28px; border-radius: 999px; background: var(--paper-2);
  border: 1px solid var(--line-strong);
  transition: background .25s var(--ease), border-color .25s var(--ease);
  flex: 0 0 auto;
}
.dp-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%; background: white;
  box-shadow: 0 2px 6px rgba(45,34,56,0.18);
  transition: transform .3s var(--ease);
}
.dp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.dp-toggle.on { background: var(--lilac-400); border-color: var(--lilac-400); }
.dp-toggle.on::after { transform: translateX(20px); }

/* ─── ALERTS ────────────────────────────────────────────── */
.dp-alert { padding: 14px 18px; border-radius: 8px; font-size: .9rem; margin-bottom: 18px; }
.dp-alert-error { background: var(--rose-100); border: 1px solid var(--rose-300); color: var(--rose-700); }
.dp-alert-success { background: var(--sage-100); border: 1px solid var(--sage-300); color: var(--sage-700); }
.dp-alert-info { background: var(--sky-100); border: 1px solid var(--sky-300); color: var(--sky-700); }

/* ─── PORTAL FOOTER ─────────────────────────────────────── */
.dp-footer {
  padding: 60px clamp(20px, 5vw, 64px) 48px;
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
}
.dp-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: linear-gradient(90deg, transparent, var(--lilac-400), var(--sky-400), var(--butter-400), transparent);
}
.dp-footer-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.dp-footer-brand { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; line-height: 1; }
.dp-footer-brand em { font-style: italic; color: var(--gold-bright); }
.dp-footer-blurb { color: rgba(253, 250, 239, .55); font-size: .9rem; line-height: 1.65; max-width: 380px; margin-top: 10px; font-weight: 300; }
.dp-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.dp-footer-col { display: grid; gap: 8px; }
.dp-footer-col strong { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(253, 250, 239, .5); margin-bottom: 6px; }
.dp-footer-col a { color: rgba(253, 250, 239, .82); font-size: .92rem; transition: color .25s var(--ease); }
.dp-footer-col a:hover { color: var(--gold-bright); }
.dp-footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(253, 250, 239, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(253, 250, 239, .45); font-size: .76rem; }

/* ─── FOCUS RING ────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--lilac-400); outline-offset: 3px; border-radius: 4px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }

/* ================================================================
   LUXE AUTH PATTERNS — login/register/forgot/reset/verify/error
   Used by all public-facing standalone pages.
   ================================================================ */

.lx-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  position: relative;
}

/* Split-visual variant (login + register) */
.lx-auth-split {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
}

.lx-auth-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lx-auth-visual-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 45%;
  transform: scale(1.04);
  transition: transform 8s var(--ease);
  z-index: -2;
}
.lx-auth-visual:hover .lx-auth-visual-image { transform: scale(1.08); }
.lx-auth-visual::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 90% at 25% 110%, rgba(45, 34, 56, 0.55), transparent 65%),
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(253, 250, 239, 0.42), transparent 35%),
    linear-gradient(180deg, rgba(253,250,239,0) 35%, rgba(45,34,56,0.45) 100%);
}
.lx-auth-visual-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(28px, 5vw, 56px);
  color: rgba(253, 250, 239, 0.96);
  text-shadow: 0 2px 18px rgba(45,34,56,.35);
}
.lx-auth-visual-copy .eyebrow {
  font-family: var(--font-script); font-style: italic;
  font-size: 1.5rem;
  color: var(--gold-bright);
  line-height: 1; margin-bottom: 14px;
  text-shadow: 0 1px 12px rgba(45,34,56,.4);
}
.lx-auth-visual-copy h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: rgba(253, 250, 239, 0.98);
  max-width: 480px;
}
.lx-auth-visual-copy h2 em {
  font-style: italic; color: rgba(253, 250, 239, 0.86); font-weight: 400;
}
.lx-auth-visual-copy h2 em.script {
  font-family: var(--font-script); font-style: italic;
  font-weight: 600; color: var(--gold-bright); padding: 0 .04em;
}
.lx-auth-visual-copy p {
  margin-top: 16px; max-width: 460px;
  color: rgba(253, 250, 239, 0.78);
  font-size: .98rem; line-height: 1.65; font-weight: 300;
}
.lx-auth-visual-tag {
  position: absolute; top: clamp(20px, 4vw, 36px); left: clamp(20px, 4vw, 36px);
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(253, 250, 239, 0.88);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(45,34,56,.4);
}
.lx-auth-visual-tag::before {
  content: ""; width: 24px; height: 1px; background: var(--gold-bright);
}

/* Card form side (right column or centered) */
.lx-auth-card-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 48px);
  background: var(--paper);
}
.lx-auth-card {
  width: min(440px, 100%);
}
.lx-auth-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  margin-bottom: 36px;
}
.lx-auth-brand-mark {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.45rem; letter-spacing: -0.01em;
}
.lx-auth-brand-mark em {
  font-family: var(--font-script); font-style: italic;
  font-weight: 600; color: var(--gold-deep); margin-left: 4px;
  font-size: 1.6rem;
}
.lx-auth-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-mute); font-size: .7rem; letter-spacing: .34em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 16px;
}
.lx-auth-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.lx-auth-card h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 14px;
}
.lx-auth-card h1 em {
  font-style: italic; color: inherit; font-weight: 400;
}
.lx-auth-card h1 em.gold { color: var(--gold-deep); }
.lx-auth-card h1 em.script {
  font-family: var(--font-script); font-style: italic;
  font-weight: 600; color: var(--gold-deep); padding: 0 .04em;
}
.lx-auth-card .lede {
  color: var(--ink-soft);
  font-size: 1.06rem; line-height: 1.7; font-weight: 300;
  margin: 0 0 32px;
  max-width: 420px;
}

/* Form controls */
.lx-auth-form { display: grid; gap: 18px; }
.lx-auth-field label {
  display: block; margin-bottom: 8px;
  font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft);
  font-weight: 600;
}
.lx-auth-field input[type="text"],
.lx-auth-field input[type="email"],
.lx-auth-field input[type="password"],
.lx-auth-field input[type="tel"],
.lx-auth-field input[type="date"],
.lx-auth-field textarea,
.lx-auth-field select {
  width: 100%;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lx-auth-field input:focus,
.lx-auth-field textarea:focus,
.lx-auth-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 165, 92, .16);
}

/* Centered single-card variant (forgot/reset/verify/oauth) */
.lx-auth-centered {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 32px);
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(232, 220, 243, 0.32), transparent 65%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(214, 231, 245, 0.28), transparent 65%),
    var(--paper);
}
.lx-auth-centered .lx-auth-card {
  text-align: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.lx-auth-centered .lx-auth-card .lx-auth-brand {
  justify-content: center; margin-bottom: 28px;
}
.lx-auth-centered .lx-auth-eyebrow {
  margin: 0 auto 14px; padding: 0 6px;
}
.lx-auth-centered .lx-auth-eyebrow::before { background: linear-gradient(90deg, transparent, var(--lilac-400)); }
.lx-auth-centered .lx-auth-eyebrow::after {
  content: ""; width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.lx-auth-centered .lx-auth-card .lede {
  margin-left: auto; margin-right: auto;
}

/* Icon bubble (verify/error pages) */
.lx-auth-orb {
  width: 68px; height: 68px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232, 204, 136, .25), rgba(201, 165, 92, .15));
  border: 1px solid rgba(201, 165, 92, .28);
  display: grid; place-items: center;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-style: italic; font-size: 1.8rem;
}
.lx-auth-orb.gold {
  background: linear-gradient(135deg, rgba(232, 204, 136, .25), rgba(201, 165, 92, .15));
  color: var(--gold-deep);
}
.lx-auth-orb.rose {
  background: linear-gradient(135deg, var(--rose-100), var(--rose-200));
  color: var(--rose-700);
}

/* Divider mark used between sections */
.lx-auth-divider {
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 24px auto;
}

/* Helper row (forgot/register links etc) */
.lx-auth-helper {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .86rem; color: var(--ink-mute);
}
.lx-auth-helper a {
  color: var(--ink-soft); text-decoration: none;
  transition: color .25s var(--ease);
}
.lx-auth-helper a.primary {
  color: var(--gold-deep); font-weight: 600;
  font-family: var(--font-script); font-style: italic; font-size: 1.15rem;
}
.lx-auth-helper a:hover { color: var(--ink); }
.lx-auth-helper a.primary:hover { color: var(--ink); }

/* Footer below card (legal links etc) */
.lx-auth-footer {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .76rem; color: var(--ink-mute);
  line-height: 1.6;
}
.lx-auth-footer a {
  color: var(--ink-soft); text-decoration: none;
}
.lx-auth-footer a:hover { color: var(--ink); }
.lx-auth-footer .sep { color: var(--ink-faint); margin: 0 10px; }

/* Errors and inline messages */
.lx-auth-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--rose-100);
  color: var(--rose-700);
  border: 1px solid var(--rose-300);
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* A2 passive hint — recovery path without revealing whether email exists.
   Same hint shown on wrong-password AND unknown-email (enumeration safe).
   Per RASMUS_LOGIN_PHASE1_AUDIT.md: ink-mute (not undeclared ink-56),
   underline only on hover (not constant), font-size matches helper row. */
.lx-auth-hint {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 0 4px;
  font-size: .86rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.lx-auth-hint a {
  color: var(--gold-deep);
  font-weight: 500;
}
.lx-auth-hint a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 920px) {
  .lx-auth-split { grid-template-columns: 1fr; }
  .lx-auth-visual { min-height: 140px; order: 1; }
  .lx-auth-card-wrap { order: 2; }
  .lx-auth-visual-copy h2 { font-size: 1.4rem; }
  /* tap targets — per RASMUS_AUDIT poziv___token___aktivacija 2026-05-29 */
  .lx-auth-brand { min-height: 44px; }
  .lx-auth-helper a { padding: 12px 0; }
  .lx-auth-footer a { padding: 10px 6px; display: inline-block; }
  .lx-auth-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
   Bundle D mobile-first foundation (2026-05-18) — iOS zoom guard.
   iOS Safari triggers auto-zoom kad input/textarea/select ima
   font-size < 16px. Globalni mobile-only override sprječava taj
   zoom bez utjecaja na desktop tipografski ritam. Per-template
   font-size declarations koje su pod 16px i dalje rade na desktopu;
   ova pravila ih override-aju samo ispod 768px viewport.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Bundle E (2026-05-18) — Couple portal bottom navigation.
   Mobile-only fixed nav s 5 destinacija (Dnevnik · Gosti ·
   Galerija · Pozivnice · Više). Hidden ≥769px (desktop ima
   sticky sidebar iz shell_couple.html). Safe-area-inset padding
   za iOS notch / home indicator.

   Tokeni: --paper (background), --line (border-top), --ink-mute
   (default item color), --lilac-400 (active state signature),
   --font-body (Manrope). Backdrop je solid var(--paper) — NE
   glassmorphism (Bruno-confirmed drop, prevent legibility loss
   nad busy dashboard backgrounds).

   Z-index 80: iznad couple-main content (z-index baseline 1-10)
   ali ispod modala (upgrade_modal koristi z-index 1000+) i Dalia
   chat panel (z-index ~9999).

   IKONICE: placeholder Lucide-style inline SVG u _bottom_nav.html.
   Glavna sesija + Rasmus polira final set u kasnijem audit-u.

   ANIMACIJE / TRANSITIONS: namjerno OUT iz scaffold-a. Rasmus
   odlučuje da li uopće (wedding portal = mirno, ne enterprise app)
   i koje pattern-e (color transition? subtle scale? nothing?).
   ───────────────────────────────────────────────────────────── */
.dw-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none; /* mobile-only — flex aktivira media query ispod */
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
}

.dw-bottom-nav__item {
  flex: 1 1 0;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  color: var(--ink-mute);
  text-decoration: none;
  position: relative; /* za active indicator dot */
}

.dw-bottom-nav__item--active {
  color: var(--lilac-400);
}

.dw-bottom-nav__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor; /* nasljeduje od --active state */
}

.dw-bottom-nav__label {
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  /* NIJE uppercase — wedding portal ton, ne enterprise app. */
}

/* ───────────────────────────────────────────────────────────────
   COUPLE PORTAL — 5-CORNER NAV (Sprint 10 K8, Bruno 2026-05-19)
   Zamjenjuje legacy `.dw-bottom-nav` 5-tab strip.

   Layout:
     • Top-left:     chat icon u shell_couple.html topbar (postoji)
     • Top-right:    view-switch icon u shell_couple.html topbar
     • Bottom-left:  cvijet bloom (templates/components/_bloom_menu.html)
     • Bottom-center: + FAB (.dw-corner-fab u ovom file-u)
     • Bottom-right: Dalia AI two-tap (.dalia-chat-btn override mobile)

   Center `+` FAB otvara quick-actions bottom sheet (K10 content).
   Singleton element u `_bottom_nav.html` (legacy 5-tab uklonjen).
   ─────────────────────────────────────────────────────────────── */
/* Rasmus chrome redizajn 2026-06-03: maknut crni disk + sjena. Samo deblji
   plus glif (var(--ink-mute)). 48px nevidljivi hit-area radi pristupačnosti.
   Faza 4: skriven dok se ne skrola (opacity 0 + pointer-events none); JS
   dodaje .dw-fab--visible na scroll i miče na idle. */
.dw-corner-fab {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border: none;
  /* Bruno: ne crni krug. Rasmus: ne aura-gimmick. → goli lilac glyph,
     bez kruga, bez pozadine — boja nosi sve, drop-shadow daje čitljivost. */
  background: none;
  color: var(--lilac-500, #8e62b8);
  display: none; /* mobile-only — flex aktivira media query ispod */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-corner-nav, 70);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 180ms var(--ease);
  padding: 0;
}
.dw-corner-fab.dw-fab--visible { opacity: 1; pointer-events: auto; }
.dw-corner-fab:active { transform: translateX(-50%) scale(0.9); }
.dw-corner-fab svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(142,98,184,0.25)); }
@media (prefers-reduced-motion: reduce) { .dw-corner-fab { transition: none; } }

/* Topbar corner buttons — Sprint 10 K8.
   shell_couple.html topbar dobiva 2 nove ikone:
     • .couple-topbar-chat (left) — /mladenci/poruke s badge
     • .couple-topbar-view (right) — view-switch trigger sheet
   Postojeći notif-bell se izmješta ulijevo od view-switch-a. */
.couple-topbar-corner-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink, #3f3138);
  cursor: pointer; padding: 0; border-radius: 50%;
  position: relative; flex-shrink: 0;
  transition: background 180ms var(--ease);
}
.couple-topbar-corner-btn:hover { background: rgba(63, 49, 56, 0.06); }
.couple-topbar-corner-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.couple-topbar-corner-btn__badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--rose-500, #b87a76); color: var(--paper, #fffaf6);
  border-radius: 8px; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; letter-spacing: 0;
  border: 2px solid var(--paper, #fffaf6);
  z-index: 2;
}

/* Mobile-only render — flex ispod 769px */
@media (max-width: 768px) {
  .dw-corner-fab { display: flex; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Desktop ≥769px — corners hidden, topbar corner buttons visible only on mobile */
@media (min-width: 769px) {
  .dw-corner-fab { display: none; }
  .couple-topbar-corner-btn { display: none; }
}

/* Dalia AI corner (bottom-right two-tap, Bruno 2026-05-18 odluka).
   Idle: 22px Lucide sparkles ambient. Tap 1: 44×44 gold ball (misclick
   guard). Tap 2: full-height sheet via dwBottomSheet API. Background-tap
   na overlay → close sheet i retract na idle. */
.dalia-corner-btn {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-mute, #8b7f6e);
  cursor: pointer;
  display: none;  /* mobile-only — flex ispod 769px */
  align-items: center; justify-content: center;
  padding: 0;
  z-index: var(--z-corner-nav, 70);
  transition: width 200ms var(--ease), height 200ms var(--ease),
              background 200ms var(--ease), color 200ms var(--ease),
              box-shadow 200ms var(--ease);
}
.dalia-corner-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: width 200ms var(--ease), height 200ms var(--ease); }
.dalia-corner-btn[data-state="armed"] {
  width: 44px; height: 44px;
  background: var(--gold, #c9a84c);
  color: var(--paper, #fffaf6);
  box-shadow: 0 6px 18px -4px rgba(201, 168, 76, 0.5);
  z-index: var(--z-dalia-tap1, 95);
}
.dalia-corner-btn[data-state="armed"] svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
  .dalia-corner-btn { display: inline-flex; }
  /* Hide legacy .dalia-chat-btn (64×64 gold ball) na mobile — corner btn ga zamjenjuje */
  .dalia-chat-btn { display: none !important; }
}
@media (min-width: 769px) {
  .dalia-corner-btn { display: none; }
  /* Desktop ostaje legacy 64×64 Dalia FAB — ne dirat */
}

/* ── Idle chrome controller (Rasmus 2026-06-03, Bruno override 2026-06-04) ──
   Bruno: kutovi su SKROZ skriveni dok se ne skrolla prema DOLJE; na idle
   ponovno nestanu. (Prije: dim na 40%, nikad skriveni.) .dw-corner--gone
   potpuno makne bloom + Dalia; FAB ima vlastiti hidden state gore. */
#dwBloomMenu { transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.dalia-corner-btn {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), width 200ms var(--ease),
              height 200ms var(--ease), background 200ms var(--ease),
              color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.dw-corner--dim  { opacity: 0.4; }
.dw-corner--gone { opacity: 0; pointer-events: none; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  #dwBloomMenu, .dalia-corner-btn { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   LEGACY .dw-bottom-nav (Bundle E 5-tab strip) — DEPRECATED Sprint 10 K8.
   _bottom_nav.html sada renderira samo `.dw-corner-fab`, legacy
   CSS ostaje za rollback safety dok Sprint 11 ne potvrdi nove
   pattern u prod. Display:none na svim widths.
   ─────────────────────────────────────────────────────────────── */
.dw-bottom-nav { display: none !important; }

/* ================================================================
   BOTTOM SHEET — Sprint 10 K2 (Bruno 2026-05-19)
   Reusable komponenta. Singleton DOM u shell_couple.html, otvaran
   preko window.dwBottomSheet.open({title, html}). Pattern iz
   RASMUS_SEATING_MOBILE_SPEC.md — Apple spring 280ms, drag handle,
   90dvh max-height (iOS Safari URL bar safe).

   Body scroll lock via JS — backdrop dim 0.45, blur 4px za depth.
   Z-index tokens iz registra (foundation PR #121).
   ================================================================ */

.dw-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet-backdrop, 1040);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.dw-bottom-sheet[hidden] { display: none; }

.dw-bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 12, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 280ms var(--ease), backdrop-filter 280ms var(--ease);
  pointer-events: auto;
}
.dw-bottom-sheet.is-open .dw-bottom-sheet__backdrop {
  background: rgba(20, 15, 12, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dw-bottom-sheet__body {
  position: relative;
  z-index: var(--z-sheet, 1050);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  max-height: 90dvh;
  background: var(--paper, #fffaf6);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px -12px rgba(45, 34, 56, 0.28);
  padding: 14px 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 280ms var(--ease);
  pointer-events: auto;
}
.dw-bottom-sheet.is-open .dw-bottom-sheet__body {
  transform: translateY(0);
}

.dw-bottom-sheet__handle {
  display: block;
  width: 32px;
  height: 4px;
  margin: 0 auto 14px;
  border: none;
  padding: 0;
  background: var(--ink-faint, #c8bfbe);
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Touch target — invisible expansion to 44pt minimum */
  position: relative;
}
.dw-bottom-sheet__handle::after {
  content: "";
  position: absolute;
  inset: -20px -50px;
}

.dw-bottom-sheet__title {
  font-family: var(--font-display, 'Cardo', serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink, #3f3138);
  margin: 0 0 16px;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
}
.dw-bottom-sheet__title:empty { display: none; margin-bottom: 0; }

.dw-bottom-sheet__content {
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  color: var(--ink, #3f3138);
  font-size: 15px;
  line-height: 1.5;
}

/* When body has the sheet open, lock scroll. Set by JS — koristi
   body.dw-sheet-open class jer iOS Safari ignorira overflow:hidden
   na <html>. */
body.dw-sheet-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  /* `top: -<scrollY>px` postavlja JS dinamički */
}

@media (prefers-reduced-motion: reduce) {
  .dw-bottom-sheet__backdrop,
  .dw-bottom-sheet__body { transition: none; }
}

/* Desktop ≥769px — sheet centriran, ne edge-to-edge */
@media (min-width: 769px) {
  .dw-bottom-sheet { padding: 0; align-items: center; }
  .dw-bottom-sheet__body {
    max-width: 480px;
    max-height: 80vh;
    max-height: 80dvh;
    border-radius: 16px;
    transform: translateY(20px);
  }
  .dw-bottom-sheet.is-open .dw-bottom-sheet__body { transform: translateY(0); }
}

/* ================================================================
   CVIJET BLOOM MENU — Sprint 10 K3 (Bruno 2026-05-19)
   Bottom-left corner couple portal 5-corner nav. Idle: 22px flower
   glyph. Tap 1: scale up to 32px + 4 sub-ikone procvjetaju u arc
   luku 90° gore-desno. Apple spring 280ms stagger 40ms per item.

   ARIA: aria-expanded na trigger, aria-hidden na items dok closed.
   Items ostaju u DOM-u, samo visibility/opacity/transform mijenja.
   ================================================================ */

.dw-bloom {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-bloom, 100);
  pointer-events: none;
  /* Tap targets restricted to button + items, ne na cijelu zonu. */
}

.dw-bloom__trigger {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--paper, #fffaf6);
  color: var(--ink, #3f3138);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px -6px rgba(45, 34, 56, 0.22);
  pointer-events: auto;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dw-bloom__trigger svg {
  width: 22px;
  height: 22px;
  transition: transform 280ms var(--ease), color 280ms var(--ease);
  color: var(--ink-soft, #8b7f6e);
}
.dw-bloom__trigger:hover { box-shadow: 0 6px 20px -6px rgba(45, 34, 56, 0.28); }
.dw-bloom__trigger:active { transform: scale(0.96); }

.dw-bloom[data-bloom-state="open"] .dw-bloom__trigger {
  transform: scale(1.18);
  box-shadow: 0 8px 22px -8px rgba(45, 34, 56, 0.32);
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__trigger svg {
  color: var(--lilac-400, #b692d4);
  transform: rotate(45deg);
}

/* Items: arc layout 90° from horizontal (item 1) to vertical (item 4).
   Each item is positioned absolute from trigger center. Closed state:
   translate(0) + opacity 0 + scale 0.4. Open: arc position + opacity 1
   + scale 1 with stagger. Arc radius 76px from trigger center. */
.dw-bloom__items {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.dw-bloom__item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 44px;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition: transform 280ms var(--ease), opacity 200ms var(--ease);
  pointer-events: none;
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__item {
  opacity: 1;
  pointer-events: auto;
}

/* Arc positions: 5 items spread 0° (right) → 90° (up) at 84px radius.
   Rasmus K2+K3 audit 2026-05-19: radius bumped 76→84px (palac
   breathing room na "umorna noć u krevetu" use case), stagger
   bumped 40→60ms (40ms sub-perceptivno, ubija procvat osjećaj —
   Apple Watch komplikacije picker je 60-80ms precedent).

   2026-05-23 Rasmus tick #7 decision (c): 4→5 items, "Više" 5. listica
   wire-a #moreMenu drawer za 8 nedostupnih destinacija. Arc spacing
   re-distribuiran 30°→22.5° korak. Stagger trimao 60→50ms da se
   ukupni procvat ne razvuče (4 × 60 = 240 vs 5 × 50 = 250, isti
   total osjećaj).
   item-1: 0°    = (84, 0)    — Gosti
   item-2: 22.5° ≈ (78, -32)  — Galerija
   item-3: 45°   ≈ (59, -59)  — Darovi
   item-4: 67.5° ≈ (32, -78)  — Vendori
   item-5: 90°   = (0, -84)   — Više (otvara #moreMenu drawer) */
.dw-bloom[data-bloom-state="open"] .dw-bloom__item--1 {
  transform: translate(84px, 0) scale(1);
  transition-delay: 0ms;
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__item--2 {
  transform: translate(78px, -32px) scale(1);
  transition-delay: 50ms;
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__item--3 {
  transform: translate(59px, -59px) scale(1);
  transition-delay: 100ms;
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__item--4 {
  transform: translate(32px, -78px) scale(1);
  transition-delay: 150ms;
}
.dw-bloom[data-bloom-state="open"] .dw-bloom__item--5 {
  transform: translate(0, -84px) scale(1);
  transition-delay: 200ms;
}

.dw-bloom__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--paper, #fffaf6);
  color: var(--ink-soft, #8b7f6e);
  box-shadow: 0 3px 12px -4px rgba(45, 34, 56, 0.2);
  text-decoration: none;
  transition: color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dw-bloom__link svg { width: 20px; height: 20px; }
/* Item-5 je <button> (otvara #moreMenu drawer), 1-4 su <a>. Reset
   user-agent button defaults (border + font + padding) da matchira <a>. */
button.dw-bloom__link {
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.dw-bloom__link:hover {
  color: var(--lilac-700, #6b4f8a);
  background: var(--lilac-50, #faf6ff);
}
.dw-bloom__link:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .dw-bloom__trigger,
  .dw-bloom__trigger svg,
  .dw-bloom__item,
  .dw-bloom__link { transition: none; }
}

/* Desktop ≥769px — hidden (cvijet bloom je mobile-only corner nav). */
@media (min-width: 769px) {
  .dw-bloom { display: none; }
}

/* ================================================================
   QUICK ACTIONS — content za dwBottomSheet (Sprint 10 K8/K10).
   Template-injected list kad korisnik tapne center + FAB.
   Three items: Dodaj gosta / Foto u grupnu galeriju / Brza bilješka.
   ================================================================ */
.dw-qa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dw-qa-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink, #3f3138);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.dw-qa-item:hover {
  background: rgba(63, 49, 56, 0.04);
  border-color: rgba(143, 127, 110, 0.18);
}
.dw-qa-item__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2, #f2e6db);
  border-radius: 50%;
  color: var(--ink-soft, #8b7f6e);
}
.dw-qa-item__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.dw-qa-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dw-qa-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #3f3138);
  line-height: 1.3;
}
.dw-qa-item__hint {
  font-family: var(--font-script, 'Caveat', cursive);
  font-size: 13px;
  color: var(--ink-mute, #8b7f6e);
  line-height: 1.2;
}

/* Quick-note inline form (drugi pogled na isti sheet kad user
   tapne "Brza bilješka"). */
.dw-qn-form { display: flex; flex-direction: column; gap: 14px; }
.dw-qn-form__textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 127, 110, 0.25);
  border-radius: 10px;
  background: var(--paper, #fffaf6);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 15px;
  color: var(--ink, #3f3138);
  resize: vertical;
  line-height: 1.5;
  transition: border-color 180ms var(--ease);
  box-sizing: border-box;
}
.dw-qn-form__textarea:focus {
  outline: none;
  border-color: var(--lilac-400, #b692d4);
}
.dw-qn-form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.dw-qn-form__cancel,
.dw-qn-form__submit {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.dw-qn-form__cancel {
  background: transparent;
  color: var(--ink-mute, #8b7f6e);
  border-color: rgba(143, 127, 110, 0.25);
}
.dw-qn-form__cancel:hover { color: var(--ink, #3f3138); border-color: var(--ink-mute, #8b7f6e); }
.dw-qn-form__submit {
  background: var(--ink, #3f3138);
  color: var(--paper, #fffaf6);
  border-color: var(--ink, #3f3138);
}
.dw-qn-form__submit:hover { background: #2a1f2e; }
.dw-qn-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}