/* 样式与动效遵循 emil-design-eng skill：
   - 只 transition 明确属性，禁 all；进出场 ease-out，位移 ease-in-out，颜色 ease
   - 高频交互(勾任务) <=220ms；抽屉 300ms 进 / 200ms 出（退场快于进场）
   - 按压元素 :active scale(0.97)；hover 只在 (hover:hover) 生效
   - 列表退场用 opacity+height 组合（Family drawer 模式）；适配 prefers-reduced-motion */

:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1c1e26;
  --muted: #8a8f9e;
  --accent: #4f6df5;
  --accent-soft: rgba(79, 109, 245, 0.10);
  --danger: #e5484d;
  --border: #e4e6eb;
  --shadow-card: 0 1px 2px rgba(28, 30, 38, 0.05);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151a;
    --card: #1e2028;
    --text: #e8eaf0;
    --muted: #7d8294;
    --accent: #6d86ff;
    --accent-soft: rgba(109, 134, 255, 0.14);
    --danger: #ff6369;
    --border: #2c2f3a;
    --shadow-card: none;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }  /* 防止 display:flex 等覆盖 hidden 属性 */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select {
  font: inherit; color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 150ms ease;
}
input:focus, select:focus { border-color: var(--accent); }

/* 所有可按压元素：即时按压反馈（100-160ms 档） */
.primary, .tab, .chip, .check, .add-module, #sheet button {
  transition: transform 160ms var(--ease-out);
}
.primary:active, .tab:active, .chip:active, .add-module:active, #sheet button:active {
  transform: scale(0.97);
}
.check:active { transform: scale(0.95); }

.primary {
  background: var(--accent); color: #fff;
  border-radius: 10px; padding: 10px 16px;
}
.hint { color: var(--muted); font-size: 12px; }
.err { color: var(--danger); font-size: 14px; min-height: 1.5em; }

/* ---------- 登录（罕见场景，允许入场动画） ---------- */
#login-view { display: flex; align-items: center; justify-content: center; height: 100%; }
.login-box {
  display: flex; flex-direction: column; gap: 14px;
  width: min(320px, 86vw); text-align: center;
  animation: rise-in 350ms var(--ease-out) backwards;
}
.login-logo { width: 72px; height: 72px; margin: 0 auto; border-radius: 18px; }
.login-box h1 { font-size: 22px; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- 主界面 ---------- */
#app-view { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: env(safe-area-inset-top) 12px 0;
}
#module-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 2px 10px;
  scrollbar-width: none;
}
#module-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out),
              background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab .cnt { font-size: 12px; opacity: .75; margin-left: 4px; }
.tab.add-module { font-weight: 600; }

main { flex: 1; padding: 4px 12px 130px; }

#offline-tip {
  background: color-mix(in srgb, var(--danger) 12%, var(--card));
  color: var(--danger);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 14px; text-align: center;
  opacity: 1; transform: translateY(0);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-6px); }
}

#task-list, #done-list { list-style: none; }
.task {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 13px 14px;
  margin-bottom: 8px;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .tab:not(.active):hover { border-color: var(--accent); color: var(--text); }
  .task:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--border)); }
  #sheet button:hover { background: var(--bg); }
  .chip:not(.on):hover { border-color: var(--accent); }
}

/* 首屏加载 stagger（仅装饰，只播一次，40ms 间隔） */
#task-list.stagger .task { animation: rise-in 240ms var(--ease-out) backwards; }
#task-list.stagger .task:nth-child(2) { animation-delay: 40ms; }
#task-list.stagger .task:nth-child(3) { animation-delay: 80ms; }
#task-list.stagger .task:nth-child(4) { animation-delay: 120ms; }
#task-list.stagger .task:nth-child(5) { animation-delay: 160ms; }
#task-list.stagger .task:nth-child(n+6) { animation-delay: 200ms; }

/* 勾掉任务的退场：高频操作，opacity+height 组合，全程 <=220ms */
.task.leaving {
  opacity: 0;
  transition: opacity 160ms var(--ease-out),
              height 220ms var(--ease-in-out),
              padding-top 220ms var(--ease-in-out), padding-bottom 220ms var(--ease-in-out),
              margin-bottom 220ms var(--ease-in-out),
              border-top-width 220ms var(--ease-in-out), border-bottom-width 220ms var(--ease-in-out);
  padding-top: 0; padding-bottom: 0; margin-bottom: 0;
  border-top-width: 0; border-bottom-width: 0;
  pointer-events: none;
}

.check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  transition: transform 160ms var(--ease-out),
              background-color 150ms ease, border-color 150ms ease;
}
.task.done-item .check { background: var(--accent); border-color: var(--accent); position: relative; }
.task.done-item .check::after {
  content: "✓"; color: #fff; font-size: 14px;
  position: absolute; inset: 0; display: grid; place-items: center;
}
.task .body { flex: 1; min-width: 0; }
.task .title { word-break: break-all; }
.task.done-item .title { color: var(--muted); text-decoration: line-through; }
.task .meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.recur-badge::before { content: "↻ "; }
#empty-tip { text-align: center; color: var(--muted); padding: 40px 0; }

#done-section { margin-top: 18px; }
#done-section summary {
  color: var(--muted); font-size: 14px; cursor: pointer;
  padding: 6px 2px; user-select: none; -webkit-user-select: none;
}
#done-section ul { margin-top: 8px; }

/* ---------- 底部添加栏（高频，无出入场动画） ---------- */
#add-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  max-width: 560px; margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
#add-form { display: flex; gap: 8px; }
#add-form select { flex: 0 0 auto; width: 92px; padding-right: 6px; }
#add-form input { flex: 1; min-width: 0; }
#add-form .primary { flex: 0 0 auto; width: 46px; padding: 10px 0; font-size: 20px; line-height: 1; }
#recur-opts { padding-bottom: 10px; }
#weekday-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip {
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--muted);
  transition: transform 160ms var(--ease-out),
              background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#monthday-row, #ndays-row { display: flex; gap: 8px; align-items: center; }
#monthday-row input, #ndays-row input { width: 130px; }

/* ---------- 底部菜单（偶发，抽屉曲线 300ms 进 / 200ms 出） ---------- */
#sheet-mask {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;   /* 退场（基态）快 */
}
#sheet-mask.open { opacity: 1; transition: opacity 200ms ease; }
#sheet {
  width: min(560px, 100%);
  background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(100%);
  transition: transform 200ms var(--ease-out);          /* 退场快 */
}
#sheet-mask.open #sheet {
  transform: translateY(0);
  transition: transform 300ms var(--ease-drawer);       /* 进场 iOS 抽屉曲线 */
}
#sheet .sheet-title {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 6px 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sheet button {
  padding: 13px; border-radius: 12px; font-size: 16px; text-align: center;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
#sheet button:active { background: var(--bg); }
#sheet button.danger { color: var(--danger); }
#sheet button.cancel { color: var(--muted); margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; }

/* ---------- 减弱动效：保留透明度/颜色，去掉位移 ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-box, #task-list.stagger .task { animation: none; }
  .primary:active, .tab:active, .chip:active, .add-module:active,
  #sheet button:active, .check:active { transform: none; }
  #sheet, #sheet-mask.open #sheet { transform: none; transition: opacity 150ms ease; }
  #offline-tip { transition: opacity 200ms ease; }
  .task.leaving { transition: opacity 160ms ease; }
}