:root {
  --paper: #f6f1e7;
  --paper-2: #efe8d8;
  --paper-3: #e6ddc8;
  --ink: #2b2620;
  --ink-soft: #4a4339;
  --muted: #7a7060;
  --line: #d9cfbc;
  --line-soft: #e4dcc9;
  --card: #fbf7ef;
  --accent: #b85c38;
  --accent-soft: #f0dfd4;
  --accent-2: #3b5b7a;
  --accent-2-soft: #dce4ec;
  --success: #5a7a52;
  --warn: #a07a2a;
  --danger: #a0443a;
  --shadow: 0 1px 2px rgba(43,38,32,.06), 0 6px 18px rgba(43,38,32,.05);
  --radius: 12px;
  --radius-sm: 8px;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --sidebar-w: 232px;
}

[data-time="dawn"] {
  --paper: #f7efe9; --paper-2: #f1e4dc; --paper-3: #e9d9cf;
  --card: #fbf5f0; --ink: #3a2e28; --ink-soft: #5a4a40; --muted: #8a7a70;
  --line: #e2d2c8; --line-soft: #ecdcd2; --accent-soft: #f0dfd4;
}
[data-time="morning"] {
  --paper: #f6f1e7; --paper-2: #efe8d8; --paper-3: #e6ddc8;
  --card: #fbf7ef; --ink: #2b2620; --ink-soft: #4a4339; --muted: #7a7060;
  --line: #d9cfbc; --line-soft: #e4dcc9;
}
[data-time="afternoon"] {
  --paper: #f4f1e8; --paper-2: #ece7d8; --paper-3: #e2dcc8;
  --card: #faf7ef; --ink: #26241e; --ink-soft: #46423a; --muted: #767060;
  --line: #d4cfbc; --line-soft: #e0dcc9;
}
[data-time="evening"] {
  --paper: #f2ebe0; --paper-2: #e8e0d2; --paper-3: #ddd3c2;
  --card: #f8f2e8; --ink: #2e261e; --ink-soft: #4e4438; --muted: #7e7060;
  --line: #d2c8b8; --line-soft: #ddd3c2; --accent: #a85030;
}
[data-time="dusk"] {
  --paper: #e8e0d6; --paper-2: #ddd4c8; --paper-3: #d2c8b8;
  --card: #eee6da; --ink: #2a2420; --ink-soft: #4a4038; --muted: #6e6458;
  --line: #c8bcaa; --line-soft: #d2c8b8; --accent: #9a4828;
}
[data-time="night"] {
  --paper: #1e1a16; --paper-2: #26211c; --paper-3: #2f2923;
  --card: #24201a; --ink: #e8e0d2; --ink-soft: #c9c0b0; --muted: #9a9080;
  --line: #3a332b; --line-soft: #332d26; --accent: #d4835a;
  --accent-soft: #3a2a22; --accent-2: #7aa0c4; --accent-2-soft: #24303a;
}

[data-theme="dark"] {
  --paper: #1e1a16;
  --paper-2: #26211c;
  --paper-3: #2f2923;
  --ink: #e8e0d2;
  --ink-soft: #c9c0b0;
  --muted: #9a9080;
  --line: #3a332b;
  --line-soft: #332d26;
  --card: #24201a;
  --accent: #d4835a;
  --accent-soft: #3a2a22;
  --accent-2: #7aa0c4;
  --accent-2-soft: #24303a;
  --success: #8ab080;
  --warn: #c9a04a;
  --danger: #c46a60;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--line-soft);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 12px rgba(43,38,32,.03);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  cursor: pointer;
}
.brand-mark .pet { width: 36px; height: 30px; }
.brand-name { font-family: var(--font-serif); font-size: 15px; font-weight: 500; }
.brand-sub { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 14px 0 6px 12px; opacity: .7; font-weight: 500; }
.nav-btn { padding: 8px 12px; font-size: 13px; font-weight: 400; }
.nav-ico { opacity: .7; margin-right: 2px; }
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid transparent; background: transparent;
  color: var(--ink-soft); font-family: inherit; font-size: 13px;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-btn:hover { background: var(--card); color: var(--ink); border-color: var(--line-soft); }
.nav-btn.active { background: var(--card); color: var(--ink); font-weight: 500; border-color: var(--accent); box-shadow: var(--shadow); }
.nav-ico { width: 18px; text-align: center; }
.badge {
  margin-left: auto; background: var(--accent); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center;
}
.badge:empty { display: none; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.context-toggle {
  display: flex; flex-wrap: nowrap; background: var(--paper-3); border-radius: var(--radius-sm);
  padding: 3px; gap: 2px;
}
.ctx-btn {
  flex: 1; border: none; background: transparent; color: var(--muted);
  padding: 8px 4px; border-radius: 6px; font-family: inherit; font-size: 12px; cursor: pointer;
  min-width: 0; display: grid; place-items: center;
}
.ctx-btn.active { background: var(--ink); color: var(--paper); font-weight: 700; box-shadow: var(--shadow); outline: 2px solid var(--accent); outline-offset: -2px; }
.sync-status { font-size: 11px; color: var(--muted); text-align: center; }
.award-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.award-track { display:flex; align-items:center; gap:0; margin-top:8px; }
.award-dot-wrap { display:flex; flex-direction:column; align-items:center; }
.award-dot { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:700; border:2px solid var(--line-soft); background:var(--paper); color:var(--muted); }
.award-dot.locked { filter:grayscale(1) opacity(.4); }
.award-dot.reached { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.award-dot.earned { border-color:var(--accent); background:var(--accent); color:#fff; filter:none; }
.award-line { flex:1; height:2px; background:var(--line-soft); margin:0 2px; }
.award { display:flex; gap:10px; padding:10px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--card); overflow:hidden; min-width:0; }
.award.locked .award-icon { filter:grayscale(1) opacity(.4); }
.award.earned .award-icon { filter:none; }
.award.tier-0 { background: var(--card); border-style: dashed; }
.award.tier-1 { background: linear-gradient(135deg, var(--card), var(--accent-soft)); border-color: var(--accent); box-shadow: 0 3px 14px rgba(184,92,56,.22); }
.award.tier-2 { background: linear-gradient(135deg, var(--accent-soft), #dce4ec); border-color: var(--accent-2); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.award.tier-3 { background: linear-gradient(135deg, #f0e6d4, #e8d5f0); border-color: #b85c38; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.award.tier-4 { background: linear-gradient(135deg, #e8d5f0, #ffd6a5); border-color: #9b59b6; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.award.tier-4 .award-icon { transform: scale(1.2); }
.award.tier-3 .award-icon { transform: scale(1.1); }
.award-icon { font-size:24px; line-height:1; }
.award-body { flex:1; min-width:0; }
/* Progressive earned-card treatments: calm float + escalating glow/pulse + animated gradient */
.award.earned { animation: awardFloaty 9s ease-in-out infinite; }
@keyframes awardFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.award.earned.tier-1 { box-shadow: 0 3px 14px rgba(184,92,56,.22); }
.award.earned.tier-2 { box-shadow: 0 4px 16px rgba(59,91,122,.28); background-image: linear-gradient(135deg, var(--accent-soft), #dce4ec, var(--accent-soft)); background-size: 300% 300%; animation: awardShift 9s ease-in-out infinite, awardFloaty 8s ease-in-out infinite; }
.award.earned.tier-3 { box-shadow: 0 6px 20px rgba(184,92,56,.34); background-image: linear-gradient(135deg, #f0e6d4, #e8d5f0, #f0e6d4); background-size: 300% 300%; animation: awardShift 8s ease-in-out infinite, awardFloaty 7s ease-in-out infinite; }
.award.earned.tier-4 { box-shadow: 0 8px 24px rgba(155,89,182,.38); background-image: linear-gradient(135deg, #e8d5f0, #ffd6a5, #e8d5f0); background-size: 300% 300%; animation: awardShift 7s ease-in-out infinite, awardFloaty 6s ease-in-out infinite; }
.award.earned.tier-5, .award.earned.tier-6, .award.earned.tier-7, .award.earned.tier-8 { box-shadow: 0 12px 32px rgba(155,89,182,.5); animation: awardFloaty 7s ease-in-out infinite, awardPulse 5s ease-in-out infinite alternate; }
@keyframes awardShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes awardPulse { from { box-shadow: 0 12px 32px rgba(155,89,182,.5); } to { box-shadow: 0 16px 44px rgba(184,92,56,.66); } }
.progress-bar { height:6px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .3s; }
.snack-circle { width:36px;height:36px;max-width:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#ffd6a5,#ffb347);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 auto 8px;padding:0;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.15);align-self:center;flex:0 0 36px; }

/* Main */
.main { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 12px; border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.topbar-left h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin: 0; }
.date-line { font-size: 13px; color: var(--muted); margin-top: 2px; }
.topbar-right { display: flex; gap: 8px; }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 8px 14px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
  cursor: pointer; transition: background .15s;
}
#searchBtn, #printBtn, #themeBtn { font-size: 18px; padding: 6px 10px; line-height: 1; }
.icon-btn:hover { background: var(--paper-2); }

.content { padding: 24px 32px 60px; max-width: 1100px; width: 100%; }
.timeblock-grid { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.tb-row { display: flex; gap: 2px; }
.tb-cell { width: 26px; height: 22px; border-radius: 4px; font-size: 10px; display: grid; place-items: center; }
.tb-label { width: 42px; color: var(--muted); justify-content: flex-end; padding-right: 4px; }
.tb-day { font-weight: 600; color: var(--ink-soft); }
.tb-block { cursor: pointer; border: 1px solid var(--line-soft); background: var(--paper); }
.tb-block.work { background: rgba(59,91,122,.15); border-color: #3b5b7a; color: #3b5b7a; }
.tb-block.home { background: rgba(184,92,56,.15); border-color: #b85c38; color: #b85c38; }
.tb-block.weekend { background: rgba(155,89,182,.15); border-color: #9b59b6; color: #9b59b6; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.card h2 {
  font-family: var(--font-serif); font-size: 17px; font-weight: 500;
  margin: 0 0 12px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.card h2 .sub { font-size: 12px; color: var(--muted); font-family: var(--font-sans); font-weight: 400; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .today-layout { flex-direction: column; }    }

/* Form controls */
input, textarea, select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; min-height: 60px; }
button.primary {
  background: var(--ink); color: var(--paper); border: none;
  padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit;
  font-size: 14px; cursor: pointer;
}
button.primary:hover { opacity: .9; }
button.ghost, label.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
button.ghost:hover, label.ghost:hover { background: var(--paper-2); }
button.danger { color: var(--danger); }

.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* Lists */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.list li:last-child { border-bottom: none; }
.check { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.item-title { flex: 1; }
.item-meta { font-size: 12px; color: var(--muted); }
.item-actions { display: flex; gap: 4px; opacity: .6; }
.item-actions button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 4px; }
.item-actions button:hover { color: var(--ink); }
.done .item-title { text-decoration: line-through; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.link-tile {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  box-shadow: 0 1px 2px rgba(43,38,32,.04);
}
.link-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.link-tile:active { transform: translateY(0) scale(.98); }
.link-tile .lt-icon {
  width: 26px; height: 26px; border-radius: 6px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px;
  overflow: hidden; flex-shrink: 0;
}
.link-tile .lt-icon img { width: 16px; height: 16px; object-fit: contain; }
.link-tile .lt-title { font-size: 13px; font-weight: 500; flex: 1; }
.link-tile .lt-cat { display: none; }
.link-tile .lt-del {
  position: absolute; top: 4px; right: 4px; background: none; border: none;
  cursor: pointer; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .12s;
  padding: 2px 4px; border-radius: 4px;
}
.link-tile:hover .lt-del { opacity: 1; }
.link-tile .lt-del:hover { color: var(--danger); background: var(--paper-2); }

/* Nudges */

.nudge .nudge-text { flex: 1; }
.nudge button { background: none; border: none; cursor: pointer; color: var(--muted); }

/* Habits */
.habit-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.habit-row:last-child { border-bottom: none; }
.habit-row.done .habit-name { text-decoration: line-through; color: var(--muted); }
.routine-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer; font-family: inherit;
}
.routine-link:hover { filter: brightness(.97); }
.habit-row { flex-wrap: wrap; }
.worn { opacity: 1; filter: none; background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 6px; }
@keyframes stale-dance {
  0%, 90%, 100% { transform: translateX(0) rotate(0deg); }
  92% { transform: translateX(-2px) rotate(-1deg); }
  94% { transform: translateX(2px) rotate(1deg); }
  96% { transform: translateX(-1px) rotate(-.5deg); }
  98% { transform: translateX(1px) rotate(.5deg); }
}
.worn, .worn2, .worn3 { }
li.worn, li.worn2, li.worn3 { padding: 8px 12px; border-radius: 6px; margin: 2px 0; }
li.worn { background: rgba(160,122,42,.12); }
li.worn2 { background: rgba(160,122,42,.22); }
li.worn3 { background: rgba(160,122,42,.35); }
li.worn .item-title, li.worn2 .item-title, li.worn3 .item-title { font-weight: 600; color: var(--accent); text-decoration: none; }
.worn::after { content: '  ◆'; font-size: 11px; color: var(--accent); font-weight: 600; }
.worn2 { opacity: 1; filter: none; background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 6px; }
.worn2::after { content: '  ◆◆'; font-size: 11px; color: var(--accent); font-weight: 600; }
.worn3 { opacity: 1; filter: none; background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 8px 12px; border-radius: 6px; }
.worn3::after { content: '  ◆◆◆'; font-size: 11px; color: var(--accent); font-weight: 700; }
.worn .habit-name { font-weight: 600; color: var(--accent); }
.worn2 .habit-name { font-weight: 600; color: var(--accent); }
.worn3 .habit-name { font-weight: 700; color: var(--accent); }
.habit-name { flex: 1; }
.habit-streak { font-size: 12px; color: var(--accent); font-weight: 500; }

/* Procedures */
.proc-list { display: flex; flex-direction: column; gap: 8px; }
.proc-item {
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); cursor: pointer;
}
.proc-item:hover { background: var(--paper-2); }
.proc-item h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
.proc-item p { margin: 0; font-size: 13px; color: var(--muted); }
.proc-body { white-space: normal; font-size: 14px; line-height: 1.6; }
.proc-body h1, .proc-body h2, .proc-body h3 { font-family: var(--font-serif); margin: 12px 0 6px; }
.proc-body ul { padding-left: 20px; margin: 6px 0; }
.proc-body li { margin: 2px 0; }
.proc-body li.checklist-item { list-style: none; margin-left: -20px; padding-left: 20px; display: flex; align-items: center; gap: 6px; }

/* Weekly */
.week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.week-nav h2 { font-family: var(--font-serif); margin: 0; flex: 1; text-align: center; font-size: 20px; }
.week-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 16px; }
.day-cell {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 8px 6px; min-height: 70px; font-size: 12px;
}
.day-cell.today { border-color: var(--accent); }
.day-cell .dc-date { font-weight: 600; margin-bottom: 4px; }
.day-cell .dc-habits { color: var(--success); font-size: 11px; }

/* Toast */
.toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: 14px; box-shadow: var(--shadow);
  animation: slideIn .2s ease;
}
@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.modal-card {
  position: relative; background: var(--card); border-radius: var(--radius);
  padding: 22px; width: 90%; max-width: 520px; max-height: 80vh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-card h2 { font-family: var(--font-serif); margin: 0 0 12px; }

/* Misc */
.today-layout { display: flex; gap: 20px; align-items: flex-start; }
.today-main { flex: 1; min-width: 0; }

.sun-track-v::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: var(--line);
}




.pet-wrap { display: grid; place-items: center; position: relative; }
.pet { color: var(--accent); transition: transform .3s ease; }
.pet:hover { transform: scale(1.05); }
.pet-bubble {
  margin-top: 10px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 13px; line-height: 1.4; color: var(--ink-soft);
  max-width: 260px; box-shadow: var(--shadow);
  font-family: var(--font-serif); font-style: italic;
}
@media (max-width: 600px) {
  .pet-bubble { position: static; margin: 8px 0 0; max-width: 100%; }
  .pet-bubble::before { display: none; }
}
.heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 280px; }
.heat-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--line-soft); }
.heat-1 { background: var(--accent-soft); }
.heat-2 { background: var(--accent); opacity: .5; }
.heat-3 { background: var(--accent); opacity: .75; }
.heat-4 { background: var(--accent); }
.spread-preview { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px; font-size: 13px; max-height: 200px; overflow: auto; }
.event-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 12px; margin-bottom: 4px; color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(43,38,32,.03);
}
.event-pill .ep-icon { color: var(--accent); display: flex; flex-shrink: 0; }
.event-pill .ep-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-pill .ep-time { color: var(--muted); font-size: 11px; flex-shrink: 0; }
@keyframes pulse-attn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(160,68,58,.25); }
  50% { box-shadow: 0 0 0 6px rgba(160,68,58,0); }
}
.reminder-overdue { animation: pulse-attn 2s ease-in-out infinite; border-color: var(--accent) !important; }
.snooze-btn { color: var(--accent); }
.snooze-btn svg text { animation: z-float 2s ease-in-out infinite; }
.snooze-btn svg text:nth-child(2) { animation: z-float 2s ease-in-out infinite .3s; }
.snooze-btn svg text:nth-child(3) { animation: z-float 2s ease-in-out infinite .6s; }
@keyframes z-float {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-2px); opacity: 1; }
}
.empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 12px 0; }
.kbd { font-family: monospace; background: var(--paper-3); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.section-title { font-family: var(--font-serif); font-size: 18px; margin: 18px 0 8px; }
.small { font-size: 12px; color: var(--muted); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--paper-3); color: var(--muted); }
.pill.ctx-home { background: var(--accent-2-soft); color: var(--accent-2); }
.pill.ctx-work { background: var(--accent-soft); color: var(--accent); }
hr { border: none; border-top: 1px solid var(--line-soft); margin: 16px 0; }
code { font-family: monospace; font-size: 12px; background: var(--paper-3); padding: 1px 4px; border-radius: 4px; }

/* Mochi mood animations */
.pet-delighted { animation: mochi-bounce 0.9s ease-in-out infinite; transform-origin: center; }
.pet-happy { animation: mochi-wiggle 2.4s ease-in-out infinite; transform-origin: center; }
.pet-sad { animation: mochi-droop 3s ease-in-out infinite; transform-origin: center; opacity: .85; }
.pet-worried { animation: mochi-tremble 1.6s ease-in-out infinite; transform-origin: center; }
.pet-sleeping, .pet-waking { animation: mochi-breathe 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes mochi-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
@keyframes mochi-celebrate {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  20% { transform: translateY(-16px) scale(1.07, 0.93) rotate(-6deg); }
  40% { transform: translateY(-8px) scale(1.09, 0.91) rotate(6deg); }
  60% { transform: translateY(-3px) scale(1.05) rotate(-3deg); }
  80% { transform: translateY(0) scale(1) rotate(3deg); }
}
.pet-celebrating { animation: mochi-celebrate 0.9s ease-in-out infinite; }
@keyframes mochi-dance {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-8deg) translateY(-4px); }
  50% { transform: rotate(8deg) translateY(-6px); }
  75% { transform: rotate(-6deg) translateY(-3px); }
  100% { transform: rotate(0deg) translateY(0); }
}
.pet-dancing { animation: mochi-dance 0.4s ease-in-out 3; }
@keyframes heartFloat {
  0% { transform: scale(0.3) translateY(0); opacity: 0; }
  25% { opacity: 0.95; }
  100% { transform: scale(1.25) translateY(-30px); opacity: 0; }
}
.pet-heart-float {
  position: absolute; top: -8px; right: 4px; color: var(--accent);
  font-size: 20px; line-height: 1; pointer-events: none; z-index: 2;
  animation: heartFloat 1.8s ease-out forwards;
}
@keyframes mochi-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes mochi-droop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(2px) rotate(-2deg); }
}
@keyframes mochi-tremble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
@keyframes mochi-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.pet-bubble { transition: transform .2s ease; }
.pet-wrap:hover .pet-bubble { transform: translateY(-2px); }

/* Day-mode accents */
html[data-mode="work"] { --accent: #3a5a8c; --accent-soft: #dce4ec; --accent-2: #5a7a4a; }
html[data-mode="home"] { --accent: #8a5a3a; --accent-soft: #f0dfd4; --accent-2: #3a5a8c; }
html[data-mode="weekend"] { --accent: #7a4a7a; --accent-soft: #ece4f0; --accent-2: #8a5a3a; }
html[data-mode="weekend"] .card { padding: 18px 20px; }


/* Print */
@media print {
  .sidebar, .topbar, .toast-host, .modal, .context-toggle, #modeSel { display: none !important; }
  .app { display: block !important; }
  .main { margin: 0 !important; width: 100% !important; max-width: none !important; }
  .content { padding: 0 !important; max-width: none !important; width: 100% !important; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; margin-bottom: 12px; }
  .grid-2, .grid-3 { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
}

/* Focus rings */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Checkbox pulse */
.check { transition: transform .12s ease; }
.check:active { transform: scale(1.2); }

/* Spreads (less nesting, bigger images) */
.spread-item { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; }
.spread-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.spread-item-head h3 { font-family: var(--font-serif); margin: 0; font-size: 17px; }
.spread-img { width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--radius-sm); background: var(--paper); }
.spread-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.spread-card { border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.spread-card .spread-img { width:100%; height:160px; object-fit:cover; display:block; }
.spread-placeholder { display:flex;align-items:center;justify-content:center;height:160px;background:var(--line-soft);color:var(--muted); }
.spread-card-foot { display:flex;align-items:center;justify-content:space-between;padding:8px;gap:6px; }
.spread-preview { margin: 8px 0; }
.spread-preview img { width: 100%; }

/* Accessibility: respect prefers-reduced-motion */
@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;
  }
}