/* ---- streak modal ---- */
  .streak-hero { text-align: center; padding: 6px 0 18px; }
  .streak-hero-flame { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: var(--panel); color: var(--coral-text); margin-bottom: 8px;
    box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.25), -3px -3px 7px rgba(var(--shadow-l-rgb),0.7); }
  .streak-hero-num { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 34px; line-height: 1.1; }
  .streak-hero-label { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .streak-best { font-size: 12px; color: var(--muted); margin-top: 8px; }
  .streak-progress-wrap { margin: 4px 0 18px; }
  .streak-progress-track { height: 8px; border-radius: 6px; background: var(--panel); overflow: hidden; box-shadow: inset 2px 2px 4px rgba(var(--shadow-d-rgb),0.25); }
  .streak-progress-fill { height: 100%; border-radius: 6px; background: var(--coral-text); transition: width 0.4s ease; }
  .streak-progress-caption { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-align: center; }
  .streak-section-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 14.5px; margin: 18px 0 10px; }
  .streak-badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .streak-badge-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 12px; background: var(--panel);
    box-shadow: 2px 2px 5px rgba(var(--shadow-d-rgb),0.2), -2px -2px 5px rgba(var(--shadow-l-rgb),0.6); }
  .streak-badge-card.locked { opacity: 0.4; }
  .streak-badge-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--coral-text); color: #fff; }
  .streak-badge-card.locked .streak-badge-icon { background: var(--muted); }
  .streak-badge-days { font-size: 11px; font-weight: 700; }
  .streak-badge-label { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.2; }
  .freeze-panel { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 12px; padding: 12px 14px;
    box-shadow: 2px 2px 5px rgba(var(--shadow-d-rgb),0.2), -2px -2px 5px rgba(var(--shadow-l-rgb),0.6); }
  .freeze-icon { width: 38px; height: 38px; border-radius: 50%; background: #A8CFE0; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .freeze-title { font-size: 13px; font-weight: 700; }
  .freeze-sub { font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
  .freeze-used-banner { display: flex; align-items: center; gap: 8px; background: #EAF3F8; color: #3E7590; border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 600; margin-bottom: 14px; }

  .confetti-piece { position: fixed; top: -12px; width: 8px; height: 14px; z-index: 999; pointer-events: none; animation: confetti-fall linear forwards; }
  @keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
  }
  .icon-toggle-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--panel); border: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.25), -3px -3px 7px rgba(var(--shadow-l-rgb),0.7); }

  .sync-badge { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; }
  .sync-badge.local { background: #c9c2c2; }
  .sync-badge.syncing { background: #e0b34d; animation: pulse-sync 1s infinite; }
  .sync-badge.synced { background: #5fb87a; }
  .sync-badge.error { background: #d9695f; }
  @keyframes pulse-sync { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg, #F7E9E9); }
  .auth-card { width: 100%; max-width: 380px; background: var(--panel, #fff); border-radius: 20px; padding: 32px 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
  .auth-logo { width: 76px; height: 76px; display: block; object-fit: cover; border-radius: 18px; margin: 0 auto 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
  .auth-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; margin-bottom: 4px; text-align: center; }
  .auth-sub { font-size: 13px; color: var(--muted, #8a7a7a); text-align: center; margin-bottom: 22px; }
  .auth-field { margin-bottom: 14px; }
  .auth-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
  .auth-field input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.08); font-size: 15px; font-family: inherit; background: var(--paper, #fff); color: var(--ink); box-sizing: border-box; }
  .auth-field input:focus { outline: none; border-color: var(--coral-text, #c96a5c); }
  .auth-btn { width: 100%; padding: 12px; border-radius: 12px; border: none; background: var(--coral-text, #c96a5c); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px; }
  .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .auth-switch { text-align: center; font-size: 13px; margin-top: 16px; color: var(--muted, #8a7a7a); }
  .auth-switch button { background: none; border: none; color: var(--coral-text, #c96a5c); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: 13px; }
  .auth-error { background: #fdeceb; color: #b3423a; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; }
  .auth-note { background: #fff8e8; color: #8a6d1f; border-radius: 10px; padding: 9px 12px; font-size: 12px; margin-bottom: 16px; line-height: 1.5; }
  .auth-skip { text-align: center; margin-top: 10px; }
  .auth-skip button { background: none; border: none; color: var(--muted, #8a7a7a); font-size: 12.5px; text-decoration: underline; cursor: pointer; }

  .body-scroll { padding: 18px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }
  .body-scroll::-webkit-scrollbar { width: 6px; }
  .body-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  .today-card { background: var(--panel); border-radius: 14px; padding: 18px; margin-bottom: 22px;
    box-shadow: 6px 6px 16px rgba(var(--shadow-d-rgb),0.22), -6px -6px 16px rgba(var(--shadow-l-rgb),0.65); }
  .control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .date-picker-wrap { position: relative; }
  .date-picker-btn { display: flex; align-items: center; gap: 7px; border: none; border-radius: 10px; padding: 9px 13px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--paper); cursor: pointer;
    box-shadow: 4px 4px 9px rgba(var(--shadow-d-rgb),0.24), -4px -4px 9px rgba(var(--shadow-l-rgb),0.7); }
  .date-picker-btn:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.18), inset -2px -2px 4px rgba(255,255,255,0.15); }

  .calendar-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; background: var(--paper); border-radius: 14px; padding: 14px; width: 250px;
    box-shadow: 8px 8px 18px rgba(var(--shadow-d-rgb),0.32), -6px -6px 14px rgba(var(--shadow-l-rgb),0.6); }
  .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .cal-nav-btn { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--panel); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 3px 6px rgba(var(--shadow-d-rgb),0.22), -3px -3px 6px rgba(var(--shadow-l-rgb),0.7); }
  .cal-nav-btn:active { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.18), inset -2px -2px 4px rgba(255,255,255,0.15); }
  .cal-nav-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
  .cal-month-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: capitalize; }
  .calendar-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
  .calendar-dow-row span { text-align: center; font-size: 10px; color: var(--muted); font-weight: 700; }
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .cal-day { position: relative; aspect-ratio: 1; border: none; border-radius: 8px; background: var(--panel); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
    box-shadow: 2px 2px 5px rgba(var(--shadow-d-rgb),0.2), -2px -2px 5px rgba(var(--shadow-l-rgb),0.7); }
  .cal-day.today { border: 1.5px solid var(--accent); }
  .cal-day.selected { background: var(--accent); color: var(--accent-text); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(255,255,255,0.15); }
  .cal-day.disabled { opacity: 0.3; cursor: default; box-shadow: none; background: transparent; }
  .cal-day .cal-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
  .cal-day.selected .cal-dot { background: var(--accent-text); }
  .cal-day-blank { aspect-ratio: 1; }
  .today-jump-link { display: inline-block; background: transparent; border: none; color: var(--accent); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; margin-bottom: 12px; }

  .mood-dropdown-wrap { position: relative; }
  .mood-trigger-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0;
    box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.24), -3px -3px 7px rgba(var(--shadow-l-rgb),0.7); }
  .mood-dropdown-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--paper); border-radius: 14px; padding: 8px; width: 175px;
    box-shadow: 8px 8px 18px rgba(var(--shadow-d-rgb),0.32), -6px -6px 14px rgba(var(--shadow-l-rgb),0.6); }
  .mood-option-row { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; border-radius: 9px; padding: 9px 10px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .mood-option-row:active, .mood-option-row.active { background: var(--panel); }
  .mood-option-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

  .journal-textarea { width: 100%; min-height: 140px; border: none; border-radius: 10px; padding: 14px; font-family: 'AR CENA', 'Handlee', cursive; font-size: 19px; font-weight: 400; line-height: 1.7; background: var(--paper); color: var(--ink); resize: vertical; outline: none;
    box-shadow: 5px 5px 12px rgba(var(--shadow-d-rgb),0.2), -5px -5px 12px rgba(var(--shadow-l-rgb),0.7); }
  .journal-textarea::placeholder { color: var(--muted); font-style: italic; }

  .save-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
  .save-status { font-size: 11.5px; color: var(--muted); min-height: 14px; }
  .btn { border: none; border-radius: 9px; padding: 11px 18px; min-height: 44px; font-size: 13.5px; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
    box-shadow: 4px 4px 9px rgba(var(--shadow-d-rgb),0.26), -4px -4px 9px rgba(var(--shadow-l-rgb),0.7); }
  .btn:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(255,255,255,0.15); }
  .btn-save { background: var(--accent); color: var(--accent-text); }

  .section-heading { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
  .search-input { width: 100%; border: none; border-radius: 10px; padding: 11px 14px; font-size: 14px; font-family: 'Inter', sans-serif; background: var(--panel); color: var(--ink); outline: none; margin-bottom: 16px;
    box-shadow: 4px 4px 9px rgba(var(--shadow-d-rgb),0.2), -4px -4px 9px rgba(var(--shadow-l-rgb),0.7); }
  .search-input::placeholder { color: var(--muted); }

  .entry-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panel); border: none; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink);
    box-shadow: 3px 3px 8px rgba(var(--shadow-d-rgb),0.18), -3px -3px 8px rgba(var(--shadow-l-rgb),0.7); }
  .mood-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .entry-card-label { flex: 1; }
  .entry-media-badge { display: flex; color: var(--muted); }
  .entry-card svg:last-child { color: var(--muted); flex-shrink: 0; }