/* ═══════════════════════════════════════════════════════════════════════════
   M&A Home — Complete Design System
   Obsidian / Gold · Cormorant Garamond + Jost
   Notch-safe: env(safe-area-inset-*) applied throughout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@200;300;400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #080608;
  --bg2:         #0f0d10;
  --bg3:         #14111a;
  --gold:        #c9a452;
  --gold-dim:    rgba(201,164,82,0.25);
  --gold-glow:   rgba(201,164,82,0.55);
  --text:        #ede5d8;
  --text-dim:    rgba(237,229,216,0.55);
  --text-faint:  rgba(237,229,216,0.28);
  --surface:     rgba(255,255,255,0.032);
  --surface2:    rgba(255,255,255,0.058);
  --border:      rgba(201,164,82,0.18);
  --border-dim:  rgba(201,164,82,0.09);
  --radius:      16px;
  --radius-sm:   10px;
  --nav-h:       68px;
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; background: var(--bg); }
body {
  height: 100%;
  background: var(--bg);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
input, textarea { font-family: inherit; }
input:focus, textarea:focus, button:focus { outline: none; }

/* ── App Shell ─────────────────────────────────────────────────────────────── */
#appShell {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  /* GPU layer: eliminates compositor hand-off during screen transitions */
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* Desktop subtle side fade */
@media (min-width: 481px) {
  body::before, body::after {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    width: calc((100vw - 480px) / 2);
    background: var(--bg);
    z-index: 9999;
    pointer-events: none;
  }
  body::before { left: 0; }
  body::after  { right: 0; }
}

/* screens */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) translate3d(0, 0, 0);
  -webkit-transform: translateY(28px) translate3d(0, 0, 0);
  pointer-events: none;
  transition: opacity 0.52s cubic-bezier(0.4,0,0.2,1),
              transform 0.52s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0.52s;
  will-change: transform, opacity;
  overflow: hidden;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translate3d(0, 0, 0);
  -webkit-transform: translateY(0) translate3d(0, 0, 0);
  pointer-events: all;
  transition: opacity 0.52s cubic-bezier(0.4,0,0.2,1),
              transform 0.52s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0s;
}
.screen.exit {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px) translate3d(0, 0, 0);
  -webkit-transform: translateY(-18px) translate3d(0, 0, 0);
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease, visibility 0s linear 0.38s;
}

/* ── GPU: Lotus loader & gold-glow promotion ─────────────────────────────── */
/* thermal: lotus-loader removed */
.gold-glow {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* ── CSS-only lotus pulse (replaces any JS setInterval pulse loops) ───────── */
@keyframes lotus-pulse {
  0%   { opacity: 0.55; transform: translate3d(0,0,0) scale(1);    }
  50%  { opacity: 1;    transform: translate3d(0,0,0) scale(1.06); }
  100% { opacity: 0.55; transform: translate3d(0,0,0) scale(1);    }
}
.lotus-pulse {
  animation: lotus-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Scrollable inner content ──────────────────────────────────────────────── */
.screen-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 12px);
}
.screen-inner::-webkit-scrollbar { display: none; }

/* intro overlay — the black veil  (#intro-overlay) */

/*
 * The veil lives at z-index 960, above everything including the install modal.
 * clip-path idles at full coverage; on tap, the .dismissing class contracts it
 * to circle(0%) — a 2.5s cinematic lens-iris closing, revealing the lock screen.
 * will-change: clip-path ensures the GPU layer is pre-composited.
 */
#intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 960;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  /* Boutique Baroque material — deep obsidian well with warm centre */
  background: radial-gradient(circle at center, #1a1a1a 0%, #080608 100%);

  /* Double Gold Inlay border — outer 1px gold line */
  border: 1px solid rgba(212,175,55,0.45);

  /* Carved-depth inset shadows: dark recession then inner gold reflection */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.95),
    inset 0 0 0 4px rgba(212,175,55,0.12),
    inset 0 0 60px rgba(0,0,0,0.6);

  /* Clip-path: full iris at rest, contracts to nothing on .dismissing */
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 2.5s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}

#intro-overlay.dismissing {
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

/* ── Gold Inlay Ridges (top & bottom edge bands) ──────────────────────────── */
.intro-ridge {
  width: 100%;
  flex-shrink: 0;
  height: 3px;
  position: relative;
}
.intro-ridge::before,
.intro-ridge::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
}
.intro-ridge::before {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,175,55,0.6) 15%,
    rgba(252,246,186,0.9) 50%,
    rgba(212,175,55,0.6) 85%,
    transparent 100%
  );
}
.intro-ridge::after {
  top: 2px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,175,55,0.2) 20%,
    rgba(212,175,55,0.4) 50%,
    rgba(212,175,55,0.2) 80%,
    transparent 100%
  );
}
.intro-ridge-top    { padding-top: calc(var(--safe-top) + 28px); }
.intro-ridge-bottom { padding-bottom: calc(var(--safe-bot) + 28px); }

/* ── Central Typography Block ─────────────────────────────────────────────── */
.intro-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 40px;
  text-align: center;
}

.intro-lotus {
  margin-bottom: 28px;
  opacity: 0.55;
}
.intro-lotus svg {
  width: 52px;
  height: 68px;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.25));
}

.intro-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.55);
  margin-bottom: 18px;
}

.intro-title {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-size: clamp(26px, 7.5vw, 38px);
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 1.2;
  color: var(--text);
  /* Chiseled-into-obsidian text shadow:
     top edge bright chip · bottom carved shadow · deep drop · distant gold bloom */
  text-shadow:
    0  1px 0   rgba(255,255,255,0.10),
    0 -1px 0   rgba(0,0,0,0.9),
    0  3px 8px rgba(0,0,0,0.95),
    0  0   32px rgba(212,175,55,0.08);
}

.intro-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-top: 6px;
  text-shadow:
    0  1px 0   rgba(255,255,255,0.06),
    0 -1px 0   rgba(0,0,0,0.85),
    0  2px 6px rgba(0,0,0,0.9),
    0  0   24px rgba(212,175,55,0.2);
}

.intro-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  width: 180px;
}
.intro-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg, transparent,
    rgba(212,175,55,0.35) 50%,
    transparent
  );
}
.intro-rule em {
  font-style: normal;
  font-size: 10px;
  color: rgba(212,175,55,0.5);
  letter-spacing: 0;
}

.intro-cta {
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(237,229,216,0.22);
  animation: intro-pulse 3s ease-in-out infinite;
}

@keyframes intro-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}

/* lock screen  (#lockscreen) */
#lockScreen {
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(56px + var(--safe-bot));
}

/* Falling petals canvas — used on lock + home + wish screens */
.petal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.petal {
  position: absolute;
  top: -22px;
  border-radius: 50% 20% 50% 20%;
  animation: petalFall linear infinite;
  will-change: transform;
  contain: layout style;
}
@keyframes petalFall {
  0%   { transform: translateY(-5vh) rotate(0deg) scaleX(1);   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(108vh) rotate(540deg) scaleX(-1); opacity: 0; }
}
.screen:not(.active) .petal { animation-play-state: paused; }
body.petals-off .petal { display: none !important; }

/* Lotus mark above the login form */
.lock-lotus-wrap {
  position: absolute;
  top: calc(var(--safe-top) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 1;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
#loginLotus {
  width: 64px;
  height: 64px;
  opacity: 0.75;
  transition: opacity 0.3s, transform 0.6s cubic-bezier(0.2,0,0.4,1);
}
#loginLotus:active { transform: scale(0.88) rotate(-6deg); opacity: 1; }
.lock-app-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Login card */
.lock-card {
  width: calc(100% - 48px);
  background: var(--surface);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  8px 24px -6px  rgba(0,0,0,0.75),
    inset 0 1px 0      rgba(255,255,255,0.04);
}
.lock-card input {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  /* iOS zooms into inputs with font-size < 16px — must be exactly 16px */
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 13px 16px;
  margin-bottom: 12px;
  transition: border-color 0.25s;
  -webkit-appearance: none;
  /* Prevent double-tap zoom on the input itself */
  touch-action: manipulation;
}
.lock-card input::placeholder { color: var(--text-faint); }
.lock-card input:focus { border-color: var(--gold-dim); }
.lock-card input[type="password"] { letter-spacing: 0.22em; }

.lock-btn {
  width: 100%;
  padding: 14px;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
  transition: background 0.25s, border-color 0.25s;
}
.lock-btn:active { background: rgba(201,164,82,0.38); }

#lockError {
  font-size: 12px;
  color: rgba(220,100,100,0.85);
  text-align: center;
  margin-top: 10px;
  min-height: 18px;
  letter-spacing: 0.06em;
  /* Hidden by default — JS adds .show to reveal */
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
#lockError.show {
  opacity: 1;
}
#lockHint {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  letter-spacing: 0.12em;
  margin-top: 16px;
  font-weight: 200;
}

.lock-hint-word {
  color: var(--gold);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: hintPulse 2.2s ease-in-out infinite;
  display: inline-block;
  margin-right: 4px;
}

@keyframes hintPulse {
  0%, 100% { opacity: 1;    text-shadow: 0 0 8px rgba(201,164,82,0.6); }
  50%       { opacity: 0.45; text-shadow: 0 0 2px rgba(201,164,82,0.1); }
}

/* Lock-screen audio toggle — bottom-right, 44px hit area */
.lock-audio-btn {
  position: absolute;
  bottom: calc(var(--safe-bot) + 20px);
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  color: var(--text-faint);
  transition: color 0.22s, border-color 0.22s, background 0.22s;
  touch-action: manipulation;
  z-index: 10;
}
.lock-audio-btn svg { width: 18px; height: 18px; }
.lock-audio-btn:active { background: var(--surface2); color: var(--gold); }
/* Sync muted state — AudioManager._updateUI() writes .muted via goldKnob,
   but we mirror it here via JS in _updateLockAudioBtn() */
.lock-audio-btn.muted { color: rgba(237,229,216,0.2); }

/* home screen  (#homescreen) */
#homeScreen { padding-bottom: 0; }

/* Top bar — three sections: left (flame+bell), centre (greeting), right (knob+burger) */
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top) + 16px) 16px 12px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  gap: 8px;
}
.home-top-left  { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.home-top-right { display: flex; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; padding-left: 8px; }

/* Notification bell */
#notifBell {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s;
}
#notifBell:active { border-color: var(--gold-dim); }
#notifBell svg { width: 18px; height: 18px; opacity: 0.7; }
.notif-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  display: none;
  box-shadow: 0 0 5px var(--gold-glow);
}
#notifBell.has-unread .notif-dot { display: block; }

/* Music toggle */
#musicToggleBtn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s;
}
#musicToggleBtn svg { width: 18px; height: 18px; opacity: 0.6; transition: opacity 0.25s; }
#musicToggleBtn.playing svg { opacity: 1; }
#musicToggleBtn.playing { border-color: var(--gold-dim); }

/* Greeting — right side */
#homeGreeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(14px, 4vw, 20px);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#homeGreeting em { color: var(--gold); font-style: italic; }

/* Home date */
#homeDate {
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-align: center;
  padding: 0 20px 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Home scrollable content */
#homeScreen .screen-inner {
  padding: 0 16px 20px;
}

/* ── Cards — Luxury Global Upgrade ────────────────────────────────────────── */
/*
 * Every card now carries: 20px backdrop blur, heavyweight obsidian shadow,
 * and a 1px Baroque gold border. The surface itself gains a warm ambient glow
 * via the inner box-shadow to simulate candlelight reflecting off obsidian.
 */
.home-card {
  background: var(--surface);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  4px 16px -4px  rgba(0,0,0,0.7),
    inset 0 1px 0      rgba(255,255,255,0.03);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.home-card:not([onclick]):hover {
  border-color: rgba(212,175,55,0.4);
}
.home-card-label {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}

/* Gold shimmer text */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    #f0d48a 35%,
    var(--gold) 50%,
    #a07c30 65%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}
.screen:not(.active) .shimmer-text { animation-play-state: paused; }

/* ── Daily quote card ──────────────────────────────────────────────────────── */
#dailyQuoteCard {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#dailyQuoteCard.vis { opacity: 1; transform: translateY(0); }
#dailyQuoteText {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
}
#dailyQuoteAttr {
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-align: right;
}

/* ── Counter card ──────────────────────────────────────────────────────────── */
.counter-wrap {
  text-align: center;
  padding: 6px 0;
}
#counterVal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
#counterUnit {
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}
#counterDetail {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}
#anniversaryLabel {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-weight: 200;
  margin-top: 12px;
}
#anniversaryVal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--text-dim);
  margin-top: 4px;
}
#anniversaryVal.anniv-celebrate { color: var(--gold); }

/* ── Clocks card ───────────────────────────────────────────────────────────── */
.clock-row {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}
.clock-city {
  flex: 1;
  text-align: center;
}
.clock-label {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
  margin-bottom: 5px;
}
.clock-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.04em;
}
.clock-ampm {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  margin-left: 3px;
}
.clock-date-small {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 3px;
  font-weight: 200;
}
.clock-divider {
  width: 1px;
  background: var(--border-dim);
  align-self: stretch;
  margin: 4px 0;
}

/* ── Photo of the month ────────────────────────────────────────────────────── */
#photoMonthWrap {
  display: none;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#photoMonthWrap.vis { opacity: 1; transform: translateY(0); }

.polaroid {
  background: #f8f3ec;
  padding: 10px 10px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  transform: rotate(-1.5deg);
  width: 100%;
  max-width: 280px;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
#photoMonthCaption {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #3a3028;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.06em;
}
#photoMonthLabel {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-transform: uppercase;
  text-align: center;
  margin-top: 8px;
}

/* ── Petal + music toggle row ──────────────────────────────────────────────── */
.home-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.icon-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 14px;
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color 0.2s, color 0.2s;
}
.icon-toggle-btn.off { opacity: 0.45; }
.icon-toggle-btn svg { width: 14px; height: 14px; }

/* ── Easter egg mark ───────────────────────────────────────────────────────── */
.home-lotus-mark {
  text-align: center;
  padding: 10px 0 4px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.home-lotus-mark svg {
  width: 28px; height: 28px;
  opacity: 0.2;
  transition: opacity 0.3s;
}
.home-lotus-mark:active svg { opacity: 0.55; }

/* bottom nav */
.bottom-nav {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: calc(var(--nav-h) + var(--safe-bot));
  padding-bottom: var(--safe-bot);
  background: rgba(8,6,8,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-dim);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 100;
}
.nav-tab {
  flex: 1;
  height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-faint);
  transition: color 0.22s;
  -webkit-user-select: none; user-select: none;
  padding: 0;
  background: none;
  border: none;
}
.nav-tab svg { width: 22px; height: 22px; transition: color 0.22s; }
.nav-tab span {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.22s;
}
.nav-tab.active { color: var(--gold); }
.nav-tab.active svg { filter: drop-shadow(0 0 5px var(--gold-glow)); }

/* section screens (letters, wishlist, diaries, games, surprise, easter) */

/* Shared section header */
.section-header {
  display: flex;
  align-items: center;
  padding: calc(var(--safe-top) + 18px) 20px 14px;
  flex-shrink: 0;
  gap: 14px;
}
.back-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.back-btn svg { width: 16px; height: 16px; opacity: 0.7; }
.back-btn:active { border-color: var(--gold-dim); }

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  flex: 1;
}
.section-rule {
  height: 1px;
  background: var(--border-dim);
  margin: 0 20px 18px;
  flex-shrink: 0;
}

/* letters screen  (#lettersscreen) */
#lettersScreen .screen-inner { padding: 0 16px calc(var(--nav-h) + var(--safe-bot) + 16px); }

/* Compose area */
.letter-compose {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
#newLetterText {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  resize: none;
  min-height: 80px;
  letter-spacing: 0.02em;
}
#newLetterText::placeholder { color: var(--text-faint); }
.letter-compose-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.letter-send-btn {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 18px;
  transition: background 0.2s;
}
.letter-send-btn:active { background: rgba(201,164,82,0.35); }

/* Letter card */
.letter-card {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s;
}

/* Wax seal */
.letter-wax {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  cursor: pointer;
  transition: background 0.3s;
  min-height: 88px;
}
.letter-wax::before {
  content: '';
  position: absolute;
  width: 52px; height: 52px;
  background: radial-gradient(circle at 38% 38%, #d4a654, #a07030 55%, #7a5020 85%);
  border-radius: 50% 45% 50% 45%;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55), inset 0 1px 3px rgba(255,220,120,0.4);
  transition: transform 0.3s, opacity 0.5s;
}
.letter-wax.cracking::before { transform: scale(1.15); }
.letter-wax.cracked::before  { opacity: 0; transform: scale(1.8); }

.wax-crack-svg {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 2;
  pointer-events: none;
}
.crack-line {
  stroke: rgba(255,240,200,0.9);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.35s ease;
}
.letter-wax.cracked .crack-line { stroke-dashoffset: 0; }

.letter-from {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-weight: 200;
  margin-top: 8px;
  z-index: 1;
}
.letter-unsealed {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 200;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s 0.2s;
}
.letter-wax.cracked + .letter-from + .letter-unsealed,
.letter-wax.cracked ~ .letter-unsealed { opacity: 1; }

/* Letter body */
.letter-body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1), padding 0.4s;
  padding: 0 20px;
}
.letter-body-wrap.open {
  max-height: 600px;
  padding: 0 20px 16px;
}
.letter-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.75;
  white-space: pre-wrap;
}
.letter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.letter-date {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  font-weight: 200;
}
.letter-delete {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: rgba(200,80,80,0.55);
  background: rgba(200,80,80,0.08);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.letter-delete:active { background: rgba(200,80,80,0.2); color: rgba(200,80,80,0.9); }

/* Letter time-lock */
.letter-timelock {
  text-align: center;
  padding: 24px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--text-faint);
  line-height: 1.65;
}

/* wishlist screen  (#wishlistscreen) */
#wishlistScreen .screen-inner { padding: 0 16px calc(var(--nav-h) + var(--safe-bot) + 16px); }

/* Filter row */
.wish-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.wish-filter-btn {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  padding: 7px 14px;
  transition: color 0.2s, border-color 0.2s;
  font-weight: 300;
}
.wish-filter-btn.active {
  color: var(--gold);
  border-color: var(--gold-dim);
}

/* Who selector */
.wish-who-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.wish-who-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
}
#wishWho {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  -webkit-appearance: none;
}

/* Input row */
.wish-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
#wishInput {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  padding: 11px 14px;
  transition: border-color 0.25s;
}
#wishInput::placeholder { color: var(--text-faint); }
#wishInput:focus { border-color: var(--gold-dim); }
.wish-add-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 22px;
  font-weight: 200;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.wish-add-btn:active { background: rgba(201,164,82,0.38); }

/* Wish cards */
.wish-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid var(--border-dim);
  animation: cardIn 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wish-card.her-card { border-left: 2px solid rgba(255,180,200,0.3); }
.wish-card.him-card { border-left: 2px solid var(--gold-dim); }
.wish-card-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 8px;
  padding-right: 28px;
}
.wish-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wish-card-attr {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-weight: 200;
}
.wish-card-date {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 200;
}
.wish-delete {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: rgba(200,80,80,0.45);
  background: rgba(200,80,80,0.06);
  border-radius: 50%;
}
.wish-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-faint);
  text-align: center;
}
.wish-empty-lotus { opacity: 0.25; }
.wish-empty-lotus svg { width: 40px; height: 40px; }
.wish-empty-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
}
.wish-empty-sub { font-size: 12px; letter-spacing: 0.1em; }

/* diaries screen  (#diariesscreen) */
#diariesScreen .screen-inner { padding: 0 16px calc(var(--nav-h) + var(--safe-bot) + 16px); }

/* Scroll grid */
#scrollGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.scroll-card {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.2s;
  position: relative;
  min-height: 180px;
}
.scroll-card:active { border-color: var(--gold-dim); transform: scale(0.975); }

/* Delete button — invisible by default, appears on tap (same pattern as media grid) */
.diary-card-delete {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 8;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(8,6,8,0.72);
  border: 1px solid rgba(220,80,80,0.4);
  color: rgba(220,80,80,0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.15s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.diary-card-delete:hover  { opacity: 1; }
.diary-card-delete:active { opacity: 1; background: rgba(200,50,50,0.35); }

.scroll-roller {
  height: 12px;
  background: linear-gradient(to bottom, rgba(201,164,82,0.25), rgba(201,164,82,0.06));
  border-bottom: 1px solid var(--border-dim);
}
.scroll-roller-bottom {
  height: 12px;
  background: linear-gradient(to top, rgba(201,164,82,0.2), rgba(201,164,82,0.04));
  border-top: 1px solid var(--border-dim);
  margin-top: auto;
}
.scroll-card-body {
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.scroll-card-num {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 300;
}
.scroll-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
}
.scroll-card-rule {
  height: 1px;
  background: var(--border-dim);
  margin: 2px 0;
}
.scroll-card-mark {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 200;
}

/* Diary reader overlay */
#diaryReader {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 88%;
  background: var(--bg2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--border-dim);
  padding: 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#diaryReader.open { transform: translateY(0); }

.diary-reader-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 14px auto 0;
  flex-shrink: 0;
}
.diary-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
#diaryEyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 300;
}
#diaryTitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  margin-top: 2px;
}
.diary-close-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.diary-delete-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(180,40,40,0.1);
  border: 1px solid rgba(220,70,70,0.4);
  border-radius: 50%;
  color: rgba(230,80,80,0.95);
  flex-shrink: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, border-color 0.18s;
}
.diary-delete-btn:active { background: rgba(200,50,50,0.28); border-color: rgba(220,70,70,0.7); }

#diaryScroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 22px 40px;
}
#diaryScroll::-webkit-scrollbar { display: none; }
#diaryBody {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.9;
  white-space: pre-wrap;
}
#diaryAttr {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-align: right;
  margin-top: 20px;
  font-weight: 200;
}
#diaryBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,6,8,0.55);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#diaryBackdrop.open { opacity: 1; pointer-events: all; }

/* games screen  (#gamesscreen) */
#gamesScreen { align-items: center; }
#gamesScreen .screen-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px calc(var(--nav-h) + var(--safe-bot) + 12px);
}

#pongModeRow {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.pong-mode-btn {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  padding: 7px 16px;
  transition: color 0.2s, border-color 0.2s;
}
.pong-mode-btn.active { color: var(--gold); border-color: var(--gold-dim); }

#pongCanvas {
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border-dim);
  touch-action: none;
  display: block;
  max-width: 100%;
}

.pong-scores {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 380px;
  padding: 12px 4px 0;
}
.pong-score {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--text-dim);
}
#pongHint {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-align: center;
  margin-top: 10px;
  font-weight: 200;
}
#pongStartBtn {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 24px;
}

/* surprise screen  (#surprisescreen) */
#surpriseScreen .screen-inner { padding: 0 20px calc(var(--nav-h) + var(--safe-bot) + 16px); }

/* Surprise close button — 44px hit area, always on top */
#surpriseCloseBtn {
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  right: 14px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(8,6,8,0.55);
  border: 1px solid rgba(201,164,82,0.22);
  border-radius: 50%;
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s;
}
#surpriseCloseBtn:active { background: rgba(201,164,82,0.18); border-color: var(--gold); }

/* PIN Gate */
#pinGate {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 32px;
}
#pinGate.unlocked { display: none; }

.pin-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
}
#pinDots {
  display: flex;
  gap: 14px;
}
.pin-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  transition: background 0.2s;
}
.pin-dot.filled { background: var(--gold); border-color: var(--gold); }
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  gap: 10px;
}
.pin-key {
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 200;
  color: var(--text);
  transition: background 0.15s;
  /* Prevent double-tap zoom on PIN numpad */
  touch-action: manipulation;
  /* iOS: prevent zoom for font-size < 16px context */
  -webkit-user-select: none;
  user-select: none;
}
.pin-key:active { background: var(--surface2); }
#pinError {
  font-size: 12px;
  color: rgba(220,100,100,0.8);
  letter-spacing: 0.08em;
  min-height: 18px;
  text-align: center;
  /* Hidden by default — JS adds .show to reveal */
  opacity: 0;
  transition: opacity 0.22s ease;
}
#pinError.show { opacity: 1; }

/* Surprise reveal */
#surpriseOverlay { position: relative; min-height: 300px; }
#sealedState, #revealState {
  transition: opacity 0.5s, transform 0.5s;
}
#sealedState.gone { display: none; }
#revealState {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;   /* non-interactive until .shown */
}
#revealState.shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;   /* restored — links/buttons inside are now tappable */
}

/* Surprise canvas (confetti) */
#surpriseCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Surprise nav card */
#surpriseNavCard {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.25s;
  display: none;
}
#surpriseNavCard.shown { display: block; }
#surpriseNavCard:active { border-color: var(--gold-dim); }

/* easter egg screen  (#easterscreen) */
#easterScreen {
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 16px) 24px calc(var(--safe-bot) + 24px);
  overflow: hidden;
}
#easterScreen .screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
}

/* Bloom button */
#bloomBtn {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
#lotusSvg {
  width: 160px; height: 160px;
  display: block;
}
#bloomCount {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-align: center;
  margin-top: 16px;
  font-weight: 200;
}

/* Bloom overlay (star field + quote) */
#bloomOverlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
#bloomOverlay.active { pointer-events: all; }
#bloomCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#bloomFlash {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
#bloomQuoteText {
  position: relative;
  z-index: 6;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
#bloomReturnBtn {
  position: relative;
  z-index: 6;
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 22px;
  opacity: 0;
  transition: opacity 0.8s ease;
  cursor: pointer;
}
#bloomReturnBtn.visible { opacity: 1; }

/* screensaver  (#screensaver) */
#screensaver {
  position: absolute;
  inset: 0;
  z-index: 800;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  cursor: pointer;
  overflow: hidden;
}
#screensaver.ss-active { opacity: 1; pointer-events: all; }

#ssPetalCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#ssTime {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 18vw, 84px);
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
#ssDate {
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  margin-top: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* notification tray */
#notifOverlay {
  position: absolute;
  inset: 0;
  background: rgba(8,6,8,0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#notifOverlay.open { opacity: 1; pointer-events: all; }

#notifTray {
  position: absolute;
  top: 0; left: 0; right: 0;
  max-height: 70%;
  background: var(--bg2);
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid var(--border-dim);
  border-top: none;
  z-index: 160;
  transform: translateY(-100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}
#notifTray.open { transform: translateY(0); }

.notif-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.notif-tray-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: var(--text);
}
.notif-tray-close {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 10px;
}
.notif-mute-btn {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

#notifList {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
#notifList::-webkit-scrollbar { display: none; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.2s;
}
.notif-item.unread { background: rgba(201,164,82,0.04); }
.notif-item-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
  opacity: 0;
}
.notif-item.unread .notif-item-dot { opacity: 1; }
.notif-item-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 300;
}
.notif-item-time {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 3px;
  letter-spacing: 0.1em;
  font-weight: 200;
}
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px;
  color: var(--text-faint);
}
.notif-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(201,164,82,0.06);
  border: 1px solid rgba(201,164,82,0.12);
}
.notif-empty-icon svg { width: 22px; height: 22px; opacity: 0.35; }
.notif-empty-text {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 200;
}

/* volume dial */
#volDialOverlay {
  position: absolute;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,6,8,0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
  backdrop-filter: blur(8px);
}
#volDialOverlay.open { opacity: 1; pointer-events: all; }

.vol-dial-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 180px;
}
.vol-dial-title {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
}
#volDialSvg {
  width: 90px; height: 90px;
  cursor: pointer;
  touch-action: none;
}
#volPct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
}
.vol-close-btn {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 16px;
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  margin-top: 4px;
}

/* tutorial overlay */
/* welcome letter screen */
#welcomeScreen {
  position: absolute; inset: 0; z-index: 910;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 0 calc(var(--safe-bot) + 28px);
  background: rgba(8,6,8,0.94);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#welcomeScreen.welcome-active { opacity: 1; pointer-events: all; }

.welcome-scroll {
  flex: 1; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--safe-top) + 40px) 24px 24px;
}
.welcome-scroll::-webkit-scrollbar { display: none; }

.welcome-paper {
  width: 100%; max-width: 360px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(40,24,8,0.04) 28px, rgba(40,24,8,0.04) 29px),
    linear-gradient(150deg, #f5e8cc 0%, #ead4a4 35%, #f2e2be 65%, #e8d0a0 100%);
  border: 1px solid rgba(160,110,50,0.4);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), inset 0 0 40px rgba(40,24,8,0.06);
  padding: 36px 28px 32px;
  position: relative;
}
/* Top edge fold line */
.welcome-paper::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to bottom, rgba(140,90,30,0.25), transparent);
  border-radius: 4px 4px 0 0;
}

.welcome-salutation {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 500; font-style: italic;
  color: rgba(22,8,2,0.9);
  margin-bottom: 22px;
  letter-spacing: 0.04em;
}

.welcome-body {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 28px;
}
.welcome-body p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15.5px; font-weight: 400;
  color: rgba(22,8,2,0.85);
  line-height: 1.85; letter-spacing: 0.02em;
  text-indent: 1.2em;
}

/* Wax seal */
.welcome-seal-wrap {
  display: flex; justify-content: center;
  margin: 4px 0 28px;
}
.welcome-seal-svg {
  width: 64px; height: 64px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)) drop-shadow(0 1px 3px rgba(120,40,0,0.4));
}

.welcome-sig {
  text-align: right;
  border-top: 1px solid rgba(160,110,50,0.22);
  padding-top: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-style: italic;
  color: rgba(40,16,2,0.62);
  line-height: 1.7;
}
.welcome-sig-name {
  font-size: 20px; font-weight: 600;
  color: rgba(40,16,2,0.72);
  letter-spacing: 0.06em;
}

#welcomeNext {
  margin-top: 20px; flex-shrink: 0;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 11px 32px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#welcomeNext:active { background: rgba(212,175,55,0.18); }

#tutorialOverlay {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: rgba(8,6,8,0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  backdrop-filter: blur(8px);
}
#tutorialOverlay.tut-active { opacity: 1; pointer-events: all; }

.tut-step {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.tut-step.tut-vis { display: flex; }
.tut-icon { font-size: 32px; margin-bottom: 4px; }
.tut-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  color: var(--text);
}
.tut-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 280px;
}

.tut-dots {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.tut-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border-dim);
  transition: background 0.2s;
}
.tut-dot.active { background: var(--gold); border-color: var(--gold); }

#tutNext {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 11px 28px;
  margin-top: 6px;
}

/* install modal */
#installModalBackdrop {
  position: absolute;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: flex-end;
  background: rgba(8,6,8,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  backdrop-filter: blur(8px);
}
#installModalBackdrop.show { opacity: 1; pointer-events: all; }

.install-modal {
  position: relative; left: 0; width: 100%; max-width: 100%;
  background: var(--bg2); border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border-dim); border-bottom: none;
  padding: 28px 24px calc(28px + var(--safe-bot)) 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 16px; box-sizing: border-box; overflow: hidden;
}
.install-handle {
  width: 38px; height: 4px; background: var(--border);
  border-radius: 2px; align-self: center; margin-bottom: 4px; flex-shrink: 0;
}
.install-title {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-style: italic; font-weight: 300; color: var(--text);
  white-space: normal; word-break: break-word; text-align: left; width: 100%;
}
#installModalSteps {
  font-size: 13px; font-weight: 300; color: var(--text-dim); line-height: 1.75;
  white-space: normal; word-break: break-word; overflow-wrap: break-word;
  text-align: left; width: 100%; max-width: 100%;
}
#installModalSteps p { margin: 0 0 5px; }
#installModalSteps strong { color: var(--text); font-weight: 500; }
.install-row { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
#installModalBtn {
  flex: 1;
  padding: 13px;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.install-dismiss-btn {
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

/* toast */
#toast {
  position: absolute;
  bottom: calc(var(--nav-h) + var(--safe-bot) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  white-space: nowrap;
  z-index: 850;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* utility / shared */

/* Section empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-faint);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
}

/* Gold ornament rule */
.ornament-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  flex-shrink: 0;
}
.ornament-rule::before,
.ornament-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-dim);
}
.ornament-rule span {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.28em;
}

/* Scrollbar — shown only on desktop */
@media (min-width: 481px) {
  .screen-inner::-webkit-scrollbar { display: block; width: 3px; }
  .screen-inner::-webkit-scrollbar-track { background: transparent; }
  .screen-inner::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; }
}

/* ── Visibility helpers ─────────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.gone    { display: none !important; }
.visible { visibility: visible !important; opacity: 1 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   20 · RESPONSIVE — Desktop max-width already handled by #appShell
   On very small phones reduce base font
   ───────────────────────────────────────────────────────────────────────────── */
  #counterVal     { font-size: 40px; }
}

/* sprint 1 ornaments */

/* ── S1-A · ETERNAL FLAME ─────────────────────────────────────────────────── */

@keyframes flame-dance {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-1deg); }
  20%  { transform: scaleX(0.94) scaleY(1.04) rotate(1.5deg); }
  40%  { transform: scaleX(1.04) scaleY(0.97) rotate(-1deg); }
  60%  { transform: scaleX(0.97) scaleY(1.06) rotate(2deg); }
  80%  { transform: scaleX(1.02) scaleY(0.96) rotate(-0.5deg); }
  100% { transform: scaleX(1)    scaleY(1)    rotate(-1deg); }
}

@keyframes flame-glow-pulse {
  0%, 100% { opacity: 0.85; }
  45%       { opacity: 1; }
}

#eternal-flame {
  width: 28px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#eternal-flame svg {
  width: 22px;
  height: 34px;
  animation:
    flame-dance      2.1s ease-in-out infinite,
    flame-glow-pulse 3.3s ease-in-out infinite;
  transform-origin: 50% 90%;
  will-change: transform;
  contain: layout style;
  filter: drop-shadow(0 0 6px rgba(255,140,0,0.5));
}

/* ── S1-B · GOLD KNOB ─────────────────────────────────────────────────────── */

#goldKnob {
  width: 36px;
  height: 36px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: none;   /* prevent scroll stealing during drag */
}

.gold-knob-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* Brushed gold — conic gradient simulates machined metal face */
  background: conic-gradient(
    from 0deg,
    #d4af37 0deg,
    #fcf6ba 45deg,
    #d4af37 90deg,
    #a8862a 135deg,
    #8a6d1c 180deg,
    #a8862a 225deg,
    #d4af37 270deg,
    #fcf6ba 315deg,
    #d4af37 360deg
  );

  box-shadow:
    0 0 0 1px rgba(212,175,55,0.5),         /* gold rim */
    0 2px 10px rgba(0,0,0,0.85),            /* lifted shadow */
    inset 0  1px 0 rgba(255,255,255,0.22),  /* top specular highlight */
    inset 0 -1px 0 rgba(0,0,0,0.45);        /* bottom carved shadow */

  position: relative;
  /* Rotation driven by AudioManager.initGoldKnob() via style.transform */
  will-change: transform;
  transition: box-shadow 0.2s, opacity 0.3s;
}

/* Knob position indicator — small dark notch at 12 o'clock of the face */
.gold-knob-indicator {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 3px;
  height: 7px;
  background: rgba(8,6,8,0.75);
  border-radius: 1.5px;
  transform: translateX(-50%);
  /* No transform-origin needed — the whole face rotates, indicator rides with it */
}

/* Muted state: dim the knob face when music is off */
#goldKnob.muted .gold-knob-face {
  opacity: 0.38;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.2),
    0 2px 8px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

#goldKnob:active .gold-knob-face {
  box-shadow:
    0 0 0 1.5px rgba(252,246,186,0.7),
    0 2px 8px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ── S1-E · LUXURY UPGRADES — MODALS & OVERLAYS ──────────────────────────── */

/* ── LOTUS MENU ─────────────────────────────────────────────────────────── */

#lotusMenuWrap {
  position: relative;
}

#lotusMenuBtn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
  /* ambient lotus glow */
  box-shadow:
    0 0 10px rgba(212,175,55,0.18),
    0 0 22px rgba(212,175,55,0.08);
}

#lotusMenuBtn:hover,
#lotusMenuBtn[aria-expanded="true"] {
  border-color: rgba(212,175,55,0.6);
  background: rgba(212,175,55,0.06);
  box-shadow:
    0 0 14px rgba(212,175,55,0.35),
    0 0 32px rgba(212,175,55,0.15);
}

#lotusMenuBtn svg {
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.5));
  transition: filter 0.22s;
}

#lotusMenuBtn:hover svg,
#lotusMenuBtn[aria-expanded="true"] svg {
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.85));
}

/* Dropdown panel */
#lotusDropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 200px;
  z-index: 950;
  display: flex;
  flex-direction: column;

  background: linear-gradient(160deg, #13110f 0%, #0d0b0e 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 12px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.85),
    0  4px 16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(212,175,55,0.07);

  padding: 8px 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4,0,0.2,1);
}

#lotusDropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.lotus-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: left;
  transition: color 0.16s, background 0.16s, padding-left 0.16s;
}

.lotus-nav-item svg {
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity 0.16s;
}

.lotus-nav-item:hover,
.lotus-nav-item:active {
  color: var(--text);
  background: rgba(212,175,55,0.05);
  padding-left: 22px;
}

.lotus-nav-item:hover svg,
.lotus-nav-item:active svg { opacity: 0.75; }

.lotus-signout {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237,229,216,0.28);
}

.lotus-signout:hover { color: rgba(220,100,100,0.65); background: rgba(220,100,100,0.04); }

.lotus-rule {
  height: 1px;
  margin: 6px 14px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.18) 40%, rgba(212,175,55,0.18) 60%, transparent);
}

.lotus-activity-wrap {
  padding: 6px 0 4px;
}

.lotus-activity-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 18px 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.4);
}

.lotus-activity-head svg { opacity: 0.5; flex-shrink: 0; }

/* notif tray gets the treatment */
#notifTray {
  border-color: rgba(212,175,55,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  4px 24px -4px  rgba(0,0,0,0.8),
    inset 0 1px 0      rgba(255,255,255,0.025);
}

/* vol dial card */
.vol-dial-card {
  border-color: rgba(212,175,55,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  8px 32px -8px  rgba(0,0,0,0.8);
}

/* install modal */
.install-modal {
  border-color: rgba(212,175,55,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.8);
}


/* letter cards */
.letter-card {
  border-color: rgba(212,175,55,0.28) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  4px 16px -4px  rgba(0,0,0,0.7),
    inset 0 1px 0      rgba(255,255,255,0.02) !important;
}

/* wish cards */
.wish-card {
  border-color: rgba(212,175,55,0.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 24px 48px -10px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* diary reader panel */
#diaryReader {
  border-color: rgba(212,175,55,0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 -40px 80px -15px rgba(0,0,0,0.9) !important;
}


/* media screen — obsidian box */

#mediaScreen .screen-inner {
  padding: 0 20px calc(var(--nav-h) + var(--safe-bot) + 24px);
}

/* Outer obsidian container — matches the deep-well card language of the app */
.obsidian-box {
  margin-top: 8px;
  border-radius: var(--radius);
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.028) 0%,
      rgba(255,255,255,0.010) 50%,
      rgba(201,164,82,0.018) 100%
    );
  border: 1px solid rgba(201,164,82,0.2);
  box-shadow:
    0 48px 96px -20px rgba(0,0,0,0.96),
    0  8px 24px -8px  rgba(0,0,0,0.75),
    inset 0 1px 0     rgba(255,255,255,0.035),
    inset 0 -1px 0    rgba(201,164,82,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* Inner padding — the "Obsidian Box" breathing room */
.obsidian-box-inner {
  padding: 32px 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Eyebrow label */
.obsidian-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 20px;
}

/* Lotus + rule divider */
.obsidian-lotus-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 28px;
}
.obsidian-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,164,82,0.22) 40%,
    rgba(201,164,82,0.22) 60%,
    transparent 100%
  );
}
.obsidian-lotus-rule svg {
  opacity: 0.55;
  flex-shrink: 0;
}

/* Empty / coming-soon state */
.obsidian-empty-state {
  width: 100%;
  text-align: center;
  padding: 8px 0 4px;
}
.obsidian-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 12px;
}
.obsidian-empty-sub {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: 28px;
}
.obsidian-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  padding: 9px 18px;
  border: 1px solid rgba(201,164,82,0.18);
  border-radius: 20px;
  background: rgba(201,164,82,0.05);
}

/* Surprise nav tab + side menu item — injected at runtime, same style as peers */
#surpriseNavTab {
  /* inherits .nav-tab styles — no overrides needed */
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — VISUAL ENGINE
   Media Grid · Lightbox · Diary Press FAB · Diary Press Overlay
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Media Screen ──────────────────────────────────────────────────────────── */

.media-screen-inner {
  padding: 0 0 calc(var(--nav-h) + var(--safe-bot) + 80px);
  /* No side padding — grid bleeds edge to edge */
}

.media-eyebrow {
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
  text-align: center;
  padding: 18px 20px 14px;
}

/* ── Masonry Grid ──────────────────────────────────────────────────────────── */

.media-grid {
  column-count: 2;
  column-gap: 2px;
  padding: 0 2px;
}

.media-cell {
  position: relative;
  break-inside: avoid;
  overflow: hidden;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 4px;
  /* GPU layer for smooth hover */
  will-change: transform;
  transform: translate3d(0,0,0);
}

.media-cell img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1),
              filter  0.6s cubic-bezier(0.4,0,0.2,1);
  filter: brightness(0.82) saturate(0.85);
}

/* Veil — gold shimmer on hover/active */
.media-cell-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(201,164,82,0.0) 0%,
    rgba(201,164,82,0.0) 60%,
    rgba(201,164,82,0.18) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.media-cell:active img        { transform: scale(1.03); filter: brightness(0.95) saturate(1); }
.media-cell:active .media-cell-veil { opacity: 1; }

/* Tall variant — first col second item, spans more height */
.media-cell--tall img  { min-height: 260px; object-fit: cover; }
.media-cell--wide img  { min-height: 180px; object-fit: cover; }

/* Bottom lotus rule */
.media-footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 20px 12px;
}
.media-footer-rule {
  flex: 1;
  height: 1px;
  background: var(--border-dim);
}

/* ── Lightbox Modal ────────────────────────────────────────────────────────── */

#mediaLightbox {
  position: absolute;
  inset: 0;
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,6,8,0.0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity        0.5s cubic-bezier(0.4,0,0.2,1),
    background     0.5s cubic-bezier(0.4,0,0.2,1),
    backdrop-filter 0.5s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}

#mediaLightbox.lb-open {
  opacity: 1;
  pointer-events: all;
  background: rgba(8,6,8,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-close {
  position: absolute;
  top: calc(var(--safe-top) + 16px);
  right: 18px;
  z-index: 10;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  cursor: pointer;
}
.lightbox-close:active { background: rgba(255,255,255,0.14); color: var(--text); }

.lightbox-stage {
  position: relative;
  max-width: 90%;
  max-height: 82vh;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,164,82,0.18);
  transform: scale(0.88) translateY(16px);
  transition: transform 0.5s cubic-bezier(0.34,1.28,0.64,1);
  cursor: default;
}

#mediaLightbox.lb-open .lightbox-stage {
  transform: scale(1) translateY(0);
}

#lightboxImg {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Diary FAB ─────────────────────────────────────────────────────────────── */

.diary-fab {
  position: absolute;
  right: 18px;
  bottom: calc(16px + var(--safe-bot));
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;

  /* Gold gradient surface */
  background: linear-gradient(135deg, #c9a452 0%, #e8c97a 45%, #a07c30 100%);
  box-shadow:
    0 4px 20px rgba(201,164,82,0.45),
    0 1px 4px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,240,180,0.35);
  border: none;

  transition: transform 0.22s cubic-bezier(0.34,1.28,0.64,1),
              box-shadow 0.22s ease,
              opacity 0.28s ease;
  will-change: transform;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}

.diary-fab svg {
  width: 20px; height: 20px;
  stroke: rgba(8,6,8,0.85);
  flex-shrink: 0;
}

.diary-fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 10px rgba(201,164,82,0.35);
}

/* FAB on homeScreen sits above the nav bar */
.diary-fab--above-nav {
  bottom: calc(var(--nav-h) + var(--safe-bot) + 16px);
}

/* ── Diary Press Overlay ───────────────────────────────────────────────────── */

#diaryPressOverlay {
  position: absolute;
  inset: 0;
  z-index: 660;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  background: rgba(8,6,8,0.0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity          0.4s cubic-bezier(0.4,0,0.2,1),
    backdrop-filter  0.4s ease,
    background       0.4s ease;
}

#diaryPressOverlay.press-open {
  opacity: 1;
  pointer-events: all;
  background: rgba(8,6,8,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* The main sheet slides up from bottom */
.press-sheet {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Initial state: slides down off screen */
  transform: translateY(100%);
  transition: transform 0.48s cubic-bezier(0.34,1.12,0.64,1);
  will-change: transform;

  /* Inner gold line at the very top */
  box-shadow:
    inset 0 1px 0 rgba(201,164,82,0.22),
    0 -8px 48px rgba(0,0,0,0.6);
}

#diaryPressOverlay.press-open .press-sheet {
  transform: translateY(0);
}

/* Press header */
.press-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}

.press-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.press-eyebrow {
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
}

.press-close-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.press-close-btn:active { color: var(--text); border-color: var(--gold-dim); }

.press-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 0 20px;
  flex-shrink: 0;
}

/* Scrollable body */
.press-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px 0;
}
.press-body::-webkit-scrollbar { display: none; }

/* Field label */
.press-field-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 200;
  margin-bottom: 8px;
}

/* Entry number input */
.press-input-num {
  display: block;
  width: 72px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  padding: 6px 0 8px;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px !important;
  font-weight: 300;
  letter-spacing: 0.06em;
  caret-color: var(--gold);
  transition: border-color 0.25s;
}
.press-input-num:focus { border-color: var(--gold); outline: none; }
.press-input-num::placeholder { color: var(--text-faint); }

/* Cinematic title */
.press-input-title {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  padding: 8px 0 12px;
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px !important;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.25;
  caret-color: var(--gold);
  transition: border-color 0.25s;
}
.press-input-title:focus { border-color: rgba(201,164,82,0.55); outline: none; }
.press-input-title::placeholder { color: var(--text-faint); font-style: italic; }

/* Attribution */
.press-input-attr {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  padding: 6px 0 10px;
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px !important;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.04em;
  caret-color: var(--gold);
  transition: border-color 0.25s;
}
.press-input-attr:focus { border-color: var(--gold-dim); outline: none; }
.press-input-attr::placeholder { color: var(--text-faint); font-style: italic; }

/* Body textarea */
.press-textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px !important;
  font-weight: 300;
  font-style: italic;
  line-height: 1.75;
  letter-spacing: 0.02em;
  resize: none;
  caret-color: var(--gold);
  transition: border-color 0.25s;
}
.press-textarea:focus { border-color: var(--gold-dim); outline: none; }
.press-textarea::placeholder { color: var(--text-faint); font-style: italic; }

/* ── Icon Tray ─────────────────────────────────────────────────────────────── */

.press-icon-tray {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.press-icon-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: background  0.22s ease,
              border-color 0.22s ease,
              transform    0.18s cubic-bezier(0.34,1.28,0.64,1);
  -webkit-user-select: none; user-select: none;
}

.press-icon-btn svg {
  width: 100%;
  height: 100%;
  stroke: var(--text-faint);
  transition: stroke 0.22s;
}

/* Lotus icon gets a special viewBox-based scale treatment */
.press-icon-btn[data-icon="lotus"] svg {
  stroke: var(--text-faint);
}

.press-icon-btn:active {
  transform: scale(0.9);
}

/* Selected state */
.press-icon-btn.selected {
  background: rgba(201,164,82,0.12);
  border-color: rgba(201,164,82,0.5);
  box-shadow: 0 0 12px rgba(201,164,82,0.15), inset 0 0 8px rgba(201,164,82,0.06);
}
.press-icon-btn.selected svg {
  stroke: var(--gold);
  filter: drop-shadow(0 0 4px rgba(201,164,82,0.5));
}

/* ── Submit Button ─────────────────────────────────────────────────────────── */

.press-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 32px;
  padding: 16px 24px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(8,6,8,0.88);
  cursor: pointer;

  /* Gold gradient */
  background: linear-gradient(135deg, #c9a452 0%, #e8c97a 50%, #c9a452 100%);
  background-size: 200% auto;
  border: none;
  border-radius: 40px;
  box-shadow:
    0 4px 20px rgba(201,164,82,0.35),
    inset 0 1px 0 rgba(255,240,180,0.4);

  transition: transform    0.22s cubic-bezier(0.34,1.28,0.64,1),
              box-shadow   0.22s ease,
              background-position 0.6s ease;
}

.press-submit-btn:hover {
  background-position: right center;
}

.press-submit-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(201,164,82,0.25);
}


/* phase 2 — new components */

/* ── Media Sub-Navigation ───────────────────────────────────────────────── */

.media-subnav {
  display: flex;
  gap: 0;
  padding: 0 20px;
  margin-bottom: -1px;   /* sit flush with section-rule */
  border-bottom: 1px solid rgba(201,164,82,0.14);
}

.media-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 4px 12px;
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px; /* prevent iOS zoom */
  font-size: clamp(10px, 2.4vw, 12px); /* refined after zoom-proof floor */
}

/* Prevent iOS zoom: minimum 16px on all interactive inputs */
input, textarea, select {
  font-size: 16px !important;
}

.media-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Video play overlay on grid cells ───────────────────────────────────── */

.media-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.media-play-btn svg {
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  background: rgba(0,0,0,0.38);
  border-radius: 50%;
  padding: 8px;
  width: 44px;
  height: 44px;
}

/* ── Audio track list ───────────────────────────────────────────────────── */

.media-audio-list {
  padding: 12px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.media-audio-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,164,82,0.08);
  cursor: pointer;
  transition: background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.media-audio-row:active {
  background: rgba(201,164,82,0.07);
}

.media-audio-icon {
  color: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
}

.media-audio-info {
  flex: 1;
  min-width: 0;
}

.media-audio-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-audio-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

.media-audio-chevron {
  color: var(--text-faint);
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Media empty state ──────────────────────────────────────────────────── */

.media-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
}

/* ── Lightbox arrows ────────────────────────────────────────────────────── */

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(201,164,82,0.22);
  color: rgba(237,229,216,0.9);
  font-size: 36px;
  line-height: 1;
  width: 44px;
  height: 64px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-arrow:active {
  background: rgba(201,164,82,0.18);
}

.lightbox-arrow--prev { left: 12px; }
.lightbox-arrow--next { right: 12px; }

/* ── Lightbox caption ───────────────────────────────────────────────────── */

.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(237,229,216,0.78);
  letter-spacing: 0.04em;
  pointer-events: none;
  padding: 0 60px;
}

/* ── Lightbox audio player ──────────────────────────────────────────────── */

.lb-audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 24px;
  width: 100%;
  max-width: 380px;
}

.lb-audio-art {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(201,164,82,0.08);
  border: 1px solid rgba(201,164,82,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.lb-audio-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
}

.lb-audio-caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

#lightboxAudioEl {
  width: 100%;
  accent-color: var(--gold);
  background: transparent;
}

.lb-home-theme-btn {
  margin-top: 8px;
  background: rgba(201,164,82,0.1);
  border: 1px solid rgba(201,164,82,0.3);
  border-radius: 20px;
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.lb-home-theme-btn:active {
  background: rgba(201,164,82,0.22);
}

/* ── Lightbox video sizing ──────────────────────────────────────────────── */

#lightboxVideo {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 6px;
  background: #000;
}


/* ── Global FABs (appShell level — never clipped by screen overflow) ──── */

.global-fab {
  position: fixed;          /* fixed so it's always in viewport */
  right: 20px;
  bottom: calc(var(--nav-h, 72px) + var(--safe-bot, 0px) + 16px);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;             /* above screens (z:1–200), below overlays (z:650+) */
  background: linear-gradient(135deg, #c9a452 0%, #e8c97a 45%, #a07c30 100%);
  box-shadow:
    0 4px 20px rgba(201,164,82,0.5),
    0 1px 4px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,240,180,0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34,1.28,0.64,1),
              box-shadow 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.global-fab:active {
  transform: scale(0.91);
  box-shadow: 0 2px 10px rgba(201,164,82,0.35);
}

/* Diaries screen has no bottom nav, lower the FAB */
#globalDiaryFab {
  bottom: calc(var(--safe-bot, 0px) + 24px);
}

/* ── Media Add Overlay ───────────────────────────────────────────────────── */

#mediaAddOverlay {
  position: absolute;
  inset: 0;
  z-index: 661;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(8,6,8,0.0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity         0.4s cubic-bezier(0.4,0,0.2,1),
    backdrop-filter 0.4s ease,
    background      0.4s ease;
}

#mediaAddOverlay.press-open {
  opacity: 1;
  pointer-events: all;
  background: rgba(8,6,8,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#mediaAddOverlay.press-open .press-sheet {
  transform: translateY(0);
}

/* ── Media type selector row ─────────────────────────────────────────────── */

.media-type-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.media-type-btn {
  flex: 1;
  padding: 11px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,164,82,0.15);
  color: var(--text-dim);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.media-type-btn.active {
  background: rgba(201,164,82,0.14);
  border-color: rgba(201,164,82,0.5);
  color: var(--gold);
}


/* her section */
:root {
  --her:       #c8693a;
  --her-light: #e89060;
  --parchment: #f4e4c8;
  --ink:       #281808;
  --ink-dim:   rgba(40,24,8,0.6);
}

/* ── Nav gem ─────────────────────────────────────────────────────────────── */
.nav-her-btn {
  flex: 0 0 64px; height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; border: none; background: none;
  -webkit-tap-highlight-color: transparent; position: relative; z-index: 5;
}
.nav-her-disc {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e89060 0%, #c8693a 50%, #8c3d18 100%);
  box-shadow: 0 0 0 2px rgba(200,105,58,0.3), 0 0 16px 5px rgba(200,105,58,0.55),
              0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,210,170,0.5);
  display: flex; align-items: center; justify-content: center;
  margin-top: -10px;
  animation: her-gem-pulse 2.8s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.34,1.28,0.64,1);
}
@keyframes her-gem-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(200,105,58,0.3), 0 0 16px 5px rgba(200,105,58,0.55), 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,210,170,0.5); }
  50%     { box-shadow: 0 0 0 4px rgba(200,105,58,0.1), 0 0 30px 10px rgba(200,105,58,0.7), 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,210,170,0.5); }
}
.nav-her-btn:active .nav-her-disc { animation: none; transform: scale(0.9); }
.nav-her-disc svg { color: rgba(255,238,210,0.95); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.nav-her-label {
  font-size: 9px; font-weight: 300; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--her); margin-top: 1px;
}
.nav-her-btn.active .nav-her-label { color: var(--her-light); }

/* ── Her panel ───────────────────────────────────────────────────────────── */
#herPanel {
  position: absolute; inset: 0; z-index: 820;
  background: #080608; opacity: 0; transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.44s cubic-bezier(0.4,0,0.2,1), transform 0.44s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#herPanel.her-open { opacity: 1; transform: translateY(0); pointer-events: all; }

.her-topbar {
  flex-shrink: 0; height: calc(var(--safe-top) + 52px); padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 20px; padding-right: 16px;
  border-bottom: 1px solid rgba(200,105,58,0.15); background: rgba(8,6,8,0.96);
}
.her-topbar-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 24px; color: var(--her); letter-spacing: 0.1em;
  text-shadow: 0 0 24px rgba(200,105,58,0.4);
}
.her-close-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(200,105,58,0.1); border: 1px solid rgba(200,105,58,0.25);
  color: var(--her); font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s;
}
.her-close-btn:active { background: rgba(200,105,58,0.28); }

/* ── Composite grid ──────────────────────────────────────────────────────── */
.her-composite { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* Face: 4 vertical stripes — top 58% */
.her-stripes {
  display: flex; flex-direction: row; flex: 0 0 58%; min-height: 0; gap: 2px; padding: 2px 2px 0;
}
.her-stripe {
  flex: 1; position: relative; overflow: hidden;
  border-radius: 6px 6px 0 0; background: #14101a;
  -webkit-tap-highlight-color: transparent;
}
.her-stripe-bg {
  position: absolute; inset: 0;
  background-size: auto 110%;
  background-position: 50% top;
  background-repeat: no-repeat;
  transition: transform 0.35s ease, background-position 0.1s linear;
}
.her-stripe:active .her-stripe-bg { transform: scale(1.04); }
.her-stripe-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,6,8,0.04) 0%, rgba(8,6,8,0.08) 35%, rgba(8,6,8,0.72) 78%, rgba(8,6,8,0.9) 100%);
  border-right: 1px solid rgba(200,105,58,0.15);
}
.her-stripe:last-child .her-stripe-veil { border-right: none; }

/* Transparent tap zone — sits below admin buttons */
.her-stripe-tap { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* Vertical label — sits at top of each stripe */
.her-stripe-label {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(11px, 3.5vw, 15px); font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(210,218,230,0.97);
  background: rgba(12,10,18,0.72);
  padding: 3px 10px 2px;
  border-radius: 30px;
  border: 1px solid rgba(180,190,210,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 12px rgba(200,215,240,0.7), 0 1px 3px rgba(0,0,0,0.9);
  box-shadow: 0 2px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(220,230,255,0.12);
  white-space: nowrap; pointer-events: none; z-index: 2;
}

/* Admin controls container (top-right of each stripe) */
.her-stripe-admin {
  position: absolute; top: 7px; right: 5px; z-index: 3;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}
/* Upload + delete icon buttons */
.her-admin-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(8,6,8,0.65); border: 1px solid rgba(200,105,58,0.4);
  color: rgba(200,105,58,0.9); display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s;
}
.her-admin-btn:active { background: rgba(200,105,58,0.25); }
.her-admin-btn--del { color: rgba(220,80,80,0.85); border-color: rgba(220,80,80,0.35); }
.her-admin-btn--del:active { background: rgba(220,80,80,0.2); }

/* Progress bar */
.her-upload-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: var(--her); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease; border-radius: 0 0 6px 6px;
}
.her-upload-progress.uploading { transform: scaleX(0.6); transition: transform 1.8s ease; }
.her-upload-progress.done      { transform: scaleX(1);   transition: transform 0.2s ease; }

/* Body tile — wide horizontal bar */
.her-body-tile {
  flex: 0 0 42%; position: relative; overflow: hidden;
  margin: 0 2px 2px; border-radius: 0 0 6px 6px; background: #14101a;
  -webkit-tap-highlight-color: transparent;
}
.her-body-tile .her-stripe-bg {
  background-size: 100% auto;
  background-position: center 50%;
}
.her-body-tile:active .her-stripe-bg { transform: scale(1.02); }
.her-body-veil {
  background: linear-gradient(to bottom, rgba(8,6,8,0.0) 0%, rgba(8,6,8,0.08) 40%, rgba(8,6,8,0.52) 78%, rgba(8,6,8,0.72) 100%);
  border-right: none;
}
/* Body label — centred at bottom, no pill, bare elegant text */
.her-body-label {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(12px, 3.6vw, 16px); font-weight: 600;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(220, 225, 238, 0.93);
  background: none; border: none; padding: 0;
  text-shadow:
    0 0 22px rgba(200,215,240,0.45),
    0 1px 8px rgba(0,0,0,0.98);
  pointer-events: none; z-index: 2;
}
.her-body-admin { top: 12px; right: 12px; flex-direction: row; gap: 7px; }

/* ── Detail panel ────────────────────────────────────────────────────────── */
#herDetail {
  position: absolute; inset: 0; z-index: 830; background: #080608;
  transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#herDetail.her-detail-open { transform: translateX(0); }

.her-detail-header {
  flex-shrink: 0; height: calc(var(--safe-top) + 52px); padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 14px;
  padding-left: 14px; padding-right: 20px;
  border-bottom: 1px solid rgba(200,105,58,0.15); background: rgba(8,6,8,0.97);
}
.her-detail-back {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(200,105,58,0.1); border: 1px solid rgba(200,105,58,0.25);
  color: var(--her); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.her-detail-back:active { background: rgba(200,105,58,0.28); }
.her-detail-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px; font-weight: 300; color: var(--her); letter-spacing: 0.1em;
}
.her-detail-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--safe-bot) + 24px);
}
.her-detail-scroll::-webkit-scrollbar { display: none; }
.her-detail-hero-legacy-removed { display: none; /* replaced by envelope section above */ }

/* ── Parchment letter ────────────────────────────────────────────────────── */
.her-letter {
  margin: 18px 16px 6px; border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(40,24,8,0.05) 27px, rgba(40,24,8,0.05) 28px),
    linear-gradient(148deg, #f0e0c0 0%, #e6d0a8 35%, #f4e4c8 60%, #ecdcb0 100%);
  border: 1px solid rgba(160,110,50,0.38);
  box-shadow: 0 6px 28px rgba(0,0,0,0.6), inset 0 0 36px rgba(40,24,8,0.07);
  position: relative; overflow: hidden;
}
.her-letter::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(40,24,8,0.13) 100%);
  pointer-events: none; border-radius: 10px;
}
.her-letter-inner { padding: 24px 22px 30px; position: relative; }
.her-letter-date {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.12em; margin-bottom: 14px; opacity: 0.65;
}
.her-letter-body {
  font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--ink);
  line-height: 2; letter-spacing: 0.02em; white-space: pre-wrap; word-break: break-word;
}
.her-letter-sig {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 16px; color: rgba(40,24,8,0.65); margin-top: 20px; text-align: right;
}
.her-letter-seal {
  position: absolute; bottom: 14px; right: 18px; width: 34px; height: 34px;
  border-radius: 50%; background: radial-gradient(circle at 40% 36%, #e89060 0%, #aa4818 70%);
  opacity: 0.3; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ── Envelope + wax seal mechanic ───────────────────────────────────── */
.her-envelope {
  margin: -32px 18px 28px;
  border-radius: 3px 3px 14px 14px;
  overflow: hidden;
  box-shadow:
    0 16px 56px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(180,140,70,0.2);
  position: relative; z-index: 2;
}
/* Decorative corner marks on the envelope */
.her-envelope::before {
  content: '';
  position: absolute;
  inset: 54px 0 0;
  background:
    linear-gradient(to bottom right, transparent 49.5%, rgba(160,110,50,0.18) 50%, transparent 50.5%),
    linear-gradient(to bottom left,  transparent 49.5%, rgba(160,110,50,0.18) 50%, transparent 50.5%);
  pointer-events: none; z-index: 1;
}
.her-envelope-flap {
  width: 100%; height: 70px;
  background: linear-gradient(155deg, #dcc482 0%, #c49842 45%, #a87030 80%, #8c5820 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.45s ease;
  will-change: transform, opacity;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  position: relative; z-index: 2;
}
/* Flap inner crease line */
.her-envelope-flap::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px;
  background: rgba(80,40,0,0.18);
  border-radius: 2px;
}
.her-envelope-body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(40,24,8,0.045) 28px, rgba(40,24,8,0.045) 29px),
    linear-gradient(148deg, #f5e8cc 0%, #ead4a4 30%, #f2e2be 58%, #e8d4a8 100%);
  border: 1px solid rgba(160,110,50,0.45);
  border-top: none;
  padding: 30px 24px 30px;
  position: relative; z-index: 2;
  box-shadow: inset 0 6px 22px rgba(40,24,8,0.07);
}
.her-wax-seal {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0 auto;
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease;
}
.her-wax-seal:active { transform: scale(0.88); }
.her-wax-seal svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55)) drop-shadow(0 1px 3px rgba(160,60,0,0.4));
  transition: transform 0.48s ease, opacity 0.38s ease;
  width: 56px; height: 56px;
}
.her-seal-hint {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11px; color: rgba(80,30,0,0.42); letter-spacing: 0.22em;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Poetry — hidden by default */
.her-envelope-letter {
  overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height 0.7s cubic-bezier(0.4,0,0.2,1),
              opacity 0.5s ease 0.18s,
              margin-top 0.48s ease;
}
.her-envelope-letter .her-letter-date {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; color: rgba(80,30,0,0.52); letter-spacing: 0.2em;
  margin-bottom: 20px; text-align: center;
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.her-envelope-letter .her-letter-date::before,
.her-envelope-letter .her-letter-date::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(160,110,50,0.35), transparent);
}
.her-envelope-letter .her-letter-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 400;
  color: rgba(22,8,2,0.9);
  line-height: 2.1; letter-spacing: 0.04em;
  white-space: pre-wrap; word-break: break-word;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-indent: 1.4em;
}
.her-envelope-letter .her-letter-body::-webkit-scrollbar { display: none; }
.her-envelope-letter .her-letter-sig {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 18px; color: rgba(40,16,2,0.6);
  margin-top: 28px; text-align: right; letter-spacing: 0.14em;
  padding-top: 14px;
  border-top: 1px solid rgba(160,110,50,0.22);
}
/* OPEN state */
.her-envelope.her-envelope-open .her-envelope-flap {
  transform: rotateX(180deg);
  opacity: 0;
}
.her-envelope.her-envelope-open .her-wax-seal svg {
  transform: scale(0.6) rotate(-14deg);
  opacity: 0.18;
}
.her-envelope.her-envelope-open .her-seal-hint { opacity: 0; }
.her-envelope.her-envelope-open .her-envelope-letter {
  max-height: 2000px;
  opacity: 1;
  margin-top: 22px;
}

/* ── Detail banner ───────────────────────────────────────────────────────── */
.her-detail-hero {
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center;
  background-color: #0e0b14;
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
}
/* Allow children (admin button) to be tapped */
.her-detail-hero > * { pointer-events: all; }
/* Cinematic fade into the dark background below */
.her-detail-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,6,8,0) 40%,
    rgba(8,6,8,0.55) 75%,
    rgba(8,6,8,0.98) 100%
  );
  pointer-events: none;
}
/* Admin upload button — bottom-right of banner */
.her-detail-hero-upload {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  background: rgba(8,6,8,0.7); border: 1px solid rgba(200,105,58,0.4);
  color: rgba(200,105,58,0.95); border-radius: 20px;
  padding: 6px 12px 6px 10px;
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s;
  pointer-events: all;
}
.her-detail-hero-upload:active { background: rgba(200,105,58,0.22); }
/* Placeholder when no photo — subtle texture */
.her-detail-hero.her-detail-hero--empty {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(200,105,58,0.04) 0px, rgba(200,105,58,0.04) 1px,
      transparent 1px, transparent 18px
    ),
    #0e0b14;
  display: flex; align-items: center; justify-content: center;
}

/* ── Gallery (kept for CSS integrity, elements removed from DOM) ─────────── */
.her-gallery-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; color: rgba(200,105,58,0.65); letter-spacing: 0.1em;
  padding: 10px 18px 8px; border-top: 1px solid rgba(200,105,58,0.1); margin-top: 8px;
}
.her-gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 0 0 6px; }
.her-gallery-cell { aspect-ratio: 1; overflow: hidden; background: rgba(200,105,58,0.06); cursor: pointer; }
.her-gallery-cell img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s ease; }
.her-gallery-cell:active img { transform: scale(1.06); }
.her-gallery-empty {
  grid-column: 1/-1; padding: 28px 20px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: rgba(200,105,58,0.38);
}

/* activity log (inside side menu) */
.activity-log-wrap {
  padding: 10px 20px 4px;
}
.activity-log-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(201,164,82,0.45); margin-bottom: 8px;
}
.activity-log-head svg { opacity: 0.6; flex-shrink: 0; }
.activity-log-list {
  max-height: 160px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.activity-log-list::-webkit-scrollbar { display: none; }
.activity-log-item {
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 2px;
}
.activity-log-item:last-child { border-bottom: none; }
.activity-log-msg {
  font-size: 12px; color: rgba(237,229,216,0.7); line-height: 1.4;
}
.activity-log-time {
  font-size: 10px; color: rgba(237,229,216,0.28); letter-spacing: 0.06em;
}
.activity-log-empty {
  font-size: 11px; color: rgba(237,229,216,0.2); font-style: italic; padding: 4px 0 8px;
}

/* delete confirm modal */
#deleteConfirmBackdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.delete-confirm-modal {
  background: var(--bg2); border: 1px solid rgba(220,80,80,0.3);
  border-radius: 14px; padding: 28px 24px 22px;
  max-width: 300px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.delete-confirm-title {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-weight: 300; color: var(--text); margin-bottom: 6px;
}
.delete-confirm-sub {
  font-size: 13px; color: var(--text-dim); margin-bottom: 24px;
}
.delete-confirm-row { display: flex; gap: 12px; }
.delete-confirm-yes {
  flex: 1; padding: 11px; border-radius: 8px;
  background: rgba(220,60,60,0.15); border: 1px solid rgba(220,60,60,0.4);
  color: rgb(240,100,100); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.18s;
}
.delete-confirm-yes:active { background: rgba(220,60,60,0.3); }
.delete-confirm-no {
  flex: 1; padding: 11px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-dim);
  color: var(--text-dim); font-size: 14px; cursor: pointer; transition: background 0.18s;
}
.delete-confirm-no:active { background: rgba(255,255,255,0.08); }

/* media grid — delete button overlay on each cell (both users) */
.media-cell { position: relative; }
.media-cell-delete {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(220,80,80,0.4);
  color: rgba(240,100,100,0.9); font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s;
}
.media-cell:hover .media-cell-delete,
.media-cell:focus-within .media-cell-delete { opacity: 1; }
/* Always visible on touch devices */
@media (hover: none) { .media-cell-delete { opacity: 1; } }


/* media grid — delete button on each cell */
.media-del-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(10,6,6,0.72);
  border: 1px solid rgba(200,60,60,0.45);
  color: rgba(220,100,100,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4;
  opacity: 0;
  transition: opacity 0.18s;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Always show on touch devices (no hover) */
@media (hover: none) { .media-del-btn { opacity: 1; } }
.media-cell:hover .media-del-btn { opacity: 1; }
.media-del-btn:active { background: rgba(200,60,60,0.28); border-color: rgba(220,100,100,0.8); }

/* ── Lightbox delete button ──────────────────────────────────────────────── */
.lightbox-del-btn {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  left: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(10,6,6,0.65);
  border: 1px solid rgba(200,60,60,0.4);
  color: rgba(220,100,100,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s;
}
.lightbox-del-btn:active { background: rgba(200,60,60,0.28); }

/* delete confirm modal */
.del-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.del-confirm-modal {
  background: var(--bg2);
  border: 1px solid rgba(200,60,60,0.35);
  border-radius: 14px;
  padding: 28px 24px;
  width: 100%; max-width: 300px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8);
  text-align: center;
}
.del-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  color: var(--text); margin-bottom: 8px;
}
.del-confirm-sub {
  font-size: 13px; color: var(--text-dim); margin-bottom: 24px;
}
.del-confirm-row {
  display: flex; gap: 10px; justify-content: center;
}
.del-confirm-yes {
  flex: 1; padding: 11px 0;
  border-radius: 8px;
  background: rgba(200,60,60,0.18);
  border: 1px solid rgba(200,60,60,0.5);
  color: rgba(220,100,100,0.95);
  font-size: 14px; letter-spacing: 0.04em; cursor: pointer;
  transition: background 0.18s;
}
.del-confirm-yes:active { background: rgba(200,60,60,0.38); }
.del-confirm-no {
  flex: 1; padding: 11px 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 14px; cursor: pointer;
  transition: background 0.18s;
}
.del-confirm-no:active { background: rgba(255,255,255,0.1); }

/* activity log (inside side menu) */
.activity-log-wrap {
  padding: 12px 16px 8px;
}
.activity-log-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 8px;
}
.activity-log-list {
  max-height: 140px; overflow-y: auto;
  overflow-x: hidden;
}
.activity-log-list::-webkit-scrollbar { display: none; }
.activity-log-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.activity-log-item:last-child { border-bottom: none; }
.activity-log-msg {
  font-size: 12px; color: var(--text); line-height: 1.4;
}
.activity-log-ts {
  font-size: 10px; color: var(--text-dim); opacity: 0.65;
}
.activity-log-empty {
  font-size: 12px; color: var(--text-dim); opacity: 0.5;
  font-style: italic; padding: 4px 0;
}

/* her section — the vault */
:root {
  --her:       #c8693a;
  --her-light: #e89060;
}

/* ── Nav gem ─────────────────────────────────────────────────────────────── */
.nav-her-btn {
  flex: 0 0 64px;
  height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; border: none; background: none;
  -webkit-tap-highlight-color: transparent; position: relative; z-index: 5;
}
.nav-her-disc {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e89060 0%, #c8693a 50%, #8c3d18 100%);
  box-shadow:
    0 0 0 2px rgba(200,105,58,0.28),
    0 0 16px 5px rgba(200,105,58,0.5),
    0 4px 14px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,210,170,0.5);
  display: flex; align-items: center; justify-content: center;
  margin-top: -10px;
  animation: her-gem-pulse 2.8s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.34,1.28,0.64,1);
}
@keyframes her-gem-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(200,105,58,0.28), 0 0 16px 5px rgba(200,105,58,0.5), 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,210,170,0.5); }
  50%     { box-shadow: 0 0 0 4px rgba(200,105,58,0.1),  0 0 30px 10px rgba(200,105,58,0.68), 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,210,170,0.5); }
}
.screen:not(.active) .nav-her-disc { animation-play-state: paused; }
.nav-her-btn:active .nav-her-disc { animation: none; transform: scale(0.9); }
.nav-her-disc svg { color: rgba(255,238,210,0.95); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.nav-her-label {
  font-size: 9px; font-weight: 300; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--her); margin-top: 1px;
}

/* ── Her panel ───────────────────────────────────────────────────────────── */
#herPanel {
  position: absolute; inset: 0; z-index: 820;
  background: #080608; opacity: 0; transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.44s cubic-bezier(0.4,0,0.2,1),
              transform 0.44s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  display: flex; flex-direction: column; overflow: hidden;
}
#herPanel.her-open { opacity: 1; transform: translateY(0); pointer-events: all; }

.her-topbar {
  flex-shrink: 0;
  height: calc(var(--safe-top) + 52px); padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 20px; padding-right: 16px;
  border-bottom: 1px solid rgba(200,105,58,0.15);
  background: rgba(8,6,8,0.96);
}
.her-topbar-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 24px; color: var(--her); letter-spacing: 0.1em;
  text-shadow: 0 0 24px rgba(200,105,58,0.35);
}
.her-close-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(200,105,58,0.1); border: 1px solid rgba(200,105,58,0.25);
  color: var(--her); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s;
}
.her-close-btn:active { background: rgba(200,105,58,0.28); }

/* ── Composite grid ──────────────────────────────────────────────────────── */
.her-composite {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}

/* 4-stripe row — top 58% */
.her-stripes {
  display: flex; flex: 0 0 58%; min-height: 0; gap: 2px; padding: 2px 2px 0;
}

.her-stripe {
  flex: 1; position: relative; overflow: hidden;
  border-radius: 6px 6px 0 0; background: #14101a;
  -webkit-tap-highlight-color: transparent;
}

/* Photo bg */
.her-stripe-bg {
  position: absolute; inset: 0;
  background-size: auto 110%;
  background-position: 50% top;
  background-repeat: no-repeat;
  transition: transform 0.4s ease, background-position 0.1s linear;
}
.her-stripe:active .her-stripe-bg { transform: scale(1.04); }

/* Dark gradient veil */
.her-stripe-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(8,6,8,0.04) 0%, rgba(8,6,8,0.1) 38%,
    rgba(8,6,8,0.7) 78%, rgba(8,6,8,0.88) 100%);
  border-right: 1px solid rgba(200,105,58,0.14);
}
.her-stripe:last-child .her-stripe-veil { border-right: none; }

/* Full-stripe invisible tap zone */
.her-stripe-tap {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
}

/* Vertical text label — at top */
.her-stripe-label {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(11px, 3.5vw, 15px); font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(210,218,230,0.97);
  background: rgba(12,10,18,0.72);
  padding: 3px 10px 2px;
  border-radius: 30px;
  border: 1px solid rgba(180,190,210,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 12px rgba(200,215,240,0.7), 0 1px 3px rgba(0,0,0,0.9);
  box-shadow: 0 2px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(220,230,255,0.12);
  white-space: nowrap; pointer-events: none; z-index: 2;
}

/* Admin zone — top-right of each stripe, contains upload + delete */
.her-stripe-admin {
  position: absolute; top: 6px; right: 5px; z-index: 3;
  display: flex; flex-direction: column; gap: 5px;
}
.her-admin-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(8,6,8,0.68);
  border: 1px solid rgba(200,105,58,0.38);
  color: rgba(200,105,58,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.18s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.her-admin-btn:active { background: rgba(200,105,58,0.24); }
.her-del-btn-el { border-color: rgba(200,60,60,0.4); color: rgba(220,100,100,0.9); }
.her-del-btn-el:active { background: rgba(200,60,60,0.2); }

/* Upload progress bar */
.her-upload-prog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: var(--her); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.her-upload-prog.uploading { transform: scaleX(0.6); transition: transform 1.8s ease; }
.her-upload-prog.done      { transform: scaleX(1);   transition: transform 0.18s ease; }

/* ── Body tile — bottom 42%, wide horizontal bar ───────────────────────── */
.her-body-tile {
  flex: 0 0 42%; position: relative; overflow: hidden;
  margin: 0 2px 2px; border-radius: 0 0 6px 6px;
  background: #14101a; -webkit-tap-highlight-color: transparent;
}
.her-body-tile .her-stripe-bg {
  background-size: 100% auto;
  background-position: center 50%;
}
.her-body-tile:active .her-stripe-bg { transform: scale(1.02); }
.her-body-veil {
  background: linear-gradient(to bottom,
    rgba(8,6,8,0.0) 0%, rgba(8,6,8,0.08) 40%,
    rgba(8,6,8,0.52) 78%, rgba(8,6,8,0.72) 100%);
  border-right: none;
}
/* Body label — centred at bottom, no pill, bare elegant text */
.her-body-label {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(12px, 3.6vw, 16px); font-weight: 600;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(220, 225, 238, 0.93);
  background: none; border: none; padding: 0;
  text-shadow:
    0 0 22px rgba(200,215,240,0.45),
    0 1px 8px rgba(0,0,0,0.98);
  pointer-events: none; z-index: 2;
}
/* her-body-label uses left:0/right:0 block layout for centering */
.her-body-admin { top: 10px; right: 10px; flex-direction: row; gap: 6px; }

/* ── Detail panel ────────────────────────────────────────────────────────── */
#herDetail {
  position: absolute; inset: 0; z-index: 830;
  background: #080608; transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
  will-change: transform; display: flex; flex-direction: column; overflow: hidden;
}
#herDetail.her-detail-open { transform: translateX(0); }

.her-detail-header {
  flex-shrink: 0;
  height: calc(var(--safe-top) + 52px); padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 14px;
  padding-left: 14px; padding-right: 20px;
  border-bottom: 1px solid rgba(200,105,58,0.15);
  background: rgba(8,6,8,0.97);
}
.her-detail-back {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(200,105,58,0.1); border: 1px solid rgba(200,105,58,0.25);
  color: var(--her); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  transition: background 0.18s;
}
.her-detail-back:active { background: rgba(200,105,58,0.28); }
.her-detail-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px; font-weight: 300; color: var(--her); letter-spacing: 0.1em;
}
.her-detail-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bot) + 24px);
}
.her-detail-scroll::-webkit-scrollbar { display: none; }

/* Hero banner */
.her-detail-hero {
  width: 100%; height: 260px;
  background-size: cover; background-position: center;
  background-color: #0e0b14; flex-shrink: 0;
  pointer-events: none; position: relative;
}
.her-detail-hero > * { pointer-events: all; }
.her-detail-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,6,8,0) 40%, rgba(8,6,8,0.55) 75%, rgba(8,6,8,0.98) 100%);
  pointer-events: none;
}

/* ── Parchment letter ────────────────────────────────────────────────────── */
.her-letter {
  margin: 18px 16px 6px; border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px,
      rgba(40,24,8,0.05) 27px, rgba(40,24,8,0.05) 28px),
    linear-gradient(148deg, #f0e0c0 0%, #e6d0a8 35%, #f4e4c8 60%, #ecdcb0 100%);
  border: 1px solid rgba(160,110,50,0.38);
  box-shadow: 0 6px 28px rgba(0,0,0,0.6), inset 0 0 36px rgba(40,24,8,0.07);
  position: relative; overflow: hidden;
}
.her-letter::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(40,24,8,0.12) 100%);
  pointer-events: none; border-radius: 10px;
}
.her-letter-inner { padding: 24px 22px 30px; position: relative; }
.her-letter-date {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11px; color: rgba(40,24,8,0.55); letter-spacing: 0.12em; margin-bottom: 14px;
}
.her-letter-body {
  font-family: 'Cormorant Garamond', serif; font-size: 15px;
  color: #281808; line-height: 2; letter-spacing: 0.02em;
  white-space: pre-wrap; word-break: break-word;
}
.her-letter-sig {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 16px; color: rgba(40,24,8,0.55); margin-top: 20px; text-align: right;
}
.her-letter-seal {
  position: absolute; bottom: 14px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #e89060 0%, #aa4818 70%);
  opacity: 0.28; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.her-gallery-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: rgba(200,105,58,0.6); letter-spacing: 0.1em;
  padding: 10px 18px 8px; border-top: 1px solid rgba(200,105,58,0.1); margin-top: 8px;
}
.her-gallery-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding-bottom: 6px;
}
.her-gallery-cell {
  aspect-ratio: 1; overflow: hidden;
  background: rgba(200,105,58,0.05); cursor: pointer;
}
.her-gallery-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.her-gallery-cell:active img { opacity: 0.8; }
.her-gallery-empty {
  grid-column: 1/-1; padding: 28px 20px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: rgba(200,105,58,0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HER PANEL — POSITION OFFSET SLIDERS
   Injected by JS (_herInjectAdminControls) when admin is logged in.
   ═══════════════════════════════════════════════════════════════════════════ */

.her-pos-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: linear-gradient(to top, rgba(8,6,8,0.78) 0%, transparent 100%);
  pointer-events: all;
}

.her-pos-bar--body {
  padding: 7px 14px;
}

.her-pos-label {
  font-size: 8px;
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
}

.her-pos-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2px;
  background: rgba(201,164,82,0.28);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  min-width: 0;
}

.her-pos-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(8,6,8,0.7);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(201,164,82,0.5);
}

.her-pos-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(8,6,8,0.7);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(201,164,82,0.5);
}

/* ── Media cell delete button (injected by _patchMediaGridDeletes) ────────── */
.media-cell-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 8;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(8,6,8,0.72);
  border: 1px solid rgba(220,80,80,0.4);
  color: rgba(220,80,80,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}
.media-cell:hover .media-cell-delete,
.media-cell:active .media-cell-delete { opacity: 1; }



/* notif permission banner */
#notifPermBanner {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 12px);
  left: 12px; right: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: none;
  align-items: flex-start;
  gap: 12px;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s;
  pointer-events: none;
}
#notifPermBanner.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.npb-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(201,164,82,0.1);
  border: 1px solid rgba(201,164,82,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.npb-text { flex: 1; }
.npb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--text);
  margin-bottom: 2px;
}
.npb-sub { font-size: 11px; color: var(--text-dim); font-weight: 200; line-height: 1.5; }
.npb-btns { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.npb-yes {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 400;
}
.npb-no {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 8px;
  text-align: center;
}

/* change password modal */
#changePwModal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 610;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
#changePwModal.open { transform: translateY(0); }
.chpw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-dim);
}
.chpw-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--text);
}
.chpw-close {
  font-size: 14px;
  color: var(--text-faint);
  padding: 6px 8px;
}
.chpw-body {
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chpw-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 8px;
}
.chpw-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s;
}
.chpw-input:focus { border-color: rgba(201,164,82,0.35); }
.chpw-err {
  font-size: 11px;
  color: rgba(220,80,80,0.85);
  min-height: 16px;
  letter-spacing: 0.06em;
}
.chpw-submit {
  margin-top: 8px;
  width: 100%;
  padding: 13px;
  background: var(--gold);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.chpw-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   EASTER EGGS
   ═══════════════════════════════════════════════════════════════════════════ */

/* EGG 1 — Kiss sequence overlay */
.kiss-overlay {
  position: absolute; inset: 0; z-index: 980;
  background: rgba(6,4,10,0.95);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.4s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.kiss-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.kiss-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-style: italic; font-weight: 300;
  color: rgba(255,210,220,0.95);
  letter-spacing: 0.05em;
  text-align: center;
}
.kiss-heart {
  font-size: 64px;
  color: rgba(230,80,100,0.9);
  line-height: 1;
}
@keyframes kissHeartPop {
  0%   { transform: scale(0.4); opacity: 0; }
  50%  { transform: scale(1.25); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
.kiss-hint {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  position: absolute; bottom: calc(var(--safe-bot) + 28px);
}

/* EGG 2 — Midnight card */
.midnight-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(20,10,30,0.9), rgba(40,20,60,0.7));
  border-color: rgba(160,100,220,0.25);
}
.midnight-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-style: italic; font-weight: 300;
  color: rgba(200,170,240,0.9);
  letter-spacing: 0.06em;
  padding: 8px 0;
}

/* EGG 3 — Proposal card */
.proposal-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(30,10,10,0.9), rgba(60,20,20,0.7));
  border-color: rgba(212,175,55,0.3);
}
.proposal-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic; font-weight: 300;
  color: rgba(240,210,130,0.9);
  letter-spacing: 0.04em;
  padding: 8px 0;
}

/* EGG 4 — Dynamic message card */
.dynamic-msg-card {
  text-align: center;
  border-color: rgba(212,175,55,0.12);
}
.dynamic-msg-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-style: italic; font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  padding: 4px 0;
}

/* EGG 5 — BUSINESS popup */
.business-backdrop {
  position: absolute; inset: 0; z-index: 970;
  background: rgba(6,4,10,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.business-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 320px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.business-emoji { font-size: 40px; margin-bottom: 4px; }
.business-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
  color: var(--text);
  letter-spacing: 0.02em;
}
.business-line-big {
  font-size: 22px; font-weight: 600;
  color: var(--gold);
}
.business-sub {
  font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}
.business-close {
  margin-top: 16px;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--gold); background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 10px 24px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTIMACY TRACKER — pink glow theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pink palette */
:root {
  --pink:      #e8749a;
  --pink-dim:  rgba(232,116,154,0.22);
  --pink-glow: rgba(232,116,154,0.45);
  --pink-soft: rgba(232,116,154,0.08);
}

/* Backdrop */
.tracker-backdrop {
  position: absolute; inset: 0; z-index: 600;
  background: rgba(18,4,14,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Slide-up panel */
.tracker-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 601;
  background: linear-gradient(180deg, rgba(28,10,20,0.98) 0%, var(--surface) 100%);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(232,116,154,0.25);
  box-shadow: 0 -8px 40px rgba(232,116,154,0.12);
  padding-bottom: calc(var(--safe-bot) + 16px);
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tracker-overlay::-webkit-scrollbar { display: none; }

/* Handle */
.tracker-handle {
  width: 36px; height: 4px;
  background: rgba(232,116,154,0.3);
  border-radius: 2px;
  margin: 12px auto 4px;
}

/* Header */
.tracker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 8px;
  border-bottom: 1px solid rgba(232,116,154,0.12);
}
.tracker-overlay-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic; font-weight: 300;
  color: var(--pink);
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px var(--pink-glow);
}
.tracker-close-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-soft); border: 1px solid rgba(232,116,154,0.2);
  border-radius: 50%; font-size: 14px; color: var(--pink);
  cursor: pointer;
}

/* Section */
.tracker-section { padding: 18px 20px 12px; }
.tracker-section-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(232,116,154,0.45); margin-bottom: 6px;
}
.tracker-date-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-style: italic;
  color: var(--text-dim); margin-bottom: 14px;
}

/* Yes/No question */
.tracker-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-style: italic; font-weight: 300;
  color: var(--text); margin-bottom: 18px;
}
.tracker-yn-row { display: flex; gap: 10px; }
.tracker-yn {
  flex: 1; padding: 13px 0;
  border-radius: var(--radius-sm);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background 0.18s, box-shadow 0.18s;
}
.tracker-yn-yes {
  background: var(--pink-dim);
  border: 1px solid rgba(232,116,154,0.5);
  color: var(--pink);
}
.tracker-yn-yes:active {
  background: rgba(232,116,154,0.32);
  box-shadow: 0 0 16px var(--pink-glow);
}
.tracker-yn-no {
  background: var(--surface2);
  border: 1px solid var(--border-dim);
  color: var(--text-faint);
}
.tracker-yn-no:active { background: var(--surface); }

/* Mood picker */
.tracker-moods {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.tracker-mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  border-radius: var(--radius-sm);
  background: var(--pink-soft);
  border: 1px solid rgba(232,116,154,0.18);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.tracker-mood-btn.active {
  background: var(--pink-dim);
  border-color: rgba(232,116,154,0.55);
  color: var(--pink);
  box-shadow: 0 0 14px rgba(232,116,154,0.2);
}
.tracker-mood-emoji { font-size: 24px; line-height: 1; }
.tracker-mood-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: inherit;
}

.tracker-submit-btn {
  width: 100%; padding: 13px 0;
  border-radius: var(--radius-sm);
  background: var(--pink-dim);
  border: 1px solid rgba(232,116,154,0.45);
  color: var(--pink);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; transition: background 0.18s, box-shadow 0.18s;
}
.tracker-submit-btn:disabled { opacity: 0.3; cursor: default; }
.tracker-submit-btn:not(:disabled):active {
  background: rgba(232,116,154,0.32);
  box-shadow: 0 0 20px var(--pink-glow);
}

/* Already logged */
.tracker-logged-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-style: italic;
  color: var(--text-dim); margin-bottom: 12px;
}
.tracker-edit-btn {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(232,116,154,0.5); text-decoration: underline;
  cursor: pointer; padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

/* Divider */
.tracker-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,116,154,0.18), transparent);
  margin: 0 20px;
}

/* Month calendar grid */
.tracker-month-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0;
}
.tracker-day-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 400;
  background: var(--surface2);
  border: 1px solid var(--border-dim);
  color: var(--text-faint);
}
.tracker-day-dot.day-yes-both {
  background: rgba(232,116,154,0.18);
  border-color: rgba(232,116,154,0.55);
  color: var(--pink);
  box-shadow: 0 0 8px rgba(232,116,154,0.3);
}
.tracker-day-dot.day-yes-one {
  background: rgba(232,116,154,0.08);
  border-color: rgba(232,116,154,0.28);
  color: rgba(232,116,154,0.6);
}
.tracker-day-dot.day-no {
  background: rgba(40,20,30,0.4);
  border-color: rgba(100,50,70,0.25);
  color: rgba(150,80,100,0.4);
}

.tracker-day-dot.day-tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.tracker-day-dot.day-tappable:active {
  border-color: rgba(232,116,154,0.5);
  box-shadow: 0 0 10px rgba(232,116,154,0.25);
}

/* subtle hint under the month label */
.tracker-month-hint {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(232,116,154,0.3); margin-bottom: 4px;
}
.tracker-stat-line {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.9;
}
.tracker-stat-line strong { color: var(--pink); font-weight: 500; }

/* Home card */
.tracker-home-card {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(40,8,24,0.95) 0%, rgba(28,6,18,0.98) 100%);
  border-color: rgba(232,116,154,0.35);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  4px 16px -4px  rgba(0,0,0,0.7),
    0  0   28px -4px  rgba(232,116,154,0.18),
    inset 0 1px 0     rgba(232,116,154,0.06);
}
.tracker-home-card:active {
  border-color: rgba(232,116,154,0.6);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,0.9),
    0  0   32px -2px  rgba(232,116,154,0.3);
}
.tracker-home-card .home-card-label {
  color: rgba(232,116,154,0.5);
}
.tracker-card-inner {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.tracker-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-none { background: var(--border); }
.dot-yes  { background: var(--pink); box-shadow: 0 0 8px var(--pink-glow); }
.dot-no   { background: rgba(180,80,80,0.5); }
.tracker-card-status { font-size: 13px; color: var(--text-dim); }
.tracker-card-month-avg { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.tracker-label { margin-bottom: 2px; }

/* Monthly summary modal */
.tracker-summary-backdrop {
  position: absolute; inset: 0; z-index: 700;
  background: rgba(18,4,14,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tracker-summary-modal {
  background: var(--surface);
  border: 1px solid rgba(232,116,154,0.2);
  border-radius: 20px;
  padding: 32px 24px 24px;
  width: 100%; max-width: 340px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(232,116,154,0.12), 0 4px 30px rgba(0,0,0,0.6);
}
.tracker-summary-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-style: italic;
  color: var(--pink); letter-spacing: 0.08em;
  text-shadow: 0 0 20px var(--pink-glow);
}
.tracker-summary-month {
  font-size: 13px; color: var(--text-dim); letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tracker-summary-body { text-align: left; margin: 4px 0; }
.tracker-summary-warn {
  font-size: 12px; color: rgba(232,116,154,0.5);
  font-style: italic;
}
.tracker-summary-btns {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.tracker-summary-dismiss {
  padding: 12px; border-radius: var(--radius-sm);
  background: rgba(180,60,60,0.1); border: 1px solid rgba(200,70,70,0.3);
  color: rgba(220,90,90,0.9);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.tracker-summary-keep {
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border-dim);
  color: var(--text-faint);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}