:root {
  --accent: #e94560;
  --accent-hover: #d13450;
  --accent-light: #fef0f3;
  --bg: #f6f6f6;
  --card-bg: #fff;
  --border: #e8e8e8;
  --text: #222;
  --text-secondary: #777;
  --text-muted: #aaa;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.1);
  --radius: 14px;
  --sidebar-w: 240px;
  --max-content: 640px;
  --header-h: 52px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:scroll}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.65;min-height:100vh;
}

/* ── Header ── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 20px 0 16px;height:var(--header-h);
}
.menu-btn{
  display:none;width:34px;height:34px;border:none;border-radius:8px;
  background:transparent;cursor:pointer;font-size:1.2em;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s;
}
.menu-btn:hover{background:#f0f0f0}
.header-title{
  font-size:1.05em;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.header-title::before{content:'✦';color:var(--accent);font-size:1.15em}
.header-stats{font-size:.78em;color:var(--text-secondary);display:flex;gap:8px}
.header-stats span{display:inline-flex;align-items:center;gap:3px}
.stat-dot{color:var(--text-muted)}
.search-wrap{position:relative;margin-left:auto}
.search-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid transparent;
  background:transparent;cursor:pointer;font-size:1.1em;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.search-btn:hover{background:#f0f0f0}
.search-dropdown{
  position:absolute;right:0;top:42px;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:10px;padding:6px;box-shadow:0 6px 20px rgba(0,0,0,.12);
  display:none;min-width:260px;
}
.search-dropdown.open{display:block}
.search-input{
  width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:8px;
  font-size:14px;outline:none;font-family:inherit;
}
.search-input:focus{border-color:var(--accent)}
.search-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  font-size:16px;display:none;
}
.search-clear.visible{display:block}

/* ── Tab Nav ── */
.tab-nav{
  display:flex;gap:2px;
  max-width:var(--max-content);margin:16px auto 0;padding:0 20px;
}
.tab-btn{
  flex:1;padding:7px 16px;border:none;background:transparent;
  font-size:.88em;color:var(--text-secondary);cursor:pointer;
  border-radius:8px 8px 0 0;font-family:inherit;
  transition:color .15s,background .15s;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{
  color:var(--accent);font-weight:600;
  background:var(--card-bg);box-shadow:0 -1px 0 var(--border),1px 0 0 var(--border),-1px 0 0 var(--border);
}

/* ── Main Layout ── */
.app-layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  max-width:calc(var(--sidebar-w) + var(--max-content) + 80px);
  margin:0 auto;padding:0 20px 60px;gap:36px;align-items:start;
}
.content-area{min-width:0;padding-top:20px;min-height:calc(100vh - var(--header-h) - 80px)}

/* ── Sidebar ── */
.sidebar-overlay{display:none}
.sidebar{
  position:sticky;top:calc(var(--header-h) + 16px);
  padding-top:20px;max-height:calc(100vh - var(--header-h) - 32px);
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}
.sidebar:hover::-webkit-scrollbar-thumb{background:#ddd}

.sidebar-section{margin-bottom:20px}
.sidebar-section-title{
  font-size:.7em;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;
}

/* Sidebar tab buttons */
.sidebar-tabs{display:flex;flex-direction:column;gap:2px}
.sidebar-tab{
  display:block;width:100%;padding:8px 10px;border:none;border-radius:8px;
  background:transparent;color:var(--text-secondary);cursor:pointer;
  font-family:inherit;font-size:.85em;text-align:left;
  transition:all .15s;
}
.sidebar-tab:hover{background:#f0f0f0;color:var(--text)}
.sidebar-tab.active{background:var(--accent-light);color:var(--accent);font-weight:600}

/* Sidebar stats */
.sidebar-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  background:var(--card-bg);border-radius:10px;padding:12px;box-shadow:var(--shadow);
}
.sidebar-stat{text-align:center}
.sidebar-stat .num{font-size:1.15em;font-weight:700;color:var(--accent);line-height:1.2}
.sidebar-stat .lbl{font-size:.62em;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}

/* Tags in sidebar */
.sidebar-tags{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
}
.sidebar-tags .tag-item{
  font-size:.78em;color:var(--text-secondary);cursor:pointer;
  padding:2px 7px;border-radius:6px;transition:all .15s;line-height:1.6;
  background:var(--card-bg);box-shadow:var(--shadow);
}
.sidebar-tags .tag-item:hover{color:var(--accent);background:var(--accent-light)}
.sidebar-tags .tag-item.active{color:var(--card-bg);background:var(--accent)}
.sidebar-tags .tag-item .tag-cnt{font-size:.7em;opacity:.6;margin-left:2px}
.tag-more-btn{
  font-size:.78em;color:var(--accent);cursor:pointer;
  background:none;border:none;font-family:inherit;
  padding:3px 7px;border-radius:6px;line-height:1.6;
  transition:background .15s;
}
.tag-more-btn:hover{background:var(--accent-light)}

/* ── Timeline ── */
.year-block{margin-bottom:28px}
.year-block-title{
  font-size:1.15em;font-weight:700;color:var(--text);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.year-block-title .yr-cnt{font-size:.65em;font-weight:400;color:var(--text-muted)}

.month-block{margin-bottom:16px}
.month-block-title{
  font-size:.88em;font-weight:600;color:var(--text-secondary);
  margin-bottom:6px;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:5px;padding:3px 0;
  transition:color .15s;
}
.month-block-title:hover{color:var(--text)}
.month-block-title .mo-arrow{
  font-size:.65em;width:12px;text-align:center;
  transition:transform .15s;color:var(--text-muted);flex-shrink:0;
}
.month-block-title .mo-arrow.open{transform:rotate(90deg)}
.month-block-title .mo-cnt{font-size:.75em;color:var(--text-muted)}
.month-cards{transition:opacity .2s}
.month-cards.collapsed{display:none}

/* 即跳后高亮目标卡片 */
.moment-card.flash .card{
  animation:flashCard 1.4s ease-out 1;
  box-shadow:var(--shadow-hover);
}
@keyframes flashCard{
  0%   { box-shadow:0 0 0 0 var(--accent); background:var(--accent-light); }
  30%  { box-shadow:0 0 0 3px var(--accent); background:var(--accent-light); }
  100% { box-shadow:var(--shadow-hover); background:var(--card-bg); }
}

/* 搜索关键字高亮 */
mark.hl{ background:var(--accent-light); color:inherit; padding:0 1px; border-radius:3px;
         font-weight:600; }

/* 顶部活跃筛选条 */
.active-filters{
  display:none;flex-wrap:wrap;gap:6px;
  max-width:var(--max-content);margin:0 auto 12px;
  position:sticky;top:var(--header-h);z-index:90;
  padding:8px 20px 10px;
  margin-top:0;
  background:linear-gradient(to bottom,var(--bg) 60%,rgba(246,246,246,0));
  backdrop-filter:blur(6px);
}
.af-chip{
  display:inline-flex;align-items:center;cursor:pointer;
  background:var(--accent-light);color:var(--accent);
  font-size:.8em;padding:3px 10px;border-radius:14px;
  border:1px solid var(--accent);line-height:1.5;
  transition:background .15s;
}
.af-chip:hover{ background:var(--accent);color:var(--card-bg); }

/* ── Moment Card ── */
.moment-card{margin-bottom:10px}
.card{
  background:var(--card-bg);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.card-top{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-size:.8em;color:var(--text-secondary);
}
.card-datetime{font-weight:500;color:var(--text)}
.card-type-icon{font-size:.85em}
.card-stats-row{display:flex;gap:10px;margin-left:auto;font-size:.9em}
.card-stat{display:flex;align-items:center;gap:2px}
.card-stat.cc{cursor:pointer;color:var(--accent);font-weight:500}
.card-stat.cc:hover{color:var(--accent-hover)}
.card-content{
  font-size:.95em;white-space:pre-wrap;word-break:break-word;
  margin-bottom:6px;line-height:1.7;
}
.card-images{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:5px;margin:6px 0;
}
.card-images.col1{grid-template-columns:1fr;max-width:280px}
.card-images img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:8px;cursor:pointer;transition:opacity .15s;
}
.card-images img:hover{opacity:.85}
.card-tags{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;
}
.card-tags .ctag{
  font-size:.78em;color:var(--text-secondary);cursor:pointer;
  transition:color .15s;
}
.card-tags .ctag:hover{color:var(--accent)}

/* Comments */
.card-comments-wrap{display:none;margin-top:6px}
.card-comments-wrap.open{display:block}
.comment{
  background:#f9f9f9;padding:6px 10px;margin-top:3px;
  border-radius:6px;font-size:.85em;border-left:3px solid var(--accent);
}
.comment.sub{margin-left:16px;border-left-color:#ddd}
.comment .cu{color:var(--accent);font-weight:600;margin-right:3px}
.comment .cl{color:var(--text-muted);font-size:.8em}

/* Load More / 流式加载 */
.load-more-wrap{text-align:center;padding:16px}
.stream-loading{
  text-align:center;padding:14px;color:var(--text-muted);font-size:.85em;
}
/* 加载占位"块"轻闪烁,提示还有更多 */
.stream-loading::before{ content:''; display:inline-block; }
.stream-loading{ animation:streamPulse 1.1s ease-in-out infinite; }
@keyframes streamPulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
.load-more-btn{
  padding:7px 22px;border:1px solid var(--border);border-radius:20px;
  background:var(--card-bg);color:var(--text-secondary);cursor:pointer;
  font-family:inherit;font-size:.85em;transition:all .15s;
}
.load-more-btn:hover{color:var(--accent);border-color:var(--accent)}
.load-more-btn:disabled{opacity:.5;cursor:default}

/* No Results */
.no-results{text-align:center;padding:60px 20px;color:var(--text-muted);display:none}

/* ── Gallery ── */
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.gallery-item{cursor:pointer;overflow:hidden;border-radius:8px}
.gallery-item img{
  width:100%;aspect-ratio:1;object-fit:cover;
  display:block;transition:transform .2s,opacity .15s;
}
.gallery-item:hover img{transform:scale(1.04);opacity:.9}

/* ── Calendar ── */
.calendar-wrap{padding:6px 0}
.calendar-header{font-size:.82em;color:var(--text-muted);margin-bottom:6px}
.hm{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.hm-days{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-top:20px}
.hm-days span{font-size:10px;color:var(--text-muted);line-height:12px;height:12px;text-align:right;padding-right:4px}
.hm-body{flex-shrink:0}
.hm-labels{height:18px;margin-bottom:2px;font-size:10px;color:var(--text-muted);position:relative}
.hm-labels span{position:absolute;white-space:nowrap}
.hm-grid{display:grid;gap:2px}
.hm-cell{border-radius:2px;cursor:pointer;transition:outline .1s;width:12px;height:12px}
.hm-cell:hover{outline:2px solid var(--text)}
.hm-cell.l0{background:#ebedf0}
.hm-cell.l1{background:#9be9a8}
.hm-cell.l2{background:#40c463}
.hm-cell.l3{background:#30a14e}
.hm-cell.l4{background:#216e39}
.heatmap-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);margin-top:10px}
.heatmap-legend .swatch{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle}
.heatmap-legend .swatch.l0{background:#ebedf0}
.heatmap-legend .swatch.l1{background:#9be9a8}
.heatmap-legend .swatch.l2{background:#40c463}
.heatmap-legend .swatch.l3{background:#30a14e}
.heatmap-legend .swatch.l4{background:#216e39}
.heatmap-tooltip{
  position:fixed;background:#222;color:#fff;font-size:11px;
  padding:3px 7px;border-radius:4px;pointer-events:none;
  display:none;z-index:200;white-space:nowrap;
}

/* ── Lightbox ── */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.94);
  z-index:9999;justify-content:center;align-items:center;cursor:pointer;
}
.lightbox.show{display:flex}
.lightbox img{max-width:94%;max-height:94%;object-fit:contain;border-radius:4px}
.lightbox-close{
  position:absolute;top:14px;right:18px;font-size:1.8em;color:#fff;
  background:none;border:none;cursor:pointer;line-height:1;
}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:1.8em;color:#fff;background:rgba(255,255,255,.12);
  border:none;cursor:pointer;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.lightbox-nav:hover{background:rgba(255,255,255,.25)}
.lightbox-nav.prev{left:12px}
.lightbox-nav.next{right:12px}
.lightbox-counter{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#aaa;font-size:.85em;
}

/* ── 日期 Scrubber ── */
.scrubber{
  position:fixed; right:8px;            /* JS 会按内容区右边缘重设 right */
  top:calc(var(--header-h) + 16px);
  height:calc(100vh - var(--header-h) - 60px);
  width:40px; z-index:80;
  display:none;          /* JS 控制显隐:仅 timeline 视图 */
  pointer-events:none;
  user-select:none;
}
.scrubber.show{display:block}
.scrubber-track{
  position:absolute; right:0; top:14px; bottom:14px;
  width:40px; overflow:visible;
  pointer-events:auto;                  /* 整条 track 可拖,手机易抓 */
  cursor:grab;
}
.scrubber-track:active{cursor:grabbing}
.scrubber-tick{
  position:absolute; right:0; width:10px; height:0;
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:10px; line-height:1; white-space:nowrap;
  pointer-events:none; transform:translateY(-50%);
}
.scrubber-tick.month{ width:10px; }
.scrubber-tick.year{
  width:18px;
  border-top-color:var(--text-secondary);
  font-weight:600; color:var(--text); font-size:11px;
}
.scrubber-tick .tick-label{
  position:absolute; right:100%; top:-6px;
  margin-right:4px;
}
.scrubber-tick.active .tick-label{ color:var(--accent); }
.scrubber-tick.active{ border-top-color:var(--accent); }
.scrubber-thumb{
  position:absolute; right:-1px; top:0;
  width:28px; height:30px;               /* 大的透明命中层 */
  pointer-events:none;                    /* 命中由 track 负责,thumb 只做视觉 */
  transform:translateY(-15px);
}
.scrubber-thumb::before{
  /* 真正可见的红条 */
  content:''; position:absolute; right:8px; top:50%;
  width:3px; height:18px; border-radius:2px;
  background:var(--accent);
  transform:translateY(-50%);
  box-shadow:0 0 0 2px rgba(233,69,96,.18);
}
.scrubber-thumb::after{
  content:''; position:absolute; right:14px; top:50%;
  width:0;height:0; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--accent);
}
.scrubber-bubble{
  position:absolute; right:100%;
  margin-right:6px;
  background:#222; color:#fff; font-size:11px;
  padding:4px 8px; border-radius:6px; white-space:nowrap;
  pointer-events:none; opacity:0;
  transform:translateY(-50%); transition:opacity .12s;
  z-index:85;
}
.scrubber-bubble.show{opacity:1}
.scrubber-bubble::after{
  content:''; position:absolute; right:-4px; top:50%;
  transform:translateY(-50%);
  border:5px solid transparent; border-left-color:#222;
}

/* ── Mobile ── */
@media(max-width:960px){
  .app-layout{grid-template-columns:1fr;gap:0}
  .sidebar{
    position:fixed;top:0;left:-280px;width:280px;height:100vh;z-index:500;
    background:var(--card-bg);box-shadow:4px 0 20px rgba(0,0,0,.15);
    padding:20px 16px;overflow-y:auto;transition:left .3s;
    max-height:none;
  }
  .sidebar.open{left:0}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;z-index:499;background:rgba(0,0,0,.4);
  }
  .sidebar-overlay.open{display:block}
  .menu-btn{display:flex}
  .tab-nav{padding:0 16px}
  .content-area{padding-top:12px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  /* 手机:scrubber 不常驻,滚动时浮现淡出 */
  .scrubber{ width:34px; }
  .scrubber-track{ width:34px; }
}
@media(max-width:960px){
  .scrubber{ opacity:0 !important; transition:opacity .25s; }
  .scrubber.show{ }
  .scrubber.mobile-visible{ opacity:1 !important; }
}
@media(max-width:600px){
  .header-stats .stat-dot{display:none}
  .header-stats span:not(:first-child){display:none}
  .site-header{padding:0 12px 0 10px}
  .tab-nav{padding:0 10px;margin-top:10px}
  .app-layout{padding:0 10px 40px}
  .card{padding:12px 14px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:4px}
  .card-images{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  .card-images.col1{max-width:200px}
}