/* ============ HOME HEADER ============ */
.home-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; padding: 16px 24px 0;
  position: relative; z-index: 5; flex-shrink: 0;
}
.app-name {
  color: var(--ink); display: flex; align-items: baseline; gap: 8px;
}
.app-name-zh {
  font-family: 'Noto Serif SC', serif; font-size: 26px; font-weight: 500;
  letter-spacing: 6px;
}
.app-name-en {
  font-family: 'Cormorant Garamond', serif; font-size: 14px;
  font-style: italic; font-weight: 300; color: var(--ink-faint);
  letter-spacing: 2px;
}
.app-name-script {
  font-family: 'Great Vibes', cursive; font-size: 32px; font-weight: 400;
}
.app-name-amp {
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  font-style: italic; font-weight: 300; color: var(--ink-faint); margin: 0 6px;
}
.menu-icon {
  width: 34px; height: 34px;
  border: 1.2px solid var(--accent-soft); border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  margin-top: 4px; cursor: pointer;
}
.menu-icon span { display: block; height: 1.2px; background: var(--ink-faint); }
.menu-icon span:nth-child(1) { width: 14px; }
.menu-icon span:nth-child(2) { width: 10px; }

.greeting {
  font-size: 12.5px; color: var(--ink-light); font-weight: 300;
  letter-spacing: 1.5px; margin-bottom: 30px;
  padding: 0 24px; position: relative; z-index: 5;
}

/* ============ TOP TOOLS (mood + pomo icons) ============ */
.top-tools {
  position: absolute; top: 16px; right: 72px;
  display: flex; gap: 8px; align-items: center;
  z-index: 10;
}
.mood-peek {
  width: 30px; height: 30px; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.2s;
}
.mood-peek:active { transform: scale(0.9); }
.mood-face {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream); border: 1.2px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mood-tooltip {
  display: none; position: absolute; right: -4px; top: 34px;
  background: var(--warm-white); border: 1px solid var(--accent-soft);
  border-radius: 10px; padding: 10px 14px;
  font-size: 11px; color: var(--ink-light); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); font-weight: 300;
}
.mood-tooltip::before {
  content: ''; position: absolute; top: -5px; right: 12px;
  width: 8px; height: 8px; background: var(--warm-white);
  border-left: 1px solid var(--accent-soft);
  border-top: 1px solid var(--accent-soft);
  transform: rotate(45deg);
}
.mood-peek:hover .mood-tooltip,
.mood-peek:focus .mood-tooltip { display: block; }

.pomo-peek {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream); border: 1.2px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.2s;
}
.pomo-peek:active { transform: scale(0.9); }

/* ============ POMODORO OVERLAY ============ */
.pomo-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.pomo-overlay.show {
  opacity: 1; pointer-events: auto;
}
.pomo-card {
  width: 320px; max-width: 90vw;
  background: var(--warm-white);
  border-radius: 24px;
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.pomo-overlay.show .pomo-card {
  transform: translateY(0);
}
.pomo-close {
  position: absolute; top: 16px; right: 16px;
  color: var(--ink-faint); cursor: pointer;
  padding: 4px;
}

.pomo-header { text-align: center; margin-bottom: 20px; }
.pomo-title-en {
  font-family: 'EB Garamond', serif;
  font-size: 9px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}
.pomo-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 18px; font-weight: 300;
  color: var(--ink); letter-spacing: 2px;
}

/* Timer ring */
.pomo-ring-wrap {
  position: relative; width: 180px; height: 180px;
  margin: 0 auto 20px;
}
.pomo-ring { width: 100%; height: 100%; }
.pomo-time-display {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pomo-time {
  font-family: 'EB Garamond', serif;
  font-size: 42px; font-weight: 400;
  color: var(--ink); letter-spacing: 2px;
  line-height: 1;
}
.pomo-phase {
  font-size: 11px; color: var(--ink-faint);
  letter-spacing: 1px; margin-top: 6px;
}

/* Controls */
.pomo-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 20px;
}
.pomo-ctrl-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.2px solid var(--accent-soft);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.pomo-ctrl-btn:active { transform: scale(0.92); }
.pomo-ctrl-small { width: 36px; height: 36px; }

/* Session dots */
.pomo-sessions {
  text-align: center; margin-bottom: 16px;
}
.pomo-session-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-faint); margin-bottom: 6px;
}
.pomo-dots {
  display: flex; gap: 6px; justify-content: center;
}
.pomo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--accent-soft);
  transition: all 0.3s;
}
.pomo-dot.done { background: var(--dusty-rose); border-color: var(--dusty-rose); }

/* Settings */
.pomo-settings {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(168,154,142,0.04);
  border-radius: 12px;
}
.pomo-setting-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-light);
  letter-spacing: 0.5px;
}
.pomo-setting-row + .pomo-setting-row { margin-top: 8px; }
.pomo-setting-row > span:first-child {
  width: 28px; text-align: right;
  font-family: 'Noto Serif SC', serif; font-weight: 300;
}
.pomo-setting-btns { display: flex; gap: 4px; flex: 1; }
.pomo-dur-btn {
  flex: 1; padding: 5px 0;
  border-radius: 8px;
  border: 1px solid var(--accent-soft);
  background: none;
  font-family: 'EB Garamond', serif;
  font-size: 12px; color: var(--ink-faint);
  cursor: pointer; transition: all 0.2s;
}
.pomo-dur-btn.active {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--dusty-rose);
}
.pomo-unit {
  font-family: 'EB Garamond', serif;
  font-size: 10px; color: var(--ink-faint);
  letter-spacing: 1px; width: 22px;
}

/* Claude message */
.pomo-msg {
  text-align: center;
  font-size: 12px; font-weight: 300;
  color: var(--ink-light);
  letter-spacing: 0.5px;
  line-height: 1.6;
  font-style: italic;
}

/* ============ DECORATIVE ELEMENTS ============ */
.collage-cluster {
  position: absolute; top: 54px; right: -10px;
  width: 175px; height: 200px;
  pointer-events: none; z-index: 0;
}
.collage-paper {
  position: absolute; top: 30px; right: 20px;
  width: 100px; height: 120px;
  background: linear-gradient(145deg, #e8ddd0, #dfd3c3, #d6c9b6);
  transform: rotate(6deg); z-index: 1;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.08);
}
.collage-lace {
  position: absolute; top: 15px; right: 35px;
  width: 90px; height: 90px; border-radius: 50%;
  overflow: hidden; transform: rotate(-3deg); z-index: 2; opacity: 0.5;
}
.collage-lace img {
  width: 200%; height: 200%; object-fit: cover;
  filter: saturate(0) brightness(1.3) opacity(0.6);
}
.collage-stamp {
  position: absolute; bottom: 35px; right: 60px;
  width: 45px; transform: rotate(-8deg); z-index: 3; opacity: 0.7;
  filter: saturate(0.5) brightness(1.05); box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
}
.collage-torn {
  position: absolute; top: 55px; right: 10px;
  width: 70px; height: 25px; background: var(--warm-white);
  transform: rotate(12deg); z-index: 2;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.06);
}
.collage-torn-text {
  font-family: 'Caveat', cursive; font-size: 9px;
  color: var(--ink-faint); padding: 6px 8px; white-space: nowrap;
}
.collage-flower {
  position: absolute; top: 0; right: 0; width: 140px;
  transform: rotate(-22deg); z-index: 5; opacity: 0.65;
  filter: saturate(0.6) brightness(1.05) drop-shadow(2px 3px 5px rgba(0,0,0,0.1));
}

.deco-flower-2 {
  position: absolute; bottom: 220px; left: -20px; width: 90px;
  opacity: 0.25; transform: rotate(140deg) scaleX(-1);
  pointer-events: none; z-index: 0;
  filter: saturate(0.4) brightness(1.1);
}
.deco-paperclip {
  position: absolute; top: -14px; right: 16px; width: 22px;
  opacity: 0.6; pointer-events: none; z-index: 0;
  filter: brightness(1.05) saturate(0.8) drop-shadow(1px 2px 3px rgba(0,0,0,0.1));
}
.deco-tape {
  position: absolute; top: 395px; left: 26px; width: 90px;
  opacity: 0.55; pointer-events: none; z-index: 0;
  filter: saturate(0.5) brightness(1.08); transform: rotate(-4deg);
}
.deco-lace {
  position: absolute; left: -10px; right: -10px; top: 340px;
  height: 28px; opacity: 0.08; pointer-events: none; z-index: 0;
  overflow: hidden; filter: saturate(0) brightness(0.7);
}
.deco-lace img { width: 110%; height: auto; margin-left: -5%; }
.deco-postmark {
  position: absolute; top: 100px; right: 100px;
  width: 82px; height: 82px; opacity: 0.25;
  transform: rotate(12deg); pointer-events: none; z-index: 0;
}
.deco-coords {
  position: absolute; top: 88px; right: 28px;
  font-family: 'EB Garamond', serif; font-size: 7.5px;
  color: var(--ink-faint); opacity: 0.3; letter-spacing: 1px;
  line-height: 1.6; text-align: right; pointer-events: none; z-index: 0;
}
.deco-on-countdown {
  position: absolute; top: -8px; right: 10px; width: 30px;
  opacity: 0.25; transform: rotate(10deg);
  pointer-events: none; z-index: 0; filter: saturate(0.4) brightness(1.1);
}
.deco-on-card {
  position: absolute; top: -15px; right: -8px; width: 40px;
  opacity: 0.35; transform: rotate(30deg);
  pointer-events: none; z-index: 0;
  filter: saturate(0.4) brightness(1.1) drop-shadow(1px 1px 2px rgba(0,0,0,0.06));
}
.sparkle {
  position: absolute; color: var(--ink-faint);
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.sparkle svg { fill: currentColor; }
.sparkle-1 { top: 290px; left: 32px; }
.sparkle-2 { top: 555px; right: 45px; opacity: 0.12; }
.sparkle-3 { top: 620px; left: 50px; opacity: 0.1; }

/* ============ TOGETHER COUNTER ============ */
.together-section {
  position: relative; margin-bottom: 24px;
  z-index: 5; padding: 0 24px;
}
.together-label {
  font-family: 'EB Garamond', serif; font-size: 10.5px;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.together-row { display: flex; align-items: baseline; gap: 4px; }
.together-number {
  font-family: 'Cormorant Garamond', serif; font-size: 88px;
  font-weight: 300; line-height: 0.85; color: var(--ink); letter-spacing: -3px;
}
.together-days {
  font-family: 'Caveat', cursive; font-size: 30px;
  color: var(--ink-light); font-weight: 400; margin-left: 2px;
}
.together-sub {
  font-family: 'EB Garamond', serif; font-size: 11.5px;
  font-style: italic; color: var(--ink-faint);
  letter-spacing: 2.5px; margin-top: 14px;
}

/* ============ WEATHER CARD ============ */
.weather-checkin {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  margin: 0 24px 24px; padding: 13px 16px;
  background: var(--cream); border-radius: 12px;
  position: relative; z-index: 5;
}
.weather { display: flex; align-items: center; gap: 8px; }
.weather-info { display: flex; flex-direction: column; gap: 2px; }
.weather-top { display: flex; align-items: baseline; gap: 6px; }
.weather-text { font-size: 11.5px; color: var(--ink-light); font-weight: 300; }
.weather-temp {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-weight: 400; color: var(--ink);
}
.weather-detail { font-size: 9.5px; color: var(--ink-faint); font-weight: 300; }
.weather-note {
  width: 100%; font-size: 11px; color: var(--ink-light);
  font-weight: 300; font-style: italic; margin-top: 8px;
  padding: 6px 2px 0; border-top: 1px solid rgba(168,154,142,0.1);
}
.weather-note::before {
  content: '— '; font-family: 'Pinyon Script', cursive;
  font-style: normal; color: var(--accent); font-size: 14px;
}
.checkin { display: flex; gap: 14px; }
.checkin-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--ink-light); font-weight: 300;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.checkin-dot {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.2px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--sage); transition: all 0.3s;
}
.checkin-dot.done { background: var(--sage); border-color: var(--sage); color: white; }

/* ============ NOTE CARD ============ */
.note-section {
  position: relative; margin: 0 24px 24px; z-index: 5;
}
.note-label {
  font-family: 'EB Garamond', serif; font-size: 9.5px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px; writing-mode: vertical-lr;
  position: absolute; left: -4px; top: 2px;
}
.note-card {
  margin-left: 20px; background: var(--warm-white);
  border-left: 1.5px solid var(--accent-soft);
  padding: 20px 22px 16px; position: relative;
  box-shadow: 0 3px 16px rgba(58,51,48,0.06), 0 1px 3px rgba(58,51,48,0.04);
}
.note-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 22px 22px 0;
  border-color: transparent var(--cream) transparent transparent;
}
.note-text {
  font-size: 13.5px; line-height: 2.1; color: var(--ink);
  font-weight: 300; letter-spacing: 0.3px;
}
.note-sign {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid rgba(168,154,142,0.12);
}
.note-author { font-family: 'Caveat', cursive; font-size: 15px; color: var(--ink-light); }
.note-date {
  font-family: 'EB Garamond', serif; font-size: 10.5px;
  color: var(--ink-faint); letter-spacing: 2.5px;
}

/* ============ COUNTDOWN ============ */
.countdown-strip {
  display: flex; align-items: center; gap: 10px;
  margin: 0 24px 24px; padding: 13px 18px;
  background: linear-gradient(135deg, rgba(232,213,196,0.5), rgba(221,208,191,0.5));
  border-radius: 11px; position: relative; z-index: 5;
}
.countdown-heart { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.countdown-heart svg { width: 16px; height: 16px; fill: none; stroke: var(--dusty-rose); stroke-width: 1.5; }
.countdown-text { font-size: 12px; color: var(--ink); font-weight: 300; }
.countdown-num { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; }

/* ============ BOTTOM CARDS ============ */
.bottom-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 0 24px 16px; position: relative; z-index: 5;
}
.home-card {
  background: var(--cream); border-radius: 14px;
  padding: 16px 14px 14px; position: relative; overflow: hidden;
}
.home-card-label {
  font-family: 'EB Garamond', serif; font-size: 9.5px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.home-card-icon { font-size: 11px; opacity: 0.45; }

/* vinyl */
.vinyl-container { display: flex; align-items: center; justify-content: center; margin: 6px 0 10px; }
.vinyl {
  width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--ink-faint) 7px, var(--ink) 8px, #2a2320 12px, #333 13px,
    #2a2320 15px, #222 16px, #2a2320 20px, #333 21px,
    #2a2320 24px, #222 25px, #2a2320 28px, var(--ink) 29px, var(--ink) 30px, #2a2320 31px);
  animation: spin 6s linear infinite;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
@keyframes spin { to { transform: rotate(360deg); } }
.song-name { font-size: 12px; color: var(--ink); font-weight: 400; text-align: center; }
.song-artist {
  font-size: 10px; color: var(--ink-faint); text-align: center;
  margin-top: 2px; font-style: italic; font-family: 'EB Garamond', serif;
}

/* book */
.book-wrapper { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.book-cover {
  width: 56px; height: 76px; border-radius: 2px 4px 4px 2px;
  flex-shrink: 0; position: relative; overflow: hidden;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.15), 2px 2px 4px rgba(0,0,0,0.1);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 40%, rgba(255,255,255,0.08) 100%);
  z-index: 2;
}
.book-info { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.book-title { font-size: 12px; color: var(--ink); font-weight: 400; line-height: 1.3; }
.book-author {
  font-size: 9px; color: var(--ink-faint);
  font-family: 'EB Garamond', serif; font-style: italic;
}
.book-progress-bar {
  width: 100%; height: 3px; background: var(--accent-soft);
  border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.book-progress-fill { height: 100%; width: 42%; background: var(--dusty-rose); border-radius: 2px; }
.book-progress-text {
  font-size: 9px; color: var(--ink-faint);
  font-family: 'EB Garamond', serif; margin-top: 2px;
}

/* ============ FEATURE ENTRIES ============ */
.feature-entries {
  margin: 0 24px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.feature-entry {
  padding: 14px 18px;
  background: var(--cream);
  border-radius: 14px;
  position: relative; overflow: hidden;
  cursor: pointer; transition: transform 0.2s;
  text-decoration: none; display: flex;
  align-items: center; gap: 12px;
  color: inherit;
}
.feature-entry:active { transform: scale(0.98); }
.feature-entry-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(168,154,142,0.08);
  border: 1px solid rgba(168,154,142,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ink-faint);
  flex-shrink: 0;
}
.feature-entry-text { flex: 1; }
.feature-entry-name {
  font-size: 14px; color: var(--ink);
  letter-spacing: 1px; font-weight: 400;
}
.feature-entry-desc {
  font-size: 10px; color: var(--ink-faint);
  letter-spacing: 0.5px; margin-top: 2px;
}
.feature-entry-arrow { color: var(--ink-faint); opacity: 0.4; flex-shrink: 0; }
.feature-entry-arrow svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ============ SIDEBAR ============ */
.sb-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  touch-action: none;
  -webkit-user-drag: none;
}
.sb-mask.show { opacity: 1; pointer-events: auto; }

.sb {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 280px; max-width: 80vw;
  z-index: 301;
  background: var(--warm-white);
  box-shadow: -8px 0 30px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 20px 40px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.sb.show { transform: translateX(0); }

/* Whisper */
.sb-whisper {
  margin-bottom: 20px;
}
.sb-whisper-label {
  display: flex; align-items: center; gap: 5px;
  font-family: 'EB Garamond', serif;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sb-whisper-text {
  font-size: 13px; font-weight: 300;
  color: var(--ink-light);
  line-height: 1.8;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Anniversary */
.sb-anni {
  padding: 10px 14px;
  background: rgba(168,154,142,0.05);
  border-radius: 10px;
  border: 1px solid rgba(168,154,142,0.08);
  margin-bottom: 16px;
}
.sb-anni-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.sb-anni-info {
  font-size: 12px; font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.5px;
}

.sb-divider {
  height: 1px; margin: 14px 0;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  opacity: 0.4;
}

.sb-section-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

/* Links */
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 13px; font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 0.5px;
}
.sb-link:active { background: rgba(168,154,142,0.08); }
.sb-link svg { color: var(--ink-faint); flex-shrink: 0; }

.sb-toggle {
  margin-left: auto;
  width: 32px; height: 18px;
  border-radius: 10px;
  background: var(--accent-soft);
  position: relative;
  transition: background 0.3s;
}
.sb-toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--warm-white);
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sb-toggle.on { background: var(--dusty-rose); }
.sb-toggle.on::after { transform: translateX(14px); }

/* ============ TODO OVERLAY (Memo Pad) ============ */
.todo-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30,25,20,0.4);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.todo-overlay.show { opacity: 1; pointer-events: auto; }

.todo-memo {
  position: relative;
  transform: translateY(20px) rotate(-1.2deg);
  transition: transform 0.35s cubic-bezier(.4,.0,.2,1);
  filter: drop-shadow(0 12px 32px rgba(40,30,20,0.25));
}
.todo-overlay.show .todo-memo {
  transform: translateY(0) rotate(-1.2deg);
}

/* washi tape */
.memo-tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 28px; z-index: 2;
  background: linear-gradient(135deg,
    rgba(200,180,160,0.55) 0%, rgba(220,200,175,0.45) 50%, rgba(200,180,160,0.55) 100%);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.memo-tape::after {
  content: '';
  position: absolute; inset: 4px 0;
  border-top: 1px dashed rgba(160,140,120,0.25);
  border-bottom: 1px dashed rgba(160,140,120,0.25);
}

/* paper */
.memo-paper {
  width: 300px; max-width: 85vw;
  max-height: 75vh;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 31px,
      rgba(180,165,145,0.18) 31px,
      rgba(180,165,145,0.18) 32px
    ),
    linear-gradient(135deg, #FFF9EE 0%, #FFF5E4 40%, #FFEED8 100%);
  border-radius: 3px;
  padding: 32px 28px 24px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow:
    inset 0 0 40px rgba(200,180,150,0.08),
    2px 3px 0 rgba(220,200,175,0.3);
}

/* left margin line */
.memo-paper::before {
  content: '';
  position: absolute; left: 38px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(200,120,120,0.15);
}

.memo-close {
  position: absolute; top: 10px; right: 14px;
  font-family: 'Caveat', cursive;
  font-size: 22px; color: rgba(160,140,120,0.4);
  cursor: pointer; line-height: 1;
  transition: color 0.2s;
  z-index: 3;
}
.memo-close:active { color: rgba(160,140,120,0.7); }

.memo-title {
  font-family: 'Caveat', cursive;
  font-size: 28px; font-weight: 600;
  color: #7a6855;
  margin-bottom: 8px;
  padding-left: 18px;
  letter-spacing: 1px;
}

/* todo list */
.memo-list {
  flex: 1; overflow-y: auto; min-height: 0;
  margin-bottom: 12px;
  max-height: 40vh;
  padding-left: 18px;
}
.memo-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  line-height: 32px;
}
.memo-checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid rgba(140,120,100,0.35);
  border-radius: 3px;
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px;
  transition: all 0.2s;
  background: none;
}
.memo-checkbox.done {
  background: rgba(140,120,100,0.15);
  border-color: rgba(140,120,100,0.5);
}
.memo-checkbox.done::after {
  content: '✓';
  font-family: 'Caveat', cursive;
  font-size: 13px;
  color: #7a6855;
  line-height: 1;
}
.memo-item-body { flex: 1; min-width: 0; }
.memo-item-text {
  font-family: 'Caveat', cursive;
  font-size: 19px; font-weight: 400;
  color: #5a4a3a;
  line-height: 32px;
  word-break: break-word;
}
.memo-item-text.done {
  text-decoration: line-through;
  text-decoration-color: rgba(140,120,100,0.4);
  color: rgba(140,120,100,0.45);
}
.memo-item-dl {
  font-family: 'Caveat', cursive;
  font-size: 13px;
  color: rgba(180,130,100,0.7);
  line-height: 1.2;
  margin-top: -2px;
}
.memo-item-dl.urgent { color: #c06858; }
.memo-item-del {
  background: none; border: none;
  font-family: 'Caveat', cursive;
  font-size: 16px; color: rgba(160,140,120,0.3);
  cursor: pointer; padding: 4px;
  margin-top: 6px; flex-shrink: 0;
  transition: color 0.2s;
}
.memo-item-del:active { color: rgba(160,140,120,0.7); }

/* empty state */
.memo-empty {
  text-align: center;
  padding: 36px 0 28px;
  padding-left: 18px;
}
.memo-empty-icon {
  font-size: 32px;
  opacity: 0.25;
  margin-bottom: 8px;
}
.memo-empty-text {
  font-family: 'Caveat', cursive;
  font-size: 20px;
  color: rgba(160,140,120,0.4);
  font-weight: 400;
}

/* bottom area */
.memo-bottom {
  margin-top: 4px;
  padding: 12px 14px 10px;
  margin-left: 18px;
  background: rgba(200,185,165,0.08);
  border-radius: 8px;
  border: 1px dashed rgba(190,175,155,0.25);
}
.memo-add-row {
  display: flex;
}
.memo-add-input {
  width: 100%; padding: 4px 0 6px;
  border: none; border-bottom: 1.5px solid rgba(180,165,145,0.25);
  background: none;
  font-family: 'Caveat', cursive;
  font-size: 18px; font-weight: 400;
  color: #5a4a3a; outline: none;
}
.memo-add-input::placeholder {
  color: rgba(160,140,120,0.3);
  font-style: normal;
}
.memo-bottom-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 10px; gap: 10px;
}
.memo-dl-wrap {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; position: relative;
  color: rgba(150,130,110,0.5);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(190,175,155,0.3);
  transition: background 0.2s;
}
.memo-dl-wrap:active { background: rgba(200,185,165,0.1); }
.memo-dl-wrap svg { flex-shrink: 0; }
.memo-deadline-input {
  position: absolute;
  width: 0; height: 0;
  opacity: 0; pointer-events: none;
}
.memo-dl-hint {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: rgba(150,130,110,0.45);
  transition: color 0.2s;
  white-space: nowrap;
}
.memo-dl-hint.has-value {
  color: #9a7a5a;
}
.memo-add-btn {
  padding: 5px 18px;
  border-radius: 14px;
  border: none;
  background: rgba(160,140,115,0.18);
  font-family: 'Caveat', cursive;
  font-size: 17px; font-weight: 500;
  color: #7a6855;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.memo-add-btn:active {
  background: rgba(160,140,115,0.32);
  transform: scale(0.96);
}

/* corner doodles */
.memo-doodle {
  position: absolute;
  bottom: 10px; right: 14px;
  font-size: 16px;
  color: rgba(200,170,140,0.18);
  pointer-events: none;
}
.memo-doodle-left {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: 14px;
  color: rgba(200,170,140,0.15);
  pointer-events: none;
  transform: rotate(-15deg);
}

/* Water */
.sb-water {
  text-align: center;
  padding: 8px 0;
}
.sb-water-cups {
  display: flex; gap: 6px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 6px;
}
.sb-water-cup {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--accent-soft);
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  padding: 0;
}
.sb-water-cup svg { transition: all 0.25s; }
.sb-water-cup.filled {
  background: rgba(168,196,200,0.15);
  border-color: rgba(130,180,190,0.4);
}
.sb-water-cup.filled svg { stroke: #6aabba; fill: rgba(106,171,186,0.15); }
.sb-water-info {
  font-family: 'EB Garamond', serif;
  font-size: 11px; color: var(--ink-faint);
  letter-spacing: 1px;
}

/* Password mini form */
.sb-pw {
  padding: 10px 8px;
}
.sb-pw-input {
  display: block; width: 100%;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid var(--accent-soft);
  background: none;
  font-size: 12px; color: var(--ink);
  outline: none;
}
.sb-pw-input::placeholder { color: var(--ink-faint); }
.sb-pw-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 4px;
}
.sb-pw-error {
  font-size: 10px; color: var(--dusty-rose);
}
.sb-pw-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent-soft);
  background: var(--cream);
  font-size: 11px; color: var(--ink);
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
}

/* ============ ACTIVITY BOARD ============ */
.activity-board {
  margin: 0 24px 16px; padding: 0;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;
  position: relative; z-index: 5;
  animation: activitySlideIn 0.3s ease;
}
@keyframes activitySlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.activity-board-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px 8px;
  font-size: 10px; letter-spacing: 1px;
  color: var(--ink-faint);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
}
.activity-board-clear {
  margin-left: auto;
  font-size: 9px; color: var(--ink-faint);
  cursor: pointer; letter-spacing: 0.5px;
  opacity: 0.6; transition: opacity 0.2s;
}
.activity-board-clear:active { opacity: 1; }
.activity-board-list {
  display: flex; flex-direction: column;
  gap: 1px;
}
.activity-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  cursor: pointer; transition: background 0.2s;
  text-decoration: none; color: inherit;
  background: rgba(168,154,142,0.03);
}
.activity-cat:active { background: rgba(168,154,142,0.08); }
.activity-cat-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}
.activity-cat-icon.cat-letter { background: rgba(196,164,154,0.15); }
.activity-cat-icon.cat-moment { background: rgba(154,171,142,0.15); }
.activity-cat-icon.cat-surf { background: rgba(200,188,138,0.15); }
.activity-cat-icon.cat-read { background: rgba(176,154,184,0.15); }
.activity-cat-icon.cat-diary { background: rgba(138,168,184,0.15); }
.activity-cat-body { flex: 1; min-width: 0; }
.activity-cat-title {
  font-size: 12px; color: var(--ink);
  font-weight: 400; letter-spacing: 0.3px;
}
.activity-cat-desc {
  font-size: 10px; color: var(--ink-faint);
  font-weight: 300; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-cat-badge {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--dusty-rose); color: white;
  font-size: 9px; font-family: 'EB Garamond', serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}