/*
 * EDSIONC v2 Design System — Ultimate Dehydrated
 * 全站唯一共享 CSS token + 组件原语
 *
 * ══════════════════════════════════════════════
 * 禁止清单（违反即违规，不允许在任何页面出现）
 * ══════════════════════════════════════════════
 * ✗ border-radius: 999px / rounded-full / 胶囊大按钮
 * ✗ 厚阴影（box-shadow 超过 20px blur）
 * ✗ 重渐变背景 / 网格叠加层 / 大水印 / 大 mascot
 * ✗ 蓝色系输入底色（#eef2ff 等）
 * ✗ Lora / VT323 / Space Mono 作为正文字体
 * ✗ 浮动圆圈返回按钮
 * ✗ @phosphor-icons / Google Fonts (Lora/VT323/Poppins) CDN 加载
 * ══════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&display=swap');

:root {
  /* ── 背景层 ── */
  --color-bg-app:            #f0f2f5;
  --color-bg-surface:        #ffffff;
  --color-bg-element:        #f8fafc;
  --color-bg-element-hover:  #f1f5f9;

  /* ── 文本层 ── */
  --color-text-primary:   #111827;
  --color-text-secondary: #4b5563;
  --color-text-tertiary:  #9ca3af;

  /* ── 品牌色 ── */
  --color-accent-deep: #7f1d1d;
  --color-accent-soft: rgba(127, 29, 29, 0.08);

  /* ── 边框 ── */
  --color-border:      #e5e7eb;
  --color-border-soft: #f3f4f6;

  /* ── 字体 ── */
  --font-family-ui:    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-serif: "Georgia", "Times New Roman", "Noto Serif SC", serif; /* 仅 hero / 题面 / 核心数字 */

  /* ── 阴影（极轻，禁止重阴影）── */
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01);
  --shadow-float: 0 8px 20px -4px rgba(0, 0, 0, 0.04);

  /* ── 动效 ── */
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-micro:  0.1s ease-out;

  /* ── 圆角（禁止 999px）── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
}

body {
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-family-ui);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ════════════════════════════════════════════
   按钮系统
   ════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-family-ui);
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  transition: all var(--transition-micro);
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: #111827;
  color: #ffffff;
}
.btn-primary:hover:not(:disabled) { background: #000000; }

.btn-accent {
  background: var(--color-accent-deep);
  color: #ffffff;
}
.btn-accent:hover:not(:disabled) { background: #6b1818; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-element); }

/* ── 返回按钮（唯一规范形态）── */
.btn-return {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family-ui);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-micro), color var(--transition-micro);
  outline: none;
}
.btn-return:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text-primary); }
.btn-return svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════════════════════════
   输入框系统
   ════════════════════════════════════════════ */

.silent-input {
  width: 100%;
  background: var(--color-bg-element);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-family-ui);
  color: var(--color-text-primary);
  outline: none;
  transition: all var(--transition-smooth);
}
.silent-input::placeholder { color: var(--color-text-tertiary); }
.silent-input:hover { border-color: var(--color-border); }
.silent-input:focus {
  border-color: #d1d5db;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03);
}

/* ════════════════════════════════════════════
   列表行（静默可点）
   ════════════════════════════════════════════ */

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-micro), box-shadow var(--transition-micro), transform var(--transition-micro);
}
.task-item:hover {
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: var(--shadow-float);
}

.task-item-status-bar {
  width: 4px;
  height: 24px;
  background: var(--color-accent-deep);
  border-radius: 2px;
  flex-shrink: 0;
}

.task-item-chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   排印辅助
   ════════════════════════════════════════════ */

.eyebrow {
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 12px;
}

.title-serif {
  font-family: var(--font-family-serif);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}

/* ════════════════════════════════════════════
   进场动画
   ════════════════════════════════════════════ */

.step-enter {
  animation: v2FadeInUp 0.3s ease-out both;
}

@keyframes v2FadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════
   卡片基础
   ════════════════════════════════════════════ */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ════════════════════════════════════════════
   顶部导航栏
   ════════════════════════════════════════════ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ════════════════════════════════════════════
   表单组
   ════════════════════════════════════════════ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.form-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
}

/* ════════════════════════════════════════════
   状态徽标（轻量文字版）
   ════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-family-ui);
}

.badge-pending  { color: var(--color-accent-deep); background: var(--color-accent-soft); }
.badge-done     { color: #15803d; background: rgba(21, 128, 61, 0.08); }
.badge-neutral  { color: var(--color-text-secondary); background: var(--color-bg-element); }

/* ════════════════════════════════════════════
   Empty state
   ════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ════════════════════════════════════════════
   移动端全局响应式基础断点
   ════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* 最小可触摸点击区域 ≥44px */
  .btn, .btn-return, .btn-ghost {
    min-height: 44px;
    padding: 0 16px;
  }

  .btn-return {
    min-height: 36px;
    padding: 0 10px;
  }

  /* 任务行 */
  .task-item {
    min-height: 52px;
    padding: 12px 14px;
  }

  /* 输入框 */
  .silent-input {
    height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }
}