/* ═══════════════════════════════════════════════════════
   Safe & Ruang · Our Story · v3
   Themes: Navy (default) / Midnight / Sunset
═══════════════════════════════════════════════════════ */

:root{
  /* === default: Navy === */
  --navy-deep   : #0a1f44;
  --navy-mid    : #122a5e;
  --navy-soft   : #1c3878;
  --navy-ink    : #061330;
  --gold        : #c9a961;
  --gold-soft   : #d9bd7c;
  --champagne   : #e8d8b0;
  --ivory       : #f7f4ec;
  --ivory-warm  : #fbf7ee;
  --rose        : #d4a5a5;
  --rose-deep   : #a86a6a;
  --shadow      : 0 14px 40px -16px rgba(6,19,48,.45);
  --shadow-lg   : 0 30px 70px -28px rgba(6,19,48,.55);

  --bg-app      : var(--ivory);
  --bg-card     : #fff;
  --bg-input    : var(--ivory-warm);
  --text-main   : var(--navy-ink);
  --text-soft   : var(--navy-mid);
  --text-muted  : #7a8aa8;
  --border-soft : rgba(10,31,68,.08);

  --serif       : 'Cormorant Garamond', 'Noto Serif Thai', serif;
  --display     : 'Italiana', 'Cormorant Garamond', serif;
  --sans        : 'Sarabun', system-ui, sans-serif;

  --safe-top    : env(safe-area-inset-top, 0px);
  --safe-bot    : env(safe-area-inset-bottom, 0px);
}

/* === Theme: Midnight === */
[data-theme="midnight"]{
  --navy-deep   : #050714;
  --navy-mid    : #0d1226;
  --navy-soft   : #1a2238;
  --navy-ink    : #eaeefb;
  --gold        : #f0c878;
  --gold-soft   : #fad99b;
  --champagne   : #f5e3b8;
  --ivory       : #0d1226;
  --ivory-warm  : #161c33;
  --rose        : #e0a4ad;
  --rose-deep   : #ce6b7a;
  --shadow      : 0 14px 40px -16px rgba(0,0,0,.7);
  --shadow-lg   : 0 30px 70px -28px rgba(0,0,0,.85);

  --bg-app      : #0d1226;
  --bg-card     : #161c33;
  --bg-input    : #1d2440;
  --text-main   : #eaeefb;
  --text-soft   : #a8b1cc;
  --text-muted  : #6c7591;
  --border-soft : rgba(255,255,255,.06);
}

/* === Theme: Sunset === */
[data-theme="sunset"]{
  --navy-deep   : #4a1c4e;
  --navy-mid    : #6b2855;
  --navy-soft   : #8c365a;
  --navy-ink    : #2d0f3a;
  --gold        : #ffb86b;
  --gold-soft   : #ffce94;
  --champagne   : #ffe2b8;
  --ivory       : #fdf3e6;
  --ivory-warm  : #fef8ec;
  --rose        : #ff8c8c;
  --rose-deep   : #d65f6e;
  --shadow      : 0 14px 40px -16px rgba(74,28,78,.4);
  --shadow-lg   : 0 30px 70px -28px rgba(74,28,78,.5);

  --bg-app      : var(--ivory);
  --bg-card     : #fff;
  --bg-input    : var(--ivory-warm);
  --text-main   : var(--navy-ink);
  --text-soft   : var(--navy-mid);
  --text-muted  : #8a6982;
  --border-soft : rgba(74,28,78,.08);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-app);color:var(--text-main);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background .4s,color .4s}
body{overflow-x:hidden;min-height:100vh;min-height:100dvh}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}

.hidden{display:none !important}
.muted{color:var(--text-muted)}
.small{font-size:.82rem}

.screen{display:none !important}
.screen.active{display:block !important;min-height:100vh;min-height:100dvh}
.login-screen.active{display:flex !important}


/* ═══════════════════════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════════════════════ */
.login-screen{
  position:relative;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at top, var(--navy-soft) 0%, var(--navy-deep) 45%, var(--navy-ink) 100%);
  padding: calc(var(--safe-top) + 24px) 22px calc(var(--safe-bot) + 24px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  min-height:100vh;min-height:100dvh;
}
[data-theme="sunset"] .login-screen{
  background:radial-gradient(ellipse at top, #ffb86b 0%, #d65f6e 35%, #4a1c4e 100%);
}
.login-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:float 18s ease-in-out infinite}
.orb-1{width:360px;height:360px;background:#3a5fb0;top:-120px;left:-100px}
.orb-2{width:280px;height:280px;background:var(--gold);bottom:-80px;right:-80px;animation-delay:-6s;opacity:.18}
.orb-3{width:240px;height:240px;background:var(--rose);top:40%;right:30%;animation-delay:-12s;opacity:.22}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.08)}
  66%{transform:translate(-30px,40px) scale(.95)}
}

.login-card{
  position:relative;z-index:2;width:100%;max-width:420px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;padding:42px 30px 32px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.1);
  color:#f7f4ec;
  animation: cardIn .8s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

.brand{text-align:center;margin-bottom:28px}
.brand-mark{font-family:var(--display);font-size:34px;letter-spacing:.4em;color:var(--gold);text-indent:.4em}
.brand-line{width:60px;height:1px;background:var(--gold-soft);margin:14px auto;opacity:.6}
.brand-tag{font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);margin:0;opacity:.85}

.login-title{font-family:var(--display);text-align:center;font-size:clamp(32px,7vw,42px);font-weight:400;margin:0 0 8px;color:#f7f4ec;letter-spacing:.02em}
.login-sub{text-align:center;font-size:14px;line-height:1.6;color:rgba(247,244,236,.75);margin:0 0 26px}

.user-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.user-btn{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 12px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:#f7f4ec;transition:all .25s;
}
.user-btn:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.user-btn.active{
  background:linear-gradient(140deg, var(--gold) 0%, var(--gold-soft) 100%);
  color:var(--navy-deep);border-color:var(--gold);
  box-shadow:0 8px 24px -8px rgba(201,169,97,.5);
}
.user-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;background:rgba(255,255,255,.08)}
.user-btn.active .user-avatar{background:rgba(10,31,68,.15);color:var(--navy-deep)}
.user-name{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}

.pin-wrap{display:flex;flex-direction:column;gap:12px}
#pinInput{
  width:100%;padding:18px 20px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#f7f4ec;text-align:center;letter-spacing:.5em;
  font-size:22px;font-family:var(--serif);transition:all .25s;
}
#pinInput::placeholder{color:rgba(255,255,255,.3)}
#pinInput:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1)}

.login-go{
  width:100%;padding:16px;border-radius:14px;
  background:linear-gradient(140deg, var(--gold) 0%, var(--gold-soft) 100%);
  color:var(--navy-deep);font-weight:600;letter-spacing:.05em;font-size:15px;transition:all .25s;
  box-shadow:0 8px 22px -8px rgba(201,169,97,.5);
}
.login-go:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(201,169,97,.6)}
.login-go:active{transform:translateY(0)}

.login-error{text-align:center;font-size:13px;color:var(--rose);margin:4px 0 0;min-height:18px}
.login-foot{text-align:center;font-family:var(--serif);font-style:italic;font-size:13px;color:rgba(247,244,236,.5);margin:24px 0 0;letter-spacing:.1em}


/* ═══════════════════════════════════════════════════════
   APP — top bar
═══════════════════════════════════════════════════════ */
.app-screen{background:var(--bg-app)}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  background:rgba(247,244,236,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
[data-theme="midnight"] .topbar{background:rgba(13,18,38,.85)}
[data-theme="sunset"] .topbar{background:rgba(253,243,230,.9)}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.logo-mark{font-family:var(--display);font-size:18px;letter-spacing:.35em;color:var(--text-main);padding:6px 12px;border:1px solid var(--text-main);border-radius:6px;flex-shrink:0}
.logo-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-meta .dot{opacity:.4}
#welcomeUser{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--text-soft)}

.topbar-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
.icon-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:10px;
  background:transparent;color:var(--text-main);
  border:1px solid var(--border-soft);
  transition:all .2s;font-size:13px;
}
.icon-btn:hover{background:var(--text-main);color:var(--bg-app)}
.icon-btn.icon-only{padding:7px 9px}
.icon-btn.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}

/* sync indicator */
.sync-indicator{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.04);border:1px solid var(--border-soft);
  font-size:11px;letter-spacing:.05em;color:var(--text-soft);
  transition:all .25s;
}
[data-theme="midnight"] .sync-indicator{background:rgba(255,255,255,.06)}
.sync-indicator .sync-dot{width:7px;height:7px;border-radius:50%;background:#9aa6bf}
.sync-indicator.connected{background:rgba(86,156,108,.1);border-color:rgba(86,156,108,.25);color:#3e7050}
[data-theme="midnight"] .sync-indicator.connected{color:#7ed4a3}
.sync-indicator.connected .sync-dot{background:#56a06c;animation:syncPulse 2.5s ease-in-out infinite}
.sync-indicator.syncing{background:rgba(201,169,97,.12);border-color:rgba(201,169,97,.3);color:#9d8240}
.sync-indicator.syncing .sync-dot{background:var(--gold);animation:syncFastPulse 1s ease-in-out infinite}
.sync-indicator.error{background:rgba(168,106,106,.1);border-color:rgba(168,106,106,.25);color:var(--rose-deep)}
.sync-indicator.error .sync-dot{background:var(--rose-deep)}
.sync-indicator.paused{background:rgba(154,166,191,.1);border-color:rgba(154,166,191,.2);color:#7a8aa8}
@keyframes syncPulse{0%,100%{box-shadow:0 0 0 0 rgba(86,156,108,.4)}50%{box-shadow:0 0 0 5px rgba(86,156,108,0)}}
@keyframes syncFastPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
@media (max-width:480px){
  .sync-indicator .sync-text{display:none}
  .logo-meta .dot, #daysTogether{display:none}
}


/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,169,97,.25) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-deep) 60%, var(--navy-ink) 100%);
  color:#f7f4ec;
  padding:60px 24px 64px;
  overflow:hidden;text-align:center;
}
[data-theme="midnight"] .hero{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(240,200,120,.2) 0%, transparent 55%),
    linear-gradient(160deg, #050714 0%, #0d1226 100%);
}
[data-theme="sunset"] .hero{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,184,107,.4) 0%, transparent 55%),
    linear-gradient(160deg, #d65f6e 0%, #6b2855 60%, #4a1c4e 100%);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.06) 0%, transparent 35%),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.015) 6px 7px);
  pointer-events:none;
}
.hero-content{position:relative;z-index:2;max-width:680px;margin:0 auto}
.hero-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--gold-soft);margin:0 0 12px}
.hero-couple{font-family:var(--display);font-size:clamp(46px,11vw,78px);font-weight:400;margin:0 0 26px;letter-spacing:.04em;line-height:1}
.hero-couple .amp{color:var(--gold);font-style:italic;font-family:var(--serif);margin:0 .1em}
.hero-counter{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.count-block{
  min-width:88px;padding:14px 18px;
  border:1px solid rgba(232,216,176,.25);border-radius:14px;
  background:rgba(255,255,255,.03);
}
.count-block span{display:block;font-family:var(--display);font-size:36px;color:var(--gold-soft);line-height:1}
.count-block em{display:block;font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,244,236,.6);margin-top:6px}

.hero-next{display:inline-flex;align-items:center;gap:14px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:13px}
.next-label{color:rgba(247,244,236,.65);letter-spacing:.1em}
.next-count{color:var(--gold-soft);font-weight:600}

.milestone-banner{
  display:inline-block;margin-top:18px;padding:10px 22px;border-radius:999px;
  background:linear-gradient(140deg, var(--gold), var(--gold-soft));
  color:var(--navy-deep);font-weight:600;font-size:13px;letter-spacing:.05em;
  box-shadow:0 8px 24px -8px rgba(201,169,97,.6);
  animation:bannerPulse 3s ease-in-out infinite;
}
@keyframes bannerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}


/* ═══════════════════════════════════════════════════════
   ON THIS DAY
═══════════════════════════════════════════════════════ */
.onthisday{
  margin:18px 16px 0;padding:14px 18px;border-radius:14px;
  background:linear-gradient(140deg, var(--gold) 0%, var(--gold-soft) 100%);
  color:var(--navy-deep);
  box-shadow:var(--shadow);
  animation:slideDown .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.otd-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.3em;font-size:10px;font-weight:600;opacity:.7;margin-bottom:6px}
.onthisday h4{font-family:var(--display);font-size:22px;font-weight:400;margin:0 0 4px}
.onthisday p{font-size:13px;margin:0;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.onthisday .otd-link{cursor:pointer}


/* ═══════════════════════════════════════════════════════
   SUB-TABS (top, changes by active group)
═══════════════════════════════════════════════════════ */
.subtabs{
  display:flex;gap:6px;justify-content:center;align-items:center;
  padding:14px 14px 4px;
  position:sticky;top:calc(var(--safe-top) + 56px);z-index:40;
  background:linear-gradient(to bottom, var(--bg-app) 70%, transparent);
  min-height:48px;
}
.subtab-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;animation:fadeIn .25s}
.subtab-group.hidden{display:none}

.tab{
  padding:8px 14px;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:.03em;
  background:transparent;color:var(--text-soft);
  border:1px solid var(--border-soft);
  transition:all .22s;white-space:nowrap;cursor:pointer;
}
.tab:hover{background:rgba(0,0,0,.06)}
[data-theme="midnight"] .tab:hover{background:rgba(255,255,255,.05)}
.tab.active{
  background:var(--text-main);color:var(--bg-app);
  border-color:var(--text-main);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.4);
}

.tab-panel{display:none;padding:18px 20px 120px;max-width:980px;margin:0 auto}
.tab-panel.active{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════
   BOTTOM NAVIGATION (5 main groups)
═══════════════════════════════════════════════════════ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-around;align-items:stretch;
  background:var(--bg-app);
  border-top:1px solid var(--border-soft);
  padding:6px 4px calc(8px + var(--safe-bottom, 0px));
  box-shadow:0 -2px 14px -4px rgba(10,31,68,.08);
}
[data-theme="midnight"] .bottom-nav{background:var(--bg-app);box-shadow:0 -2px 14px -4px rgba(0,0,0,.4)}
[data-theme="sunset"] .bottom-nav{background:var(--bg-app);box-shadow:0 -2px 14px -4px rgba(0,0,0,.3)}

.bnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;
  background:transparent;background-color:transparent;
  border:none;cursor:pointer;
  color:var(--text-soft);transition:color .2s, transform .2s;position:relative;
  border-radius:8px;min-height:52px;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-appearance:none;appearance:none;
  outline:none;
  font-family:inherit;
  box-shadow:none;
}
.bnav-btn:hover{color:var(--text-main);background:transparent}
.bnav-btn:focus{outline:none;background:transparent;box-shadow:none}
.bnav-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.bnav-btn:active{transform:scale(.92);background:transparent}
.bnav-btn.active{color:var(--gold);background:transparent}
.bnav-btn.active .bnav-ico{transform:scale(1.1)}

.bnav-ico{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  line-height:1;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bnav-ico svg{width:22px;height:22px;display:block}
.bnav-lbl{
  font-size:10px;font-weight:500;letter-spacing:.02em;
  font-family:'Sarabun',sans-serif;
}

.bnav-badge{
  position:absolute;top:2px;right:18%;
  min-width:16px;height:16px;padding:0 4px;
  background:#e63946;color:#fff;
  border-radius:999px;font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg-app);
}
.bnav-badge.hidden{display:none}

/* ═══════════════════════════════════════════════════════
   FLOATING ACTION BUTTON (Add Story)
═══════════════════════════════════════════════════════ */
.fab-add{
  position:fixed;
  right:20px;
  bottom:calc(78px + var(--safe-bottom, 0px));
  z-index:55;
  width:56px;height:56px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  border:none;cursor:pointer;
  box-shadow:0 8px 22px -6px rgba(201,169,97,.55), 0 4px 10px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.fab-add:hover{transform:scale(1.08) rotate(90deg)}
.fab-add:active{transform:scale(.95)}
.fab-plus{
  font-size:30px;font-weight:300;line-height:1;
  margin-top:-2px;
}

/* Hide FAB when on Add or Settings tab */
.fab-add.hidden{display:none}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — desktop layout
═══════════════════════════════════════════════════════ */
@media (min-width: 768px){
  .bottom-nav{
    /* On desktop: still bottom but more padded, narrower */
    max-width:680px;left:50%;transform:translateX(-50%);
    border-radius:18px 18px 0 0;
    border:1px solid var(--border-soft);
    border-bottom:none;
    box-shadow:0 -4px 24px -8px rgba(0,0,0,.15);
  }
  .bnav-lbl{font-size:11px}
  .bnav-ico{font-size:22px}
  .fab-add{
    right:calc(50% - 360px);
    bottom:90px;
  }
}


/* ═══════════════════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════════════════ */
.timeline-head{margin-bottom:18px;text-align:center}
.timeline-head h3{font-family:var(--display);font-size:30px;font-weight:400;margin:0 0 6px;color:var(--text-main);letter-spacing:.02em}

.search-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.search-bar{display:flex;align-items:center;gap:8px;width:100%;max-width:480px}
#searchInput{
  flex:1;padding:10px 16px;border-radius:999px;
  border:1px solid var(--border-soft);background:var(--bg-input);
  color:var(--text-main);font-size:16px; /* 16px+ prevents iOS zoom on focus */
}
@media (min-width:600px){
  #searchInput{font-size:14px}
}
#searchInput:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,97,.15)}

.filter-toggle{
  position:relative;width:42px;height:42px;border-radius:50%;
  background:var(--bg-input);border:1px solid var(--border-soft);
  color:var(--text-soft);transition:all .2s;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.filter-toggle:hover{border-color:var(--gold);color:var(--text-main)}
.filter-toggle.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.filter-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--rose-deep);color:#fff;
  font-size:10px;font-weight:700;line-height:18px;text-align:center;
}

.filter-panel{
  margin:14px auto 0;max-width:680px;
  background:var(--bg-card);border-radius:18px;padding:18px;
  box-shadow:var(--shadow);border:1px solid var(--border-soft);
  animation:fadeIn .3s;
}
.filter-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-bottom:12px}
.filter-row:last-child{margin-bottom:0}
.filter-field{display:flex;flex-direction:column;gap:4px}
.filter-field.full{grid-column:1 / -1}
.filter-field label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-soft);font-weight:600}
.filter-field select{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border-soft);background:var(--bg-input);color:var(--text-main);
  font-size:14px;
}
.filter-field select:focus{outline:none;border-color:var(--gold)}
.filter-mood-row{display:flex;flex-wrap:wrap;gap:6px}
.filter-mood{
  padding:6px 12px;border-radius:999px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  font-size:14px;line-height:1;transition:all .2s;color:var(--text-main);
}
.filter-mood:hover{transform:translateY(-1px)}
.filter-mood.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
@media (max-width:480px){
  .filter-row{grid-template-columns:repeat(3, 1fr)}
  .filter-mood{padding:5px 10px;font-size:13px}
}

.timeline{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:22px}

.story-card{
  position:relative;background:var(--bg-card);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);
  cursor:pointer;transition:all .35s cubic-bezier(.2,.9,.3,1);
  border:1px solid var(--border-soft);
}
.story-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

.story-cover{aspect-ratio: 4/3;background:linear-gradient(135deg, var(--navy-mid), var(--navy-deep));position:relative;overflow:hidden}
.story-cover img{width:100%;height:100%;object-fit:cover}
.story-cover.placeholder::after{content:'♡';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;color:rgba(232,216,176,.4);font-family:var(--serif)}

.story-month-tag{position:absolute;top:14px;left:14px;background:rgba(10,31,68,.92);color:var(--gold-soft);font-family:var(--display);font-size:14px;letter-spacing:.2em;padding:6px 12px;border-radius:6px;backdrop-filter:blur(10px)}

.story-mood-emoji{position:absolute;top:14px;right:14px;font-size:24px;background:rgba(255,255,255,.95);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}

.story-body{padding:18px 20px 20px}
.story-num{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--gold);letter-spacing:.3em;text-transform:uppercase}
.story-title{font-family:var(--display);font-size:22px;font-weight:400;margin:6px 0 10px;color:var(--text-main);line-height:1.2}
.story-snippet{font-size:14px;line-height:1.6;color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--text-muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.empty-state{text-align:center;padding:80px 20px}
.empty-art{font-family:var(--serif);font-size:80px;color:var(--gold-soft);opacity:.5;line-height:1}
.empty-state p{font-family:var(--serif);font-size:18px;color:var(--text-soft);margin:18px 0 22px;line-height:1.7}


/* ═══════════════════════════════════════════════════════
   YEAR VIEW
═══════════════════════════════════════════════════════ */
.year-view{display:flex;flex-direction:column;gap:32px;max-width:880px;margin:0 auto}
.year-block{
  background:var(--bg-card);border-radius:20px;padding:24px;
  box-shadow:var(--shadow);border:1px solid var(--border-soft);
}
.year-title{
  font-family:var(--display);font-size:36px;font-weight:400;
  margin:0 0 4px;color:var(--text-main);letter-spacing:.02em;text-align:center;
}
.year-meta{text-align:center;font-family:var(--serif);font-style:italic;color:var(--text-muted);font-size:13px;margin-bottom:18px;letter-spacing:.1em}
.year-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px}
.year-cell{
  aspect-ratio:1;border-radius:10px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  position:relative;cursor:pointer;transition:all .2s;
}
.year-cell:hover{border-color:var(--gold);transform:scale(1.05)}
.year-cell.filled{
  background:linear-gradient(140deg, var(--navy-mid), var(--navy-deep));
  color:var(--gold-soft);border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.3);
}
.year-cell.filled .year-mood{position:absolute;top:4px;right:6px;font-size:14px}
.year-cell.future{opacity:.3;cursor:default}
.year-cell.future:hover{transform:none;border-color:var(--border-soft)}
@media (min-width:600px){
  .year-grid{grid-template-columns:repeat(6, 1fr)}
}
@media (min-width:900px){
  .year-grid{grid-template-columns:repeat(12, 1fr)}
}


/* ═══════════════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════════════ */
.form-card,.settings-card{
  max-width:680px;margin:0 auto;background:var(--bg-card);border-radius:22px;padding:32px 28px;
  box-shadow:var(--shadow);border:1px solid var(--border-soft);
}
.form-card h3,.settings-card h3{font-family:var(--display);font-size:26px;font-weight:400;margin:0 0 20px;color:var(--text-main)}

.field{margin-bottom:18px}
.field label{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px;font-weight:600}
.field .hint{text-transform:none;letter-spacing:0;font-weight:400;font-style:italic;color:var(--text-muted);font-size:11px;margin-left:4px}
.field input[type=text],
.field input[type=number],
.field input[type=search],
.field select,
.field textarea{
  width:100%;padding:13px 16px;border-radius:12px;
  border:1px solid var(--border-soft);background:var(--bg-input);color:var(--text-main);
  transition:all .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--bg-card);box-shadow:0 0 0 4px rgba(201,169,97,.12)}
.field textarea{resize:vertical;font-family:var(--sans);line-height:1.6}

.row{display:grid;grid-template-columns:2fr 1fr;gap:10px}

/* Mood picker */
.mood-picker{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}
@media (min-width:520px){
  .mood-picker{grid-template-columns:repeat(6, 1fr)}
}
.mood-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 6px;border-radius:14px;
  background:var(--bg-input);border:2px solid transparent;
  font-size:24px;line-height:1;transition:all .2s;
}
.mood-btn em{font-style:normal;font-size:10px;color:var(--text-muted);font-weight:500}
.mood-btn:hover{transform:translateY(-2px);background:var(--bg-card)}
.mood-btn.active{border-color:var(--gold);background:var(--bg-card);box-shadow:0 6px 16px -6px rgba(201,169,97,.4)}
.mood-btn.active em{color:var(--text-main)}

/* Voice recorder */
.voice-recorder{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg-input);border-radius:12px;border:1px solid var(--border-soft)}
.voice-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;border-radius:12px;
  background:var(--text-main);color:var(--bg-app);font-weight:600;
  transition:all .2s;
}
.voice-btn:hover{transform:translateY(-1px)}
.voice-btn.recording{background:var(--rose-deep);animation:recordPulse 1.2s ease-in-out infinite}
@keyframes recordPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,106,106,.5)}50%{box-shadow:0 0 0 12px rgba(168,106,106,0)}}
.voice-icon{font-size:18px}
.voice-meter{display:flex;align-items:center;gap:10px}
.voice-bar{flex:1;height:6px;background:var(--border-soft);border-radius:3px;overflow:hidden}
.voice-bar-fill{height:100%;width:0%;background:linear-gradient(90deg, var(--gold), var(--rose-deep));transition:width .1s linear}
#voiceTime{font-family:var(--serif);font-size:14px;color:var(--text-soft);min-width:36px}
#voicePlayback{width:100%}

.upload-area{border:2px dashed var(--border-soft);border-radius:14px;padding:30px 20px;text-align:center;cursor:pointer;transition:all .25s;background:var(--bg-input)}
.upload-area:hover,.upload-area.dragging{border-color:var(--gold);background:rgba(232,216,176,.18)}
[data-theme="midnight"] .upload-area:hover{background:rgba(240,200,120,.08)}
.upload-icon{font-size:38px;margin-bottom:8px}
.upload-area p{margin:4px 0;color:var(--text-soft);font-size:14px}
.upload-area small{color:var(--text-muted);font-size:12px}

.photo-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:14px}
.photo-preview .pp{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-input);border:1px solid var(--border-soft)}
.photo-preview .pp img{width:100%;height:100%;object-fit:cover}
.photo-preview .pp .x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(10,31,68,.85);color:#fff;font-size:13px;line-height:22px;cursor:pointer;text-align:center}

.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:22px;border-top:1px solid var(--border-soft)}

.btn-primary{padding:13px 26px;border-radius:12px;background:var(--text-main);color:var(--bg-app);font-weight:600;letter-spacing:.04em;font-size:14px;transition:all .22s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.btn-primary.danger{background:var(--rose-deep);color:#fff}
.btn-primary.small{padding:8px 14px;font-size:12px}

.btn-ghost{padding:13px 22px;border-radius:12px;background:transparent;color:var(--text-soft);border:1px solid var(--border-soft);font-size:14px;transition:all .2s}
.btn-ghost:hover{background:rgba(0,0,0,.06);color:var(--text-main)}
[data-theme="midnight"] .btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-ghost.danger{color:var(--rose-deep);border-color:rgba(168,106,106,.3)}
.btn-ghost.danger:hover{background:rgba(168,106,106,.08)}
.btn-ghost.small{padding:8px 14px;font-size:12px}


/* ═══════════════════════════════════════════════════════
   TIME CAPSULE
═══════════════════════════════════════════════════════ */
.capsule-when{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}
@media (min-width:480px){.capsule-when{grid-template-columns:repeat(4, 1fr)}}
.capsule-when-btn{
  padding:14px 10px;border-radius:12px;
  background:var(--bg-input);border:2px solid transparent;
  color:var(--text-soft);font-weight:500;font-size:13px;transition:all .2s;
}
.capsule-when-btn:hover{transform:translateY(-2px)}
.capsule-when-btn.active{border-color:var(--gold);background:var(--bg-card);color:var(--text-main);box-shadow:0 6px 16px -6px rgba(201,169,97,.4)}

.capsule-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.capsule-item{
  padding:14px 18px;border-radius:14px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  display:flex;align-items:center;gap:12px;
}
.capsule-item.unlocked{
  background:linear-gradient(140deg, var(--gold) 0%, var(--gold-soft) 100%);
  color:var(--navy-deep);border-color:transparent;cursor:pointer;
  animation:bannerPulse 3s ease-in-out infinite;
}
.capsule-icon{font-size:28px;flex-shrink:0}
.capsule-meta{flex:1;min-width:0}
.capsule-meta h5{margin:0 0 2px;font-family:var(--display);font-size:18px;font-weight:400;line-height:1.2}
.capsule-meta p{margin:0;font-size:12px;opacity:.75}
.capsule-status{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.08);flex-shrink:0}
[data-theme="midnight"] .capsule-status{background:rgba(255,255,255,.1)}
.capsule-item.unlocked .capsule-status{background:rgba(10,31,68,.15)}


/* ═══════════════════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════════════════ */
.settings-card hr{border:none;border-top:1px solid var(--border-soft);margin:28px 0}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px;color:var(--text-main);gap:12px;flex-wrap:wrap}
.status-pill{padding:5px 12px;border-radius:999px;font-size:12px;letter-spacing:.05em}
.status-pill.on{background:rgba(86,156,108,.15);color:#3e7050}
.status-pill.off{background:rgba(168,106,106,.15);color:var(--rose-deep)}
.setting-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}

.advanced{margin-top:8px}
.advanced summary{cursor:pointer;padding:6px 0;list-style:none;font-style:italic}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{content:'▸ ';color:var(--text-muted);transition:transform .2s;display:inline-block}
.advanced[open] summary::before{transform:rotate(90deg)}
.advanced[open] summary{margin-bottom:8px}

/* Theme picker */
.theme-picker{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:10px}
.theme-btn{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;background:var(--bg-input);border:2px solid transparent;
  color:var(--text-main);font-size:13px;transition:all .2s;
}
.theme-btn:hover{transform:translateY(-2px)}
.theme-btn.active{border-color:var(--gold);box-shadow:0 6px 16px -6px rgba(201,169,97,.4)}
.theme-swatch{width:24px;height:24px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
.theme-swatch.navy{background:linear-gradient(140deg, #0a1f44, #c9a961)}
.theme-swatch.midnight{background:linear-gradient(140deg, #050714, #f0c878)}
.theme-swatch.sunset{background:linear-gradient(140deg, #4a1c4e, #ffb86b)}

/* check row for print year */
.check-row{display:flex;flex-wrap:wrap;gap:8px}
.check-pill{padding:8px 14px;border-radius:999px;background:var(--bg-input);border:1px solid var(--border-soft);cursor:pointer;font-size:13px;transition:all .2s}
.check-pill.active{background:var(--text-main);color:var(--bg-app);border-color:var(--text-main)}


/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.foot{padding:30px 20px calc(var(--safe-bot) + 30px);text-align:center;color:var(--text-muted);font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.15em}


/* ═══════════════════════════════════════════════════════
   STORY MODAL
═══════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,19,48,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .3s}
.modal-body{
  position:relative;z-index:2;max-width:720px;width:calc(100% - 32px);
  max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg-app);border-radius:22px;box-shadow:var(--shadow-lg);animation:cardIn .4s;
}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(10,31,68,.9);color:#fff;font-size:16px;z-index:3;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--text-main)}

.mc-cover{width:100%;aspect-ratio:16/9;background:var(--navy-mid);border-radius:22px 22px 0 0;overflow:hidden;position:relative}
.mc-cover img{width:100%;height:100%;object-fit:cover}
.mc-mood-emoji{position:absolute;top:18px;right:18px;font-size:32px;background:rgba(255,255,255,.95);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.mc-body{padding:30px 30px 36px}
.mc-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.3em;text-transform:uppercase;font-size:11px;color:var(--gold)}
.mc-title{font-family:var(--display);font-size:36px;font-weight:400;margin:8px 0 14px;color:var(--text-main);line-height:1.1}
.mc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border-soft)}
.mc-text{font-size:16px;line-height:1.85;color:var(--text-main);white-space:pre-wrap;font-family:var(--serif)}
.mc-voice{margin-top:22px;padding:14px;background:var(--bg-input);border-radius:12px;border:1px solid var(--border-soft)}
.mc-voice audio{width:100%}
.mc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:24px}
.mc-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in}
.mc-actions{margin-top:26px;padding-top:20px;border-top:1px solid var(--border-soft);display:flex;gap:10px;justify-content:flex-end}


/* ═══════════════════════════════════════════════════════
   ANNIVERSARY SURPRISE
═══════════════════════════════════════════════════════ */
.anniv{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center, rgba(10,31,68,.85) 0%, rgba(6,19,48,.97) 80%);backdrop-filter:blur(12px);padding:20px}
#confettiCanvas{position:absolute;inset:0;pointer-events:none}
.anniv-card{
  position:relative;z-index:2;text-align:center;max-width:480px;
  padding:42px 32px;border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(232,216,176,.35);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  color:#f7f4ec;
  animation:annivIn 1s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes annivIn{
  0%{opacity:0;transform:scale(.6) rotate(-5deg)}
  60%{opacity:1;transform:scale(1.05) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
.anniv-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.4em;text-transform:uppercase;font-size:12px;color:var(--gold-soft)}
.anniv-title{font-family:var(--display);font-size:clamp(38px,9vw,52px);font-weight:400;line-height:1.1;margin:14px 0 18px;letter-spacing:.02em}
.anniv-title sup{font-size:.4em;color:var(--gold);vertical-align:super}
.anniv-msg{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.7;color:rgba(247,244,236,.85);margin:0 0 18px}
.anniv-meta{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);padding:8px 0 22px}
.anniv-btn{padding:14px 36px;border-radius:999px;background:linear-gradient(140deg, var(--gold), var(--gold-soft));color:var(--navy-deep);font-weight:600;letter-spacing:.05em;box-shadow:0 10px 30px -8px rgba(201,169,97,.6);transition:all .25s}
.anniv-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px -8px rgba(201,169,97,.7)}

.heart-layer{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.heart-layer .h{position:absolute;font-size:22px;animation:floatUp 8s linear forwards;filter:drop-shadow(0 4px 8px rgba(168,106,106,.4))}
@keyframes floatUp{
  0%{bottom:-40px;opacity:0;transform:translateX(0) rotate(0)}
  10%{opacity:.85}
  100%{bottom:110vh;opacity:0;transform:translateX(var(--drift)) rotate(360deg)}
}

/* Seasonal effects layer */
.seasonal-layer{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.seasonal-layer .s{position:absolute;animation:seasonalFall var(--dur) linear infinite}
@keyframes seasonalFall{
  0%{top:-30px;transform:translateX(0) rotate(0)}
  100%{top:110vh;transform:translateX(var(--drift)) rotate(540deg)}
}


/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast{
  position:fixed;
  top:calc(72px + var(--safe-top, 0px));
  right:16px;
  left:auto;
  transform:translateX(120%);
  padding:12px 20px;border-radius:12px;
  background:var(--text-main);color:var(--bg-app);font-size:13px;letter-spacing:.02em;
  box-shadow:var(--shadow-lg);z-index:400;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
  max-width:calc(100vw - 32px);text-align:left;
}
.toast.show{transform:translateX(0)}
.toast.error{background:var(--rose-deep);color:#fff}
.toast.success{background:#3e7050;color:#fff}

@media (min-width: 768px){
  .toast{top:80px;right:24px;max-width:380px}
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (min-width: 768px){
  .topbar{padding-left:32px;padding-right:32px}
  .hero{padding:90px 24px 96px}
  .tab-panel{padding:36px 32px 130px}
  .timeline{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:26px}
}

@media (min-width: 1024px){
  .hero-counter{gap:24px}
  .count-block{min-width:110px;padding:18px 22px}
  .count-block span{font-size:46px}
  .timeline{grid-template-columns:repeat(3, 1fr)}
}

@media (max-height: 500px) and (orientation: landscape){
  .hero{padding:36px 20px 40px}
  .hero-couple{font-size:42px;margin-bottom:18px}
  .hero-counter{gap:10px}
  .count-block{padding:10px 14px;min-width:72px}
  .count-block span{font-size:26px}
  .login-screen{align-items:flex-start;padding-top:calc(var(--safe-top) + 12px)}
  .login-card{padding:20px 22px 18px;max-width:520px}
  .login-title{font-size:24px;margin-bottom:4px}
  .login-sub{margin-bottom:16px;font-size:13px}
  .brand{margin-bottom:14px}
  .brand-mark{font-size:22px}
  .brand-line{margin:8px auto}
  .brand-tag{font-size:11px}
  .user-pick{margin-bottom:14px}
  .user-btn{padding:12px 10px;flex-direction:row;gap:10px}
  .user-avatar{width:36px;height:36px;font-size:18px}
  #pinInput{padding:13px 16px;font-size:18px}
  .login-go{padding:13px}
  .login-foot{margin-top:14px;font-size:11px}
  .anniv-card{padding:24px 22px}
  .anniv-title{font-size:32px;margin:8px 0 12px}
}

@media (max-width: 360px){
  .hero-counter{gap:8px}
  .count-block{min-width:72px;padding:10px 12px}
  .count-block span{font-size:26px}
  .tab{padding:8px 10px;font-size:11px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ═══════════════════════════════════════════════════════
   PRINT (for PDF book)
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   PLACE PICKER (input row + modal)
═══════════════════════════════════════════════════════ */
.place-input-row{
  display:flex;gap:8px;align-items:stretch;
}
.place-input-row #storyPlace{
  flex:1;min-width:0;width:auto !important;
}
.place-pin-btn{
  flex-shrink:0;
  width:46px;border-radius:12px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.place-pin-btn:hover{background:rgba(201,169,97,.1);border-color:var(--gold)}
.place-pin-btn:active{transform:scale(.94)}
.place-coords{
  margin-top:6px;display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:rgba(201,169,97,.08);
  border-left:2px solid var(--gold);border-radius:6px;
  font-size:11px;color:var(--text-soft);
}
.place-coords.hidden{display:none}
.place-coords-text{flex:1;font-family:monospace;letter-spacing:.02em}
.place-clear-btn{
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.08);border:none;cursor:pointer;
  font-size:14px;line-height:1;color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;
}
.place-clear-btn:hover{background:rgba(168,106,106,.2);color:var(--rose-deep)}

/* Place Picker Modal */
#placePickerModal{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,31,68,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:0;
  animation:fadeIn .25s;
}
#placePickerModal.hidden{display:none !important}
.pp-content{
  background:var(--bg-app);
  width:100%;max-width:560px;
  height:90vh;max-height:720px;
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.pp-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border-soft);
  display:flex;justify-content:space-between;align-items:center;
}
.pp-header h3{margin:0;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--text-main)}
.pp-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.06);border:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;
}
.pp-close:hover{background:rgba(0,0,0,.12)}

.pp-search-row{
  padding:12px 16px;display:flex;gap:8px;
  border-bottom:1px solid var(--border-soft);
}
#ppSearchInput{
  flex:1;padding:11px 14px;border-radius:10px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  color:var(--text-main);font-size:14px;font-family:inherit;
}
#ppSearchInput:focus{outline:none;border-color:var(--gold)}
.pp-myloc-btn{
  width:42px;border-radius:10px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pp-myloc-btn:hover{background:rgba(201,169,97,.1)}
.pp-myloc-btn.loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.pp-suggestions{
  max-height:160px;overflow-y:auto;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-input);
}
.pp-suggestions.hidden{display:none}
.pp-suggestion{
  padding:10px 16px;cursor:pointer;font-size:13px;
  border-bottom:.5px solid var(--border-soft);
  display:flex;align-items:flex-start;gap:8px;
  transition:background .15s;
}
.pp-suggestion:last-child{border-bottom:none}
.pp-suggestion:hover{background:rgba(201,169,97,.1)}
.pp-suggestion-icon{color:var(--gold);flex-shrink:0;margin-top:2px}
.pp-suggestion-text{flex:1;line-height:1.4;color:var(--text-main)}

.pp-map{
  flex:1;min-height:200px;
  background:var(--bg-input);
  position:relative;
}
.pp-map .leaflet-container{height:100%;border-radius:0}

.pp-selected{
  padding:12px 16px;border-top:1px solid var(--border-soft);
  background:var(--bg-input);
  display:flex;align-items:center;gap:10px;
}
.pp-selected-info{flex:1;min-width:0}
.pp-selected-name{
  font-size:14px;font-weight:500;color:var(--text-main);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp-selected-name.empty{color:var(--text-soft);font-weight:400;font-style:italic}
.pp-selected-coords{
  font-size:11px;color:var(--text-soft);font-family:monospace;
  margin-top:2px;
}

.pp-actions{
  padding:12px 16px calc(12px + var(--safe-bottom, 0px));
  display:flex;gap:10px;
  border-top:1px solid var(--border-soft);
}
.pp-actions button{flex:1}
.btn-ghost{
  padding:11px 18px;border-radius:10px;
  background:transparent;border:1px solid var(--border-soft);
  color:var(--text-soft);font-weight:500;cursor:pointer;
  font-family:inherit;font-size:14px;
}
.btn-ghost:hover{background:rgba(0,0,0,.04);color:var(--text-main)}
#ppConfirmBtn:disabled{opacity:.4;cursor:not-allowed}

@media (max-width:480px){
  .pp-content{height:100vh;max-height:100vh;border-radius:0}
  .pp-map{min-height:280px}
}

/* ═══════════════════════════════════════════════════════
   MEMORY MAP
═══════════════════════════════════════════════════════ */
.memory-map{
  width:100%;height:480px;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--border-soft);
  background:var(--bg-card);
}
.leaflet-popup-content-wrapper{
  border-radius:14px;
  background:var(--bg-card) !important;
  color:var(--text-main) !important;
}
.leaflet-popup-content{
  font-family:var(--sans);margin:14px 16px;
}
.leaflet-popup-content h5{
  font-family:var(--display);font-size:16px;font-weight:400;margin:0 0 4px;color:var(--text-main);
}
.leaflet-popup-content small{color:var(--text-muted);font-style:italic}
.leaflet-popup-content p{margin:6px 0 0;font-size:13px}
.leaflet-popup-tip{background:var(--bg-card) !important}
.leaflet-popup-content a.popup-link{color:var(--gold);font-weight:600;font-size:12px;cursor:pointer}

/* ═══════════════════════════════════════════════════════
   STATS DASHBOARD
═══════════════════════════════════════════════════════ */
.stats-content{display:flex;flex-direction:column;gap:16px;max-width:880px;margin:0 auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:14px;
  padding:18px;box-shadow:var(--shadow);text-align:center;transition:all .25s;
}
.stat-card:hover{transform:translateY(-2px)}
.stat-num{font-family:var(--display);font-size:36px;color:var(--gold);line-height:1;margin-bottom:6px}
.stat-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.stat-card.hero{
  background:linear-gradient(140deg, var(--navy-mid), var(--navy-deep));
  color:#f7f4ec;border-color:transparent;
  grid-column:1 / -1;
}
.stat-card.hero .stat-num{color:var(--gold-soft);font-size:48px}
.stat-card.hero .stat-label{color:rgba(247,244,236,.7)}

.stat-block{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:18px;
  padding:22px;box-shadow:var(--shadow);
}
.stat-block h4{font-family:var(--display);font-size:22px;font-weight:400;margin:0 0 14px;color:var(--text-main)}

.mood-bar-list{display:flex;flex-direction:column;gap:10px}
.mood-row{display:flex;align-items:center;gap:10px;font-size:13px}
.mood-row .mood-emoji{font-size:22px;width:32px;flex-shrink:0;text-align:center}
.mood-row .mood-name{width:90px;color:var(--text-soft)}
.mood-bar-track{flex:1;height:10px;background:var(--bg-input);border-radius:999px;overflow:hidden}
.mood-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:999px;transition:width .6s cubic-bezier(.2,.9,.3,1)}
.mood-row .mood-count{color:var(--text-muted);font-size:12px;min-width:32px;text-align:right}

.place-list{display:flex;flex-direction:column;gap:8px}
.place-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:10px;background:var(--bg-input);
  font-size:14px;
}
.place-row .place-name{color:var(--text-main)}
.place-row .place-count{color:var(--gold);font-family:var(--display);font-size:18px}

/* ═══════════════════════════════════════════════════════
   BUCKET LIST
═══════════════════════════════════════════════════════ */
.bucket-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.bucket-filter{
  padding:7px 14px;border-radius:999px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  font-size:12px;color:var(--text-soft);transition:all .2s;
}
.bucket-filter.active{background:var(--text-main);color:var(--bg-app);border-color:var(--text-main)}

.bucket-list{display:flex;flex-direction:column;gap:8px}
.bucket-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  transition:all .25s;
}
.bucket-item.done{opacity:.55;background:var(--bg-card)}
.bucket-item.done .bucket-text{text-decoration:line-through;color:var(--text-muted)}
.bucket-checkbox{
  width:22px;height:22px;border-radius:6px;border:2px solid var(--text-soft);
  cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all .2s;background:var(--bg-card);
}
.bucket-checkbox.checked{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.bucket-checkbox.checked::after{content:'✓';font-weight:700;font-size:14px}
.bucket-cat{font-size:18px;flex-shrink:0}
.bucket-text{flex:1;font-size:14px;color:var(--text-main)}
.bucket-by{font-size:11px;color:var(--text-muted);font-style:italic}
.bucket-delete{padding:4px 8px;color:var(--rose-deep);font-size:12px;opacity:.6;transition:opacity .2s}
.bucket-delete:hover{opacity:1}

/* ═══════════════════════════════════════════════════════
   DAILY ONE-LINE
═══════════════════════════════════════════════════════ */
.daily-list,.daily-archive{display:flex;flex-direction:column;gap:8px}
.daily-row{
  display:flex;gap:14px;padding:12px 14px;
  background:var(--bg-input);border:1px solid var(--border-soft);border-radius:12px;
  font-size:14px;align-items:flex-start;
}
.daily-day{
  font-family:var(--display);font-size:20px;color:var(--gold);
  min-width:36px;text-align:center;flex-shrink:0;line-height:1;
}
.daily-day em{display:block;font-style:normal;font-size:9px;color:var(--text-muted);letter-spacing:.2em;margin-top:2px}
.daily-text-content{flex:1;min-width:0}
.daily-text-content p{margin:0;color:var(--text-main);line-height:1.6}
.daily-by{font-size:11px;color:var(--text-muted);font-style:italic;margin-top:4px;display:block}
.daily-month-block{margin-bottom:14px}
.daily-month-block h5{font-family:var(--display);font-size:18px;font-weight:400;margin:0 0 8px;color:var(--text-soft)}

/* ═══════════════════════════════════════════════════════
   QUESTION OF THE DAY
═══════════════════════════════════════════════════════ */
.qotd-card{
  background:linear-gradient(140deg, var(--navy-mid), var(--navy-deep));
  color:#f7f4ec;border-radius:18px;padding:22px;
  box-shadow:var(--shadow);
}
.qotd-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.3em;font-size:10px;color:var(--gold-soft);text-transform:uppercase}
.qotd-question{font-family:var(--display);font-size:24px;font-weight:400;margin:8px 0 18px;line-height:1.3}
.qotd-answer-box{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.qotd-answer-box label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(247,244,236,.7);font-weight:600}
.qotd-answer-box textarea{
  width:100%;padding:12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  color:#f7f4ec;font-family:var(--sans);font-size:14px;line-height:1.5;
  resize:vertical;min-height:60px;
}
.qotd-answer-box textarea:focus{outline:none;border-color:var(--gold-soft)}
.qotd-submit{
  padding:10px 20px;border-radius:10px;
  background:linear-gradient(140deg, var(--gold), var(--gold-soft));
  color:var(--navy-deep);font-weight:600;font-size:13px;
}
.qotd-answers{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.qotd-answer-row{
  background:rgba(255,255,255,.05);
  padding:12px 14px;border-radius:10px;
  border-left:3px solid var(--gold);
}
.qotd-answer-row .author{
  font-family:var(--serif);font-style:italic;font-size:11px;
  color:var(--gold-soft);letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px;
}
.qotd-answer-row p{margin:0;font-size:14px;line-height:1.6;color:#f7f4ec}
.qotd-answer-row.locked{opacity:.5;font-style:italic}

.qotd-history{display:flex;flex-direction:column;gap:10px}
.qotd-history-item{
  padding:12px 14px;background:var(--bg-input);border-radius:10px;border:1px solid var(--border-soft);
  cursor:pointer;transition:all .2s;
}
.qotd-history-item:hover{transform:translateY(-1px);background:var(--bg-card)}
.qotd-history-item .q{font-family:var(--display);font-size:15px;color:var(--text-main);margin:0 0 4px}
.qotd-history-item .meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px}

/* ═══════════════════════════════════════════════════════
   YEAR-END RECAP MODAL
═══════════════════════════════════════════════════════ */
.recap{
  position:fixed;inset:0;z-index:500;
  background:radial-gradient(ellipse at center, rgba(10,31,68,.95) 0%, rgba(6,19,48,.99) 80%);
  display:flex;align-items:center;justify-content:center;
}
.recap-close{
  position:absolute;top:20px;right:20px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:18px;
}
.recap-stage{position:relative;width:100%;height:100%;max-width:900px;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.recap-slide{
  position:absolute;inset:40px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1s ease-in-out;
}
.recap-slide.active{opacity:1}
#recapImg{
  max-width:100%;max-height:60vh;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);object-fit:cover;
}
.recap-info{text-align:center;margin-top:24px;color:#f7f4ec;max-width:600px}
.recap-eyebrow{font-family:var(--serif);font-style:italic;letter-spacing:.3em;font-size:11px;color:var(--gold-soft);text-transform:uppercase;margin-bottom:8px}
.recap-title{font-family:var(--display);font-size:32px;font-weight:400;margin:0 0 8px;line-height:1.2}
.recap-text{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.7;color:rgba(247,244,236,.8);margin:0}
.recap-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1)}
.recap-progress-fill{height:100%;background:var(--gold);transition:width .1s linear;width:0%}

/* ═══════════════════════════════════════════════════════
   HIGHLIGHTS / FEATURED STORIES
═══════════════════════════════════════════════════════ */
.highlights-section{margin-bottom:28px}
.highlights-title{
  font-family:var(--display);font-size:22px;font-weight:400;margin:0 0 12px;
  color:var(--text-main);letter-spacing:.05em;
}
.highlights-row{
  display:flex;gap:12px;overflow-x:auto;padding:6px 2px 18px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.highlights-row::-webkit-scrollbar{height:6px}
.highlights-row::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:3px}
.highlight-card{
  flex:0 0 220px;aspect-ratio:1;
  border-radius:14px;overflow:hidden;position:relative;
  cursor:pointer;scroll-snap-align:start;
  box-shadow:var(--shadow);background:var(--navy-mid);
  transition:transform .25s;
}
.highlight-card:hover{transform:translateY(-4px)}
.highlight-card img{width:100%;height:100%;object-fit:cover}
.highlight-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,19,48,.85) 0%, transparent 50%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;
  color:#f7f4ec;
}
.highlight-overlay h5{
  font-family:var(--display);font-size:18px;font-weight:400;
  margin:0;line-height:1.2;
}
.highlight-overlay .h-meta{font-size:11px;opacity:.8;margin-top:4px;letter-spacing:.1em}
.highlight-star{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.95);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.story-card.is-highlight{
  border:2px solid var(--gold);
}
.story-card.is-highlight::after{
  content:'⭐';position:absolute;top:14px;right:48px;
  background:rgba(255,255,255,.95);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.btn-highlight{
  padding:8px 14px;border-radius:10px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  color:var(--text-main);font-size:13px;transition:all .2s;
}
.btn-highlight.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   MEMORY ROULETTE FAB
═══════════════════════════════════════════════════════ */
.fab-roulette{
  position:fixed;
  bottom:calc(82px + var(--safe-bottom, 0px));
  left:20px;
  z-index:55;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(140deg,var(--gold),var(--gold-soft));
  color:var(--navy-deep);font-size:22px;
  box-shadow:0 6px 18px -6px rgba(201,169,97,.55),0 0 0 2px rgba(255,255,255,.3) inset;
  transition:all .25s;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:none;
}
.fab-roulette:hover{transform:scale(1.1) rotate(-15deg)}
.fab-roulette:active{transform:scale(.95)}
.fab-roulette.hidden{display:none}
.fab-roulette.spinning{animation:rouletteSpin 1s ease-out}
@keyframes rouletteSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(720deg)}
}

/* Desktop: keep roulette top-left of bottom nav area */
@media (min-width: 768px){
  .fab-roulette{
    left:calc(50% - 360px);
    bottom:90px;
  }
}

/* ═══════════════════════════════════════════════════════
   PHOTO WALL
═══════════════════════════════════════════════════════ */
.view-toggle{display:flex;gap:6px;margin-top:8px;justify-content:center;flex-wrap:wrap}
.view-btn{
  padding:8px 14px;border-radius:999px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  font-size:12px;color:var(--text-soft);transition:all .2s;
}
.view-btn.active{background:var(--text-main);color:var(--bg-app);border-color:var(--text-main)}

.photo-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:6px;
}
.wall-photo{
  aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:var(--bg-input);cursor:pointer;
  transition:transform .25s,box-shadow .25s;position:relative;
}
.wall-photo:hover{transform:scale(1.04);box-shadow:var(--shadow);z-index:2}
.wall-photo img{width:100%;height:100%;object-fit:cover;opacity:.3;transition:opacity .35s}
.wall-photo img.loaded{opacity:1}
@media(min-width:600px){
  .photo-wall{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
}

/* ═══════════════════════════════════════════════════════
   LOVE NOTES
═══════════════════════════════════════════════════════ */
.notes-tabs{display:flex;gap:6px;margin-bottom:14px}
.notes-filter{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  font-size:12px;color:var(--text-soft);transition:all .2s;
}
.notes-filter.active{background:var(--text-main);color:var(--bg-app);border-color:var(--text-main)}
.notes-badge{
  background:var(--rose-deep);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:9px;min-width:18px;text-align:center;
}

.notes-list{display:flex;flex-direction:column;gap:10px}
.note-item{
  padding:14px 16px;border-radius:14px;
  background:var(--bg-input);border:1px solid var(--border-soft);
  position:relative;transition:all .25s;
}
.note-item.unread{
  background:linear-gradient(140deg,rgba(201,169,97,.12),rgba(201,169,97,.03));
  border-color:var(--gold);
}
.note-item.unread::before{
  content:'';position:absolute;top:14px;right:14px;
  width:8px;height:8px;border-radius:50%;background:var(--rose-deep);
  box-shadow:0 0 0 4px rgba(168,106,106,.2);
}
.note-from{
  font-family:var(--serif);font-style:italic;font-size:11px;
  color:var(--gold);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;
}
.note-text{font-size:14px;line-height:1.65;color:var(--text-main);margin:0;white-space:pre-wrap}
.note-time{font-size:11px;color:var(--text-muted);margin-top:8px;font-style:italic}
.note-delete{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:transparent;color:var(--text-muted);font-size:14px;
  opacity:.5;transition:all .2s;
}
.note-delete:hover{opacity:1;background:var(--bg-card);color:var(--rose-deep)}

/* ═══════════════════════════════════════════════════════
   DATE IDEAS
═══════════════════════════════════════════════════════ */
.idea-spinner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:18px 0;
}
.idea-card{
  width:100%;
  background:linear-gradient(140deg,var(--navy-mid),var(--navy-deep));
  color:#f7f4ec;border-radius:18px;padding:30px 24px;text-align:center;
  box-shadow:var(--shadow);min-height:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.idea-emoji{font-size:48px;line-height:1}
.idea-emoji.spinning{animation:emojiSpin .6s ease-out}
@keyframes emojiSpin{
  0%{transform:scale(.5) rotate(-180deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.idea-text{
  font-family:var(--display);font-size:24px;line-height:1.3;
  min-height:32px;max-width:100%;
}
.idea-meta{font-size:12px;color:var(--gold-soft);font-style:italic;letter-spacing:.15em;text-transform:uppercase}
.roll-btn{
  padding:14px 36px;font-size:15px;
  background:linear-gradient(140deg,var(--gold),var(--gold-soft));
  color:var(--navy-deep);font-weight:700;letter-spacing:.05em;
  box-shadow:0 8px 22px -8px rgba(201,169,97,.5);
}
.idea-list{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.idea-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:var(--bg-input);font-size:14px;
}
.idea-row .iemoji{font-size:18px;flex-shrink:0}
.idea-row .itext{flex:1;color:var(--text-main)}
.idea-row .iby{font-size:11px;color:var(--text-muted);font-style:italic}
.idea-del{padding:4px 8px;color:var(--rose-deep);font-size:12px;opacity:.6}
.idea-del:hover{opacity:1}

/* ═══════════════════════════════════════════════════════
   AWARDS & STREAK (in Stats)
═══════════════════════════════════════════════════════ */
.awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.award-card{
  background:linear-gradient(140deg,rgba(201,169,97,.1),rgba(201,169,97,.02));
  border:1px solid rgba(201,169,97,.3);
  border-radius:14px;padding:16px;text-align:center;
}
.award-icon{font-size:30px;line-height:1;margin-bottom:6px}
.award-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.award-value{font-family:var(--display);font-size:16px;color:var(--text-main);line-height:1.3}

.streak-display{
  text-align:center;padding:14px;
  background:linear-gradient(140deg,#ff6b35,#ff8e53);
  color:#fff;border-radius:14px;
}
.streak-num{font-family:var(--display);font-size:46px;line-height:1;margin-bottom:4px}
.streak-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.streak-fire{font-size:22px;margin-right:8px}

@media print{
  body{background:#fff;color:#000}
  .topbar,.toolbar,.subtabs,.bottom-nav,.fab-add,.fab-roulette,.foot,.heart-layer,.seasonal-layer,.onthisday,.modal,.anniv,#tab-add,#tab-settings,#tab-capsule,#tab-year{display:none !important}
  .hero{break-inside:avoid;page-break-after:always}
  .story-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc;margin-bottom:18px}
}

/* Place link in story modal */
.mc-place-link{
  color:var(--gold);text-decoration:none;
  border-bottom:1px dashed var(--gold);
  padding-bottom:1px;
  transition:color .2s;
}
.mc-place-link:hover{color:var(--text-main);border-bottom-color:var(--text-main)}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
═══════════════════════════════════════════════════════ */

/* Pause all animations when PWA in background (saves battery) */
.app-hidden *,
.app-hidden *::before,
.app-hidden *::after{
  animation-play-state:paused !important;
  transition:none !important;
}

/* Hint browser to use GPU for transform-heavy elements */
.bottom-nav,
.fab-add,
.fab-roulette,
.toast,
.modal,
.story-card,
.heart-layer,
.seasonal-layer{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Reduce motion for users who prefer it (iOS Settings → Accessibility) */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .heart-layer,.seasonal-layer{display:none !important}
}

/* Smooth scrolling on iOS */
html{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* Improve text rendering on mobile */
body{
  text-rendering:optimizeSpeed;
}

/* Lazy-render off-screen elements */
.story-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 400px;
}

/* Image rendering */
img{
  image-rendering:auto;
}