:root{
  --holder-height: 120px; /* 把底部区域高度调大，给月份栏留位（可调） */
  --months-height: 36px;  /* 月份栏高度 */
  --bg: #000;
  --border: #282828;
  --text: #808080;
  --dragger-border: #808080;
  --dragger-width: 172px;
}

/* 页面与内容区 */
html,body{height:100%;margin:0;font-family: "Helvetica Neue", Arial, sans-serif;background:#111;color:#ddd;}
.content-area{
     z-index: 9;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: var(--holder-height); /* 让出底部滑块/月份条高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg,#bad6f4 0%, #bad6f4 100%);
}

.content-container { position: relative; width: 100%; height: 100%; padding-bottom: 6px; }
.content-item{
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%) scale(.98);
  width: 68%;
  height: calc(100% - 40px);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity .32s ease, transform .28s cubic-bezier(.2,.9,.2,1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  color: white;
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.content-item.active{
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* 月份详情区域（在内容区内，显示被选月份的详细内容） */
.month-detail {
  margin-top: 18px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  min-height: 60px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
}

/* 如果月份没有内容，显示占位样式 */
.month-empty {
  color: #bbb;
  opacity: 0.85;
}

/* 隐藏后台编辑节点（只供后台编辑） */
#tl-entries { display: none; }

/* --------- 底部滑块（包含月份栏） --------- */
#tl-slider-holder.tl-font {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--holder-height);
  background: var(--bg);
  border-top: 2px solid var(--border);
  box-sizing: border-box;
  overflow: visible; /* months bar overflow visible */
  z-index: 9999;
  -webkit-user-select:none;
  user-select:none;
  touch-action: none;
}

/* 月份栏（改为均匀铺满且每个按钮等宽） */
#tl-months-bar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--months-height);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: auto;
  z-index: 10001;
}

/* 关键改动：tl-months 使用 flex，并占满宽度；左右 padding 将由 JS 动态设置为 sidePadding */
.tl-months{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;         /* 按钮间间距，可改 */
  padding: 0;       /* paddingLeft/right 由 JS 设置为 sidePadding，以保证与时间轴对齐 */
  align-items: center;
}

/* 每个按钮等宽（flex:1），内容居中 */
.month-btn{
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: #cfd3d8;
  font-size:13px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select:none;
  transition: transform .12s ease, opacity .12s ease;
}
.month-btn:hover{ transform: translateY(-1px); }

/* 无链接的月份：灰色 + 缩小 + 不可点 */
.month-btn.empty{
  opacity: 0.48;
  transform: scale(0.92);
  background: rgba(255,255,255,0.02);
  color: #000;
  border-color: rgba(255,255,255,0.02);
  cursor: default;
  pointer-events: none;
}

.month-btn.disabled{
  opacity: 0.38;
  cursor: default;
}

/* 将原 scale 区域下移，给月份栏留位 */
#tl-slider-scale-holder { position: absolute; left: 0; top: var(--months-height); height: calc(var(--holder-height) - var(--months-height)); width:100%; overflow:hidden; pointer-events:none; }
#tl-slider-scale { position:absolute; left:0; top:0; height:100%; box-sizing:border-box; will-change:transform; }
.tl-scale-canvas { position:absolute; left:0; bottom:0; height:52px; display:block; }

#tl-slider-scale-times-holder { position:absolute; left:0; top:0; height:100%; width:100%; pointer-events:auto; }
#tl-slider-scale-times-holder > div { position:relative; height:100%; }
#tl-slider-scale-times-holder h5 {
  position:absolute; bottom:6px; transform:translateX(-50%); margin:0; font-size:14px; color:var(--text);
  font-weight:600; white-space:nowrap; cursor:pointer; user-select:none; pointer-events:auto;
}

#tl-slider-markers-holder { position:absolute; left:0; top:0; height:100%; width:100%; pointer-events:none; }
#tl-slider-markers-holder canvas.tl-s-marker { position:absolute; }

/* 拖块位置：使用 CSS 变量计算（dragger 默认高度 60） */
#tl-slider-dragger.rt-draggable {
  position:absolute;
  left:0;
  width: var(--dragger-width);
  height:60px;
  margin:0;
  cursor:grab;
  pointer-events:auto;
  box-sizing:border-box;
  z-index:10000;
  transform:translateZ(0);
  user-select:none;
  /* top 约等于： monthsHeight + (scaleHeight - draggerHeight)/2
     scaleHeight = var(--holder-height) - var(--months-height)
     draggerHeight = 60 */
  top: calc( var(--months-height) + ((var(--holder-height) - var(--months-height) - 60) / 2) );
}
#tl-slider-dragger:active { cursor:grabbing; }

.tlsd-inner { width: calc(var(--dragger-width) - 24px); height:100%; margin:0 12px; border:2px solid var(--dragger-border);
  background: rgba(255,255,255,0.03); box-sizing:border-box; border-radius:6px;
}

.tlsd-inner-inner{ position:relative; width:100%; height:100%; }
.tlsd-corner{ position:absolute; width:8px; height:8px; background:var(--dragger-border); opacity:0.6; border-radius:2px; }
.tlsd-c-tl{ left:6px; top:6px; } .tlsd-c-tr{ right:6px; top:6px; } .tlsd-c-bl{ left:6px; bottom:6px; } .tlsd-c-br{ right:6px; bottom:6px; }

#tl-slider-interaction-preventer { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }

#tl-slider-scale-times-holder h5.active {
  color: #fff; font-size:15px; text-shadow:0 1px 2px rgba(0,0,0,0.6);
}

@media (max-width:480px){ :root { --dragger-width: 140px; } #tl-slider-scale .tl-scale-canvas { height:46px; } }

/* donut-chart.css — 仅作用于 .donut-chart 下的元素 */
.donut-chart {
  position: absolute;
  bottom: 0;           /* 距离视口顶部 0px 时开始固定 */
  z-index: 10;  
  --donut-size: 300px; /* 可覆盖 */
  width: var(--donut-size);
  max-width: 100%;
  height: auto;
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.donut-chart svg { display: block; width: 100%; height: auto; }

.donut-chart .dc-label {
    /* 保证在上层 */
  font-weight: 700;
  font-size: 14px;
  fill: #000;            /* 外部百分比使用黑字 */
  dominant-baseline: middle;
  text-anchor: middle;
  pointer-events: none;
}
.entry-content{
    position: relative;

}