:root {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #F2F2F7;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-glass-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --text: #000000;
  --text-2: #636366;
  --text-3: #8E8E93;
  --line: rgba(60, 60, 67, 0.12);
  --accent: #007AFF;
  --danger: #FF3B30;
  --green: #34C759;
  --orange: #FF9500;
  --sheet-bg: #F2F2F7;
  --switch-off: #E5E5EA;
  --wheel-hl: rgba(120, 120, 128, 0.14);
  --spring: cubic-bezier(0.32, 1.25, 0.45, 1);
  --ease-ios: cubic-bezier(0.25, 0.9, 0.3, 1);
  --kb: 0px;
  --pad-x: clamp(14px, 4vw, 20px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --surface-glass: rgba(44, 44, 46, 0.78);
    --surface-glass-strong: rgba(44, 44, 46, 0.9);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.42);
    --text: #FFFFFF;
    --text-2: #AEAEB2;
    --text-3: #8E8E93;
    --line: rgba(255, 255, 255, 0.14);
    --accent: #0A84FF;
    --danger: #FF453A;
    --green: #30D158;
    --orange: #FF9F0A;
    --sheet-bg: #1C1C1E;
    --switch-off: #39393D;
    --wheel-hl: rgba(255, 255, 255, 0.12);
  }
}

[hidden] { display: none !important; }

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea {
  font-family: inherit;
  color: inherit;
}

button {
  touch-action: manipulation;
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 下拉刷新条 */
.ptr-bar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  transform: translate(-50%, -60px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s var(--ease-ios), opacity 0.2s;
  width: max-content;
}
.ptr-bar.visible { opacity: 1; }
.ptr-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
}
.ptr-bar.spin .ptr-spinner {
  animation: ptrSpin 0.7s linear infinite;
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* 视图切换 */
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.scroll-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: calc(env(safe-area-inset-top) + 58px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
}

.stage-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 4px var(--pad-x) 0;
}

/* Liquid Glass 顶部浮动栏（照样张 493a916c / be27d5eb） */
.glass-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) var(--pad-x) 10px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 30%, transparent);
}
.glass-topbar > * {
  pointer-events: auto;
}
.topbar-spacer { flex: 1; }

.glass-pill-group {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.16s var(--spring), opacity 0.15s;
}
.pill-btn:active { transform: scale(0.9); opacity: 0.7; }

.circle-glass-btn, .circle-done-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5px solid var(--glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s var(--spring);
}
.circle-done-btn {
  background: var(--accent);
  color: #FFFFFF;
  border-color: transparent;
}
.circle-glass-btn:active, .circle-done-btn:active { transform: scale(0.92); }

.detail-mini-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.detail-mini-title.show {
  opacity: 1;
  transform: translateY(0);
}

/* 智能列表 2×N 渐变网格卡片（照样张 493a916c） */
.smart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .smart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.smart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 86px;
  padding: 12px 14px 11px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  color: #FFFFFF;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.22s var(--spring), filter 0.18s;
}
.smart-card:active { transform: scale(0.96); filter: brightness(0.95); }

.smart-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.smart-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.smart-icon-circle.solid {
  background: #FFFFFF;
}

.smart-count {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}

.smart-label {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 7 张智能卡片的 iOS 渐变配色 */
.smart-today    { background: linear-gradient(135deg, #5BB0FF 0%, #2483F6 100%); }
.smart-sched    { background: linear-gradient(135deg, #FF837B 0%, #EC453D 100%); }
.smart-all      { background: linear-gradient(135deg, #62666B 0%, #2F3236 100%); }
.smart-flagged  { background: linear-gradient(135deg, #F6BE6E 0%, #E79232 100%); }
.smart-urgent   { background: linear-gradient(135deg, #F47296 0%, #DE3B6C 100%); }
.smart-done     { background: linear-gradient(135deg, #A1A7AE 0%, #767C85 100%); }
.smart-assigned { background: linear-gradient(135deg, #88DA90 0%, #4FB55B 100%); }

/* 建议列表卡片（照样张 493a916c） */
.suggest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.suggest-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #34C759;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.suggest-body {
  flex: 1;
  min-width: 0;
}
.suggest-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.suggest-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 1px;
}
.suggest-add {
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  margin: -6px -6px -6px 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.suggest-add svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: #34C759;
  color: #FFFFFF;
  transition: transform 0.16s var(--spring);
}
.suggest-add:active svg { transform: scale(0.88); }

/* 我的列表区块 */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 4px 10px;
}
.section-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.grouped-card {
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.list-row-wrap {
  position: relative;
}
.list-row-wrap + .list-row-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 58px;
  right: 0;
  height: 0.5px;
  background: var(--line);
}
.list-row-wrap.is-child .list-row {
  padding-left: 28px;
}
.list-row-wrap.is-child::before {
  left: 72px;
}

.list-row {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px 10px 14px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.list-row:active {
  background: rgba(120, 120, 128, 0.12);
}

.list-badge-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}
.folder-icon-box {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}

.list-row-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row-count {
  font-size: 17px;
  color: var(--text-3);
  font-variant-numeric: proportional-nums;
}
.list-row-chevron {
  color: var(--text-3);
  font-size: 19px;
  line-height: 1;
  opacity: 0.65;
  transition: transform 0.2s var(--ease-ios);
}
.list-row-chevron.expanded {
  transform: rotate(90deg);
}

/* 右下角悬浮 + 按钮（Liquid Glass 实心蓝/主题色） */
.fab-add {
  position: fixed;
  right: max(var(--pad-x), env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  z-index: 25;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  background: var(--fab-color, var(--accent));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.34), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.22s var(--spring), filter 0.15s;
}
.fab-add:active { transform: scale(0.9); filter: brightness(0.92); }

/* 详情页大标题与事项行（照样张 be27d5eb / 5c14eab8） */
.detail-inner {
  padding-top: 8px;
}
.detail-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.detail-large-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--detail-color, var(--accent));
}
.detail-count-badge {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: proportional-nums;
}
.detail-sub-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-3);
}

.group-section-title {
  margin: 18px 2px 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.reminder-list {
  display: flex;
  flex-direction: column;
}

.rem-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid var(--line);
}
.rem-swipe-wrap.is-editing {
  overflow: visible;
  border-bottom: 0;
  margin: 6px -6px;
}

.rem-actions-tray {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  z-index: 1;
}
.rem-tray-btn {
  min-width: 68px;
  padding: 0 12px;
  border: 0;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rem-tray-btn.info { background: #8E8E93; }
.rem-tray-btn.flag { background: #FF9500; }
.rem-tray-btn.del  { background: #FF3B30; }

.rem-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
  background: var(--bg);
  transition: transform 0.24s var(--ease-ios), background-color 0.2s, box-shadow 0.2s;
}
.rem-swipe-wrap.is-editing .rem-row {
  padding: 14px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* 复选圆圈 + Apple 打勾动画 */
.rem-check-btn {
  width: 44px;
  height: 44px;
  margin: -10px 0 -10px -10px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.rem-circle {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.8px solid #C7C7CC;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s var(--spring), background-color 0.2s, border-color 0.2s;
}
.rem-check-btn:active .rem-circle {
  transform: scale(0.84);
}
.rem-circle.checked,
.rem-row.completing .rem-circle {
  border-color: var(--check-color, var(--accent));
  background: var(--check-color, var(--accent));
  animation: checkPop 0.36s var(--spring);
}
.rem-circle svg {
  width: 14px;
  height: 14px;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.24s var(--ease-ios) 0.06s;
}
.rem-circle.checked svg,
.rem-row.completing .rem-circle svg {
  stroke-dashoffset: 0;
}
@keyframes checkPop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.rem-body {
  flex: 1;
  min-width: 0;
}
.rem-title {
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
  transition: color 0.2s, opacity 0.2s;
}
.rem-row.is-done .rem-title,
.rem-row.completing .rem-title {
  color: var(--text-3);
  text-decoration: line-through;
}
.rem-notes {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
}
.rem-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-3);
}
.rem-meta-due { color: var(--text-3); font-weight: 500; }
.rem-meta-due.overdue { color: var(--danger); font-weight: 600; }
.rem-meta-due.today { color: var(--accent); font-weight: 500; }
.rem-meta-flag { color: var(--orange); font-weight: 600; }
.rem-meta-urgent { color: var(--danger); font-weight: 600; }
.rem-meta-tag { color: var(--accent); }
.rem-meta-thumb {
  margin-top: 8px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  cursor: zoom-in;
  border: 0.5px solid var(--line);
}

/* 行内编辑输入 */
.rem-inline-title, .rem-inline-notes {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  resize: none;
  display: block;
}
.rem-inline-title {
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
}
.rem-inline-notes {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}

.rem-info-btn {
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* 行内编辑底部快捷工具栏（照样张 5c14eab8） */
.inline-kb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kb) + env(safe-area-inset-bottom) + 12px);
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad-x);
  pointer-events: none;
}
.kb-bar-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 420px;
  height: 48px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.kb-tool-btn {
  min-width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}
.kb-tool-btn.active { color: var(--accent); }

/* 空状态 */
.empty-hint {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 16px;
}

/* Sheet 弹出面板（照样张 046ff4c5 / 8e5510c8 / 96a9dfea） */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.34);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeMask 0.2s ease;
}
@keyframes fadeMask { from { opacity: 0; } to { opacity: 1; } }

.ios-sheet {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: min(92dvh, calc(100% - env(safe-area-inset-top) - 12px));
  background: var(--sheet-bg);
  border-radius: 28px 28px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.16);
  transform: translateY(0);
  transition: transform 0.26s var(--ease-ios);
  will-change: transform;
}
@media (min-width: 640px) {
  .sheet-mask {
    align-items: center;
    padding: 20px;
  }
  .ios-sheet {
    height: min(88dvh, 780px);
    border-radius: 26px;
  }
}

.sheet-grabber {
  width: 36px;
  height: 5px;
  border-radius: 99px;
  background: rgba(120, 120, 128, 0.3);
  margin: 8px auto 0;
  flex-shrink: 0;
}

.sheet-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  background: var(--sheet-bg);
  flex-shrink: 0;
}
.sheet-circle-btn, .sheet-done-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5px solid var(--glass-border);
  background: var(--surface-glass-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.16s var(--spring), background-color 0.18s;
}
.sheet-done-btn {
  background: rgba(120, 120, 128, 0.22);
  color: #FFFFFF;
  border-color: transparent;
}
.sheet-done-btn.active {
  background: var(--accent);
  color: #FFFFFF;
}
.sheet-circle-btn:active, .sheet-done-btn:active { transform: scale(0.92); }
.sheet-nav-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(env(safe-area-inset-bottom) + 28px);
}

.form-card {
  background: var(--surface);
  border-radius: 20px;
  overflow: hidden;
}
.form-divider {
  height: 0.5px;
  background: var(--line);
  margin: 0 16px;
}
.form-divider.indent {
  margin-left: 52px;
  margin-right: 0;
}
.form-section-label {
  margin: 20px 14px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
}
.form-footnote {
  margin: 8px 14px 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.45;
}

.ed-title-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 15px 16px 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  resize: none;
}
.ed-notes-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 12px 16px 15px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  resize: none;
}
.ed-inline-input {
  width: 100%;
  min-height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 10px 16px 10px 52px;
  font-size: 16px;
}

.form-row {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.tap-row { cursor: pointer; }
.tap-row:active { background: rgba(120, 120, 128, 0.1); }
.danger-row .row-title { color: var(--danger); }

.row-icon-muted {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 18px;
  flex-shrink: 0;
}
.list-dot-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}
.row-text {
  flex: 1;
  min-width: 0;
}
.row-title { font-size: 17px; }
.row-sub { font-size: 13px; margin-top: 1px; }
.row-sub.accent { color: var(--accent); }
.row-value {
  font-size: 16px;
  color: var(--text-3);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-chevron {
  font-size: 20px;
  color: var(--text-3);
  opacity: 0.65;
}

/* iOS Switch */
.ios-switch {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  border: 0;
  background: var(--switch-off);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.22s var(--ease-ios);
}
.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s var(--spring);
}
.ios-switch[aria-checked="true"] {
  background: var(--green);
}
.ios-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* 内联月历选择器（照样张 96a9dfea） */
.inline-calendar {
  padding: 12px 14px 14px;
  border-top: 0.5px solid var(--line);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-month-btn {
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
}
.cal-arrows {
  display: flex;
  gap: 4px;
}
.cal-nav-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.cal-weekdays, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}
.cal-weekdays {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.cal-day {
  position: relative;
  z-index: 1;
  height: 42px;
  border: 0;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cal-day.empty { pointer-events: none; }
.cal-day.today { color: var(--accent); font-weight: 700; }
.cal-day.selected {
  color: #FFFFFF;
  font-weight: 600;
}
.cal-day.selected::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  z-index: -1;
}

/* 内联时间滚轮（照样张 8e5510c8） */
.inline-time-picker {
  position: relative;
  height: 196px;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
  border-top: 0.5px solid var(--line);
  overflow: hidden;
}
.wheel-highlight {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: var(--wheel-hl);
  pointer-events: none;
}
.wheel-col {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  padding: 80px 0;
}
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--text-3);
  scroll-snap-align: center;
  cursor: pointer;
  border: 0;
  width: 100%;
  background: transparent;
}
.wheel-item.active {
  color: var(--text);
  font-weight: 600;
}

/* 附件图片预览 */
.image-preview-wrap {
  position: relative;
  padding: 0 16px 14px;
}
.image-preview-wrap img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 14px;
  display: block;
}
.img-remove-btn {
  position: absolute;
  top: 8px;
  left: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  cursor: pointer;
}

/* 新建列表颜色和图标选择器 */
.list-preview-card {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.list-preview-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.list-name-input {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  outline: none;
}
.color-palette, .icon-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.color-dot {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  position: relative;
}
.color-dot.selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2.5px solid var(--text-3);
}
.icon-choice {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-choice.selected {
  background: var(--text);
  color: var(--surface);
}

/* 搜索浮层 */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: calc(env(safe-area-inset-top) + 8px);
}
.search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--pad-x) 10px;
}
.search-input-wrap {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.search-icon { color: var(--text-3); flex-shrink: 0; }
.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
}
.search-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--text-3);
  color: #FFFFFF;
  font-size: 12px;
  cursor: pointer;
}
.search-cancel {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 17px;
  cursor: pointer;
}
.search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--pad-x) calc(env(safe-area-inset-bottom) + 24px);
}

/* 云同步面板宿主微调 */
.sync-sheet {
  padding: 8px 18px calc(env(safe-area-inset-bottom) + 24px);
  height: auto;
  max-height: 88dvh;
}

/* iOS Action Sheet 操作表 */
.as-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
}
@media (min-width: 640px) {
  .as-mask { align-items: center; }
}
.as-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.as-group {
  background: var(--surface-glass-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 16px;
  overflow: hidden;
}
.as-title {
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  border-bottom: 0.5px solid var(--line);
}
.as-btn {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 0;
  border-top: 0.5px solid var(--line);
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
}
.as-btn:first-child { border-top: 0; }
.as-btn.danger { color: var(--danger); }
.as-btn:active { background: rgba(120, 120, 128, 0.14); }
.as-cancel {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

/* 图片放大查看器 */
.img-viewer-mask {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.img-viewer-mask img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
}
.img-viewer-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
}

/* Toast */
.toast-pill {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.9);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  max-width: min(88vw, 380px);
  text-align: center;
}

@media (hover: hover) {
  .pill-btn:hover, .circle-glass-btn:hover { background: rgba(120, 120, 128, 0.1); }
  .list-row:hover { background: rgba(120, 120, 128, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}