/* ==========================================================================
   rhythm
   视觉基调：iOS 原生 + 莫兰迪低饱和配色
   ========================================================================== */

/* ---------- 莫兰迪色板 ---------- */
:root {
  --m-work:     #C9B6B0;  /* 灰粉 */
  --m-health:   #B7C0B1;  /* 鼠尾草绿 */
  --m-study:    #B8A9B3;  /* 淡紫灰 */
  --m-personal: #B3B9C0;  /* 雾霾蓝 */
  --m-life:     #D6C7B8;  /* 沙色 */
  --m-family:   #D2B9A7;  /* 陶土 */
  --m-social:   #C5B9C9;  /* 薰衣草灰 */
  --m-other:    #B9B2A9;  /* 石灰色 */
}

/* ---------- 亮色主题 ---------- */
:root {
  --canvas:        #F7F5F3;
  --canvas-top:    #FBFAF8;
  --card:          #FFFFFF;
  --card-press:    #F4F2F0;
  --text:          #1C1C1E;
  --text-2:        #8A8A8E;
  --text-3:        #B4B2AE;
  --hairline:      rgba(60, 60, 67, 0.10);
  --hairline-soft: rgba(60, 60, 67, 0.06);
  --fill:          rgba(120, 120, 128, 0.10);
  --fill-strong:   rgba(120, 120, 128, 0.18);
  --accent:        #A9B4A4;
  --danger:        #D98C8C;
  --shadow-card:   0 1px 2px rgba(28, 25, 23, 0.045), 0 6px 18px rgba(28, 25, 23, 0.045);
  --shadow-sheet:  0 -8px 40px rgba(28, 25, 23, 0.16);
  --blur-bg:       rgba(247, 245, 243, 0.78);
  --seg-bg:        rgba(120, 120, 128, 0.12);
  --seg-pill:      #FFFFFF;
}

/* ---------- 深色主题 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* 莫兰迪色在深色模式下整体调亮约 12%，保持柔和但不发闷 */
    --m-work:     #CFBFB9;
    --m-health:   #C0C8BA;
    --m-study:    #C0B3BC;
    --m-personal: #BCC1C8;
    --m-life:     #DBCEC0;
    --m-family:   #D7C1B2;
    --m-social:   #CCC1CF;
    --m-other:    #C1BBB3;

    --canvas:        #121110;
    --canvas-top:    #171614;
    --card:          #1F1E1C;
    --card-press:    #272523;
    --text:          #F2F1EE;
    --text-2:        #9A9691;
    --text-3:        #6E6A65;
    --hairline:      rgba(235, 235, 245, 0.13);
    --hairline-soft: rgba(235, 235, 245, 0.07);
    --fill:          rgba(120, 120, 128, 0.20);
    --fill-strong:   rgba(120, 120, 128, 0.32);
    --accent:        #BCC6B7;
    --danger:        #C97C7C;
    --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.28);
    --shadow-sheet:  0 -8px 40px rgba(0, 0, 0, 0.55);
    --blur-bg:       rgba(18, 17, 16, 0.76);
    --seg-bg:        rgba(120, 120, 128, 0.22);
    --seg-pill:      #48453F;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 属性必须能压过组件的 display 声明 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--canvas);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", Helvetica, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  /* 独立窗口下禁止长按选择与橡皮筋 */
  -webkit-user-select: none;
  user-select: none;
}

body.is-locked { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ==========================================================================
   顶部导航条
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  transition: background-color .28s ease, backdrop-filter .28s ease;
  pointer-events: none;
}
.topbar__inner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px 0 16px;
  position: relative;
}
.topbar__title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
  pointer-events: none;
}
.topbar.is-stuck {
  background: var(--blur-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 .5px 0 var(--hairline);
}
.topbar.is-stuck .topbar__title { opacity: 1; transform: translate(-50%, -50%) translateY(0); }

.topbar__add {
  pointer-events: auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--accent);
  transition: transform .18s cubic-bezier(.32,.72,0,1), opacity .18s ease;
}
.topbar__add:active { transform: scale(.88); opacity: .6; }

/* ==========================================================================
   页面骨架
   ========================================================================== */
.page {
  min-height: 100%;
  padding: calc(env(safe-area-inset-top) + 44px) 16px calc(env(safe-area-inset-bottom) + 40px);
  max-width: 720px;
  margin: 0 auto;
}

.page__head { padding: 8px 4px 18px; }
.page__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.021em;
}
.page__subtitle {
  margin: 5px 0 0;
  font-size: 15px;
  color: var(--text-2);
  letter-spacing: .02em;
}

.page__footer {
  margin-top: 34px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: .02em;
}

/* ==========================================================================
   分组
   ========================================================================== */
.group { margin-bottom: 26px; }

.group__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 10px;
  color: var(--text-2);
}
.group__icon { display: grid; place-items: center; opacity: .85; }
.group__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
.group__progress {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: color .25s ease;
}
.group__progress.is-done { color: var(--accent); }

/* ==========================================================================
   任务列表
   ========================================================================== */
.tasks { list-style: none; margin: 0; padding: 0; }

.task {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
  margin-bottom: 10px;
  /* 被移除时的收缩动画 */
  transition: margin .3s ease;
}
.task.is-removing {
  animation: taskOut .26s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes taskOut {
  to { opacity: 0; transform: scale(.96); margin-bottom: 0; max-height: 0; }
}

.task__actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  border-radius: 17px;
  overflow: hidden;
  /* 平时隐藏，只有滑动 / 展开时才显示：
     避免已完成任务的半透明卡片把操作层透出来 */
  visibility: hidden;
}
.task.is-open .task__actions,
.task.is-dragging .task__actions { visibility: visible; }
.task__act {
  width: 84px;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
.task__act--edit   { background: #B8A9B3; }
.task__act--delete { background: var(--danger); }
.task__act:active  { filter: brightness(.93); }

.task__card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  background: var(--card);
  border-radius: 17px;
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
  will-change: transform;
  transition: transform .3s cubic-bezier(.32,.72,0,1), background-color .15s ease;
}
.task__card:active { background: var(--card-press); }
.task.is-dragging .task__card { transition: none; }
.task.is-open .task__card { border-radius: 17px 0 0 17px; }

/* 左侧 6pt 莫兰迪色条（--task-color 由 JS 按任务类型注入） */
.task__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 17px 0 0 17px;
  background: var(--task-color, var(--m-other));
}
.task.is-open .task__bar { border-radius: 17px 0 0 17px; }

/* ---------- 圆形复选框 ---------- */
.checkbox {
  position: relative;
  flex: 0 0 auto;
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 1.6px solid var(--fill-strong);
  background: transparent;
  display: grid;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease,
              transform .3s cubic-bezier(.34, 1.56, .64, 1);
  margin-left: 2px;
}
.checkbox:active { transform: scale(.86); }
.checkbox__tick {
  width: 17px; height: 17px;
  display: block;
  overflow: visible;
}
.checkbox__tick path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset .26s cubic-bezier(.4, 0, .2, 1) .04s;
}
.task.is-done .checkbox {
  background: var(--task-color, var(--m-other));
  border-color: transparent;
}
.task.is-done .checkbox__tick path { stroke-dashoffset: 0; }

/* ---------- 文本 ---------- */
.task__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task__title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.task__meta {
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: .01em;
  display: none;
}
.task__meta.is-shown { display: block; }

.task.is-done .task__title {
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
  text-decoration-thickness: 1.4px;
}
.task.is-done .task__card { opacity: .7; }
.task.is-done .task__bar { opacity: .45; }
.task.is-done .task__dot { opacity: .4; }

/* ---------- 右侧标记 ---------- */
.task__trailing {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
}
.task__repeat { display: none; }
.task.is-repeating .task__repeat { display: block; }
.task__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--task-color, var(--m-other));
  transition: background-color .2s ease;
}

/* 未完成 / 已完成之间的轻分隔 */
.group__divider {
  list-style: none;
  height: 9px;
  position: relative;
}
.group__divider::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 50%;
  height: 1px;
  background: var(--hairline-soft);
}

/* ==========================================================================
   空状态
   ========================================================================== */
.empty {
  padding: 44px 20px 30px;
  text-align: center;
  color: var(--text-3);
  animation: fadeUp .4s cubic-bezier(.32,.72,0,1);
}
.empty__mark { display: grid; place-items: center; margin-bottom: 14px; }
.empty__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-2); }
.empty__desc  { margin: 6px 0 0; font-size: 13.5px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   底部抽屉（添加 / 编辑）
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 18, 16, .34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--kb, 0px);   /* iOS 键盘弹起时由 JS 写入的高度 */
  z-index: 51;
  max-height: calc(92vh - var(--kb, 0px));
  max-height: calc(100dvh - var(--kb, 0px) - 14px);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(102%);
  transition: transform .38s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }

.sheet__grabber {
  padding: 9px 0 3px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.sheet__grabber span {
  width: 38px; height: 5px;
  border-radius: 3px;
  background: var(--fill-strong);
}

.sheet__nav {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  flex: 0 0 auto;
}
.sheet__navtitle {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.sheet__btn {
  padding: 8px 12px;
  font-size: 17px;
  color: var(--text-2);
  border-radius: 10px;
  transition: opacity .15s ease;
}
.sheet__btn:active { opacity: .45; }
.sheet__btn--primary { color: var(--accent); font-weight: 600; }
.sheet__btn--primary:disabled { color: var(--text-3); opacity: .5; }

.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 16px calc(env(safe-area-inset-bottom) + 22px);
}

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 22px; }
.form-group__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 4px 8px;
}
.form-group__hint {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 8px 4px 0;
  line-height: 1.45;
}
.form-card {
  background: var(--card);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 14px;
  position: relative;
}
.form-row + .form-row::before {
  content: "";
  position: absolute;
  left: 14px; right: 0; top: 0;
  height: .5px;
  background: var(--hairline);
}
.form-row--plain { padding: 0; }
.form-row__label { font-size: 16px; color: var(--text); flex: 0 0 auto; }
.form-row__value { margin-left: auto; font-size: 16px; color: var(--text-2); }

.form-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 17px;
  color: var(--text);
  padding: 14px;
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
}
.form-input::placeholder { color: var(--text-3); }

/* 可点击的选择行 */
.picker-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 14px;
  position: relative;
  text-align: left;
  transition: background-color .15s ease;
}
.picker-row + .picker-row::before {
  content: "";
  position: absolute;
  left: 14px; right: 0; top: 0;
  height: .5px;
  background: var(--hairline);
}
.picker-row:active { background: var(--fill); }
.picker-row__title { font-size: 16.5px; flex: 1; }
.picker-row__sub { font-size: 14px; color: var(--text-3); }
.picker-row__check {
  color: var(--accent);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.picker-row.is-selected .picker-row__check { opacity: 1; transform: scale(1); }

/* 分段控件 */
.segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--seg-bg);
  border-radius: 10px;
  position: relative;
}
.segmented__item {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  transition: background-color .22s cubic-bezier(.32,.72,0,1), color .22s ease,
              box-shadow .22s ease;
}
.segmented__item.is-active {
  background: var(--seg-pill);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .03);
}

/* 颜色选择器 */
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 4px;
  padding: 12px 8px 14px;
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border-radius: 12px;
  transition: background-color .15s ease;
}
.swatch:active { background: var(--fill); }
.swatch__dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.swatch__dot svg { opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1); }
.swatch.is-selected .swatch__dot { transform: scale(1.06); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.6px currentColor; }
.swatch.is-selected .swatch__dot svg { opacity: 1; transform: scale(1); }
.swatch__name { font-size: 11.5px; color: var(--text-2); letter-spacing: .01em; }

/* 星期 / 月日 选择 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 14px;
}
.chip {
  flex: 1 0 auto;
  min-width: 38px;
  padding: 8px 0;
  border-radius: 10px;
  background: var(--fill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.chip:active { transform: scale(.93); }
.chip.is-selected { background: var(--accent); color: #fff; font-weight: 600; }

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 12px 12px 14px;
}
.day-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fill);
  font-size: 13.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.day-cell:active { transform: scale(.9); }
.day-cell.is-selected { background: var(--accent); color: #fff; font-weight: 600; }
.day-cell:disabled { opacity: .28; }

/* 步进器 */
.stepper {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--seg-bg);
  border-radius: 9px;
  padding: 2px;
}
.stepper__btn {
  width: 34px; height: 30px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 19px;
  color: var(--text-2);
  transition: background-color .15s ease, opacity .15s ease;
}
.stepper__btn:active { background: var(--fill-strong); }
.stepper__btn:disabled { opacity: .3; }
.stepper__value {
  min-width: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translate(-50%, 14px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(28, 26, 24, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #F5F3F1;
  font-size: 14.5px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  opacity: 0;
  transition: opacity .26s ease, transform .32s cubic-bezier(.32,.72,0,1);
  max-width: calc(100vw - 40px);
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.toast__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__action {
  color: #BFD0BA;
  font-weight: 600;
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 7px;
}
.toast__action:active { opacity: .55; }

/* ---------- 表单内的子区块（自定义星期 / 月日 / 间隔） ---------- */
.form-subblock { position: relative; }
.form-subblock::before {
  content: "";
  position: absolute;
  left: 14px; right: 0; top: 0;
  height: .5px;
  background: var(--hairline);
}
.form-subblock__title {
  padding: 13px 14px 0;
  font-size: 13.5px;
  color: var(--text-3);
}
.form-subblock__hint {
  padding: 0 14px 13px;
  font-size: 13px;
  color: var(--text-3);
}

/* 关联周必做时的小色点 */
.link-dot {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: -4px;
}

/* ---------- 安装引导 ---------- */
.install-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 2px 20px;
  padding: 13px 14px;
  border-radius: 15px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
  animation: fadeUp .45s cubic-bezier(.32,.72,0,1);
}
.install-tip__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.install-tip__body strong { color: var(--text); font-size: 14.5px; font-weight: 600; }
.install-tip__close {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 8px;
  transition: opacity .15s ease;
}
.install-tip__close:active { opacity: .5; }

/* ==========================================================================
   无障碍 / 动效偏好
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 大屏 / 横屏微调 */
@media (min-width: 560px) {
  .page__title { font-size: 36px; }
}