/* ========== 倒计时模块 ========== */
.cd-container { display: flex; flex-direction: column; gap: 1rem; }

/* 翻牌时钟 */
.flip-clock {
  display: flex; align-items: center; justify-content: center;
  gap: 0.3rem; font-size: 3rem; font-weight: 700;
  font-family: 'Courier New', monospace; perspective: 400px;
}
.flip-unit {
  position: relative; display: inline-block; min-width: 1.5em;
  text-align: center; background: var(--tw-bg-secondary);
  border-radius: var(--tw-radius-sm); padding: 0.2em 0.3em;
  border: 1px solid var(--tw-border); transition: transform 0.3s ease;
}
.flip-unit.flip { animation: flipAnim 0.3s ease; }
@keyframes flipAnim { 0%{transform:rotateX(0)} 50%{transform:rotateX(-90deg)} 100%{transform:rotateX(0)} }
.flip-card { display: inline-block; }
.flip-sep { color: var(--tw-text-muted); font-size: 0.8em; }
.flip-unit.zero-flash { animation: zeroFlash 0.6s ease; }
@keyframes zeroFlash { 0%,100%{box-shadow:0 0 0 transparent} 50%{box-shadow:0 0 20px var(--tw-accent); background:var(--tw-accent); color:#fff} }

/* 创建面板 */
.cd-create-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.cd-input-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cd-input-row label { min-width: 60px; color: var(--tw-text-secondary); font-size: 0.875rem; }

/* 输入模式切换 */
.cd-mode-switch { display: flex; gap: 0.25rem; }
.cd-mode-btn {
  padding: 0.3rem 0.6rem; border-radius: var(--tw-radius-sm);
  background: var(--tw-bg-secondary); border: 1px solid var(--tw-border);
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.cd-mode-btn.active { background: var(--tw-accent); color: #fff; border-color: var(--tw-accent); }

/* 快捷预设 */
.cd-presets { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cd-preset-chip {
  padding: 0.35rem 0.7rem; border-radius: 20px;
  background: var(--tw-bg-secondary); border: 1px solid var(--tw-border);
  font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.cd-preset-chip:hover { background: var(--tw-accent); color: #fff; border-color: var(--tw-accent); }

/* 快捷模板 */
.cd-templates { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cd-template-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.6rem 1rem; border-radius: var(--tw-radius);
  background: var(--tw-bg-secondary); border: 1px solid var(--tw-border);
  cursor: pointer; transition: all 0.2s; min-width: 80px;
}
.cd-template-btn:hover { background: var(--tw-accent); color: #fff; transform: translateY(-2px); }
.cd-template-btn .tpl-time { font-size: 1.2rem; font-weight: 700; }
.cd-template-btn .tpl-label { font-size: 0.75rem; opacity: 0.8; }

/* 标签 */
.cd-tag-list { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cd-tag {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.2rem 0.5rem; border-radius: 12px;
  background: var(--tw-accent); color: #fff; font-size: 0.75rem;
}
.cd-tag .remove { cursor: pointer; opacity: 0.7; }
.cd-tag .remove:hover { opacity: 1; }

/* 历史 Tab */
.cd-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--tw-border); padding-bottom: 0.5rem; flex-wrap: wrap; }
.cd-tab {
  padding: 0.35rem 0.8rem; border-radius: var(--tw-radius-sm);
  background: transparent; color: var(--tw-text-secondary);
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.cd-tab.active { background: var(--tw-accent); color: #fff; }
.cd-tab-count { font-size: 0.75rem; opacity: 0.7; margin-left: 0.2rem; }

/* 历史项 */
.cd-history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.8rem; border-radius: var(--tw-radius-sm);
  border: 1px solid var(--tw-border); margin-bottom: 0.4rem;
  background: var(--tw-bg-card); transition: all 0.2s;
}
.cd-history-item:hover { box-shadow: var(--tw-shadow); }
.cd-history-item .cd-title { font-weight: 500; }
.cd-history-item .cd-meta { font-size: 0.75rem; color: var(--tw-text-muted); }
.cd-history-item .cd-actions { display: flex; gap: 0.3rem; }

/* 状态徽章 */
.cd-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.cd-badge-active { background: #dbeafe; color: #1d4ed8; }
.cd-badge-finished { background: #d1fae5; color: #065f46; }
.cd-badge-cancelled { background: #fee2e2; color: #991b1b; }
.cd-badge-positive { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .cd-badge-active { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .cd-badge-finished { background: #064e3b; color: #34d399; }
[data-theme="dark"] .cd-badge-cancelled { background: #450a0a; color: #f87171; }
[data-theme="dark"] .cd-badge-positive { background: #451a03; color: #fbbf24; }

.cd-positive { color: var(--tw-success); font-weight: 700; }

@media (max-width: 768px) {
  .flip-clock { font-size: 2rem; }
  .cd-templates { justify-content: center; }
  .cd-template-btn { min-width: 70px; padding: 0.5rem 0.8rem; }
}