/* ============================================================
   Roger Xu的备忘录 — 样式
   桌面/iPad：左半整列「今日」+ 右上「常态」+ 右下「明日」
   iPhone：单列堆叠，顺序 今日 → 明日 → 常态
   ============================================================ */

:root {
  color-scheme: light dark;

  --bg:          #f4f5f8;
  --bg-veil:     rgba(244,245,248,.78);
  --panel:       #ffffff;
  --panel-2:     #f7f8fa;
  --border:      rgba(18,22,33,.08);
  --border-2:    rgba(18,22,33,.055);
  --text:        #10131a;
  --text-2:      #5c6373;
  --text-3:      #9aa0ad;
  --accent:      #5b6cff;
  --accent-2:    #8b7bff;
  --accent-soft: rgba(91,108,255,.10);
  --today:       #ff9f0a;
  --tomorrow:    #5b6cff;
  --standing:    #9aa0ad;
  --danger:      #ff453a;
  --ok:          #30d158;

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 13px;

  --sh-1: 0 1px 2px rgba(16,19,26,.04), 0 2px 6px rgba(16,19,26,.035);
  --sh-2: 0 2px 8px rgba(16,19,26,.05), 0 14px 34px rgba(16,19,26,.075);
  --sh-3: 0 10px 30px rgba(16,19,26,.14), 0 40px 80px rgba(16,19,26,.18);
  --glow: 0 6px 18px rgba(91,108,255,.36);

  /* 玻璃拟态 */
  --glass:        rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.90);
  --glass-line:   rgba(255,255,255,.85);
  --glass-blur:   22px;

  /* 极光背景 */
  --aurora-1:     rgba(129,140,248,.60);
  --aurora-2:     rgba(244,114,182,.46);
  --aurora-3:     rgba(56,189,248,.50);
  --aurora-blur:  62px;

  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0d0f14;
    --bg-veil:     rgba(13,15,20,.76);
    --panel:       #171a21;
    --panel-2:     #1e222b;
    --border:      rgba(255,255,255,.075);
    --border-2:    rgba(255,255,255,.05);
    --text:        #e9ecf1;
    --text-2:      #98a0b0;
    --text-3:      #676e7d;
    --accent:      #7b88ff;
    --accent-2:    #a08cff;
    --accent-soft: rgba(123,136,255,.14);
    --today:       #ffb340;
    --tomorrow:    #7b88ff;
    --standing:    #676e7d;
    --danger:      #ff6961;
    --ok:          #4ade80;

    --sh-1: 0 1px 2px rgba(0,0,0,.3);
    --sh-2: 0 2px 8px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.4);
    --sh-3: 0 10px 30px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.55);
    --glow: 0 6px 20px rgba(123,136,255,.4);

    --glass:        rgba(24,27,36,.56);
    --glass-strong: rgba(22,25,33,.94);
    --glass-line:   rgba(255,255,255,.10);
    --glass-blur:   24px;

    --aurora-1:     rgba(99,102,241,.66);
    --aurora-2:     rgba(168,85,247,.54);
    --aurora-3:     rgba(14,165,233,.50);
    --aurora-blur:  70px;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
               "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 38%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════ 极光背景 ══════════════ */

.aurora {
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  filter: blur(var(--aurora-blur)) saturate(150%);
  -webkit-filter: blur(var(--aurora-blur)) saturate(150%);
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.blob--1 {
  width: 58vmax; height: 58vmax;
  left: 0%; top: -8%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-1) 0%, transparent 70%);
  animation: drift1 54s ease-in-out infinite;
}
.blob--2 {
  width: 50vmax; height: 50vmax;
  right: -8%; top: 16%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-2) 0%, transparent 70%);
  animation: drift2 68s ease-in-out infinite;
}
.blob--3 {
  width: 62vmax; height: 62vmax;
  left: 16%; bottom: -16%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-3) 0%, transparent 70%);
  animation: drift3 60s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
  66%      { transform: translate3d(-5vw, 12vh, 0) scale(.92); }
}
@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-11vw, 9vh, 0) scale(1.1); }
  70%      { transform: translate3d(4vw, -6vh, 0) scale(.94); }
}
@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30%      { transform: translate3d(7vw, -9vh, 0) scale(1.08); }
  65%      { transform: translate3d(-8vw, 5vh, 0) scale(.93); }
}

/* 页面切到后台就停，别白耗电 */
.is-hidden .blob { animation-play-state: paused; }

/* ══════════════ 外壳 ══════════════ */

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-left: var(--sl);
  padding-right: var(--sr);
}

/* ══════════════ 顶栏 ══════════════ */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: calc(var(--st) + 20px) 22px 14px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color .24s ease, background .24s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}

.topbar-text { min-width: 0; }

.app-title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sub {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .01em;
}

.sync-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}

.sync-chip:active { background: var(--panel-2); }

.sync-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex: 0 0 auto;
  transition: background .2s;
}

.sync-chip[data-state="ok"]      .sync-dot { background: var(--ok); }
.sync-chip[data-state="busy"]    .sync-dot { background: var(--today); animation: pulse 1s ease-in-out infinite; }
.sync-chip[data-state="warn"]    .sync-dot { background: var(--today); }
.sync-chip[data-state="err"]     .sync-dot { background: var(--danger); }
.sync-chip[data-state="offline"] .sync-dot { background: var(--text-3); }

@keyframes pulse { 50% { opacity: .2; } }

/* ══════════════ 主板块 ══════════════ */

.board {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 0;
  padding: 0 22px;
}

.panel--today    { grid-area: 1 / 1 / 3 / 2; }
.panel--standing { grid-area: 1 / 2 / 2 / 3; }
.panel--tomorrow { grid-area: 2 / 2 / 3 / 3; }

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  overflow: hidden;
  transition: box-shadow .24s ease, transform .24s cubic-bezier(.32,.72,0,1);
}

@media (hover: hover) and (min-width: 720px) {
  .panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-line);
  }
}

/* 不支持毛玻璃就退回实色，别让文字糊掉 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--panel); }
}

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
}

.panel-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dot--today    { background: var(--today); }
.dot--tomorrow { background: var(--tomorrow); }
.dot--standing { background: var(--standing); }

.panel-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 3px 9px;
  min-width: 24px;
  text-align: center;
}

.note-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 2px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-3);
  font-size: 13px;
}
.panel-empty svg { width: 26px; height: 26px; opacity: .5; }
.panel-empty[hidden] { display: none; }

/* ══════════════ 条目 ══════════════ */

.note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 9px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.note:active { background: var(--panel-2); }

@media (hover: hover) {
  .note:hover { background: var(--panel-2); }
}

.note-check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1.7px solid var(--text-3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background .16s, border-color .16s, transform .12s;
}

.note-check svg {
  width: 12px; height: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .16s, transform .16s;
}

.note-check:active { transform: scale(.9); }

.note.done .note-check {
  background: var(--accent);
  border-color: var(--accent);
}
.note.done .note-check svg { opacity: 1; transform: scale(1); }

.note-bullet {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  display: grid;
  place-items: center;
}
.note-bullet::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-3);
}

.note-body { flex: 1 1 auto; min-width: 0; }

.note-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.note.done .note-text {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent);
}

.note.overdue .note-text { color: var(--danger); }

.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3.5px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.badge svg { width: 11px; height: 11px; }

.badge--today    { background: color-mix(in srgb, var(--today) 15%, transparent); color: var(--today); }
.badge--tomorrow { background: var(--accent-soft); color: var(--accent); }
.badge--overdue  { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.note.done .note-meta { opacity: .55; }

/* ══════════════ 底部操作栏 ══════════════ */

.actionbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px calc(var(--sb) + 16px);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 92%, transparent) 40%, transparent);
}

.bar-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  color: var(--text);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: var(--sh-1), inset 0 1px 0 var(--glass-line);
  transition: transform .15s cubic-bezier(.32,.72,0,1), background .18s;
  -webkit-tap-highlight-color: transparent;
}

.bar-btn svg { width: 17px; height: 17px; color: var(--text-2); flex: 0 0 auto; }
.bar-btn span:not(.bar-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-btn:active { transform: scale(.975); }
@media (hover: hover) { .bar-btn:hover { background: var(--glass-strong); } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar-btn { background: var(--panel); }
}

.bar-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

.bar-badge--soft {
  background: color-mix(in srgb, var(--text-3) 30%, transparent);
  color: var(--text);
  box-shadow: none;
}

.bar-badge[hidden] { display: none; }

.fab {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform .16s cubic-bezier(.34,1.4,.64,1);
  -webkit-tap-highlight-color: transparent;
}

.fab svg { width: 27px; height: 27px; }
.fab:active { transform: scale(.9); }
@media (hover: hover) { .fab:hover { transform: scale(1.06); } }

/* ══════════════ 弹出层 ══════════════ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8,10,14,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
}
.sheet-backdrop[hidden] { display: none; }

@keyframes fadeIn { from { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
  padding-bottom: var(--sb);
  animation: slideUp .34s cubic-bezier(.32,.72,0,1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet { background: var(--panel); }
}

@keyframes slideUp { from { transform: translateY(6%); opacity: .6; } }

.sheet--full { max-height: 94dvh; height: 94dvh; }
.sheet--narrow { max-width: 440px; }

.sheet-grabber {
  flex: 0 0 auto;
  width: 38px; height: 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-3) 42%, transparent);
  margin: 9px auto 3px;
}

.sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 14px;
}

.sheet-title {
  margin: 0;
  font-size: 19px;
  font-weight: 690;
  letter-spacing: -.022em;
}

.icon-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background .16s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:active { background: var(--border); }

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-body--scroll { padding-bottom: 20px; gap: 22px; }

.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 16px 20px 18px;
}

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

.editor-text {
  width: 100%;
  min-height: 84px;
  max-height: 32dvh;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  resize: none;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.editor-text::placeholder { color: var(--text-3); }

.editor-text:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}

.field { display: flex; flex-direction: column; gap: 9px; }

.field-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 620;
  color: var(--text-2);
  letter-spacing: .01em;
}

.field-note { font-size: 12px; font-weight: 500; color: var(--text-3); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 560;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.chip:active { transform: scale(.96); }

.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 34%, transparent);
}

.date-input, .time-input, .token-input {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.date-input:focus, .time-input:focus, .token-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}

.token-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* 开关 */

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  cursor: pointer;
}

.switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-title { font-size: 14.5px; font-weight: 600; }
.switch-note { font-size: 12px; color: var(--text-3); line-height: 1.4; }

.switch { flex: 0 0 auto; position: relative; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch-track {
  display: block;
  width: 50px; height: 30px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-3) 34%, transparent);
  transition: background .22s ease;
  padding: 3px;
}

.switch-thumb {
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}

.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }

/* 主动提醒状态行 */

.push-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  margin-top: -6px;
}
.push-row[hidden] { display: none; }

.push-state {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.push-state[data-level="ok"]     { color: var(--ok); }
.push-state[data-level="warn"]   { color: var(--today); }
.push-state[data-level="not-ok"] { color: var(--danger); }

.link-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 620;
  padding: 6px 2px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.link-btn:active { opacity: .55; }
.link-btn:disabled { opacity: .5; }
.link-btn[hidden] { display: none; }

/* 按钮 */

.btn {
  appearance: none;
  border: 0;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--r-md);
  font-size: 15.5px;
  font-weight: 640;
  cursor: pointer;
  transition: transform .14s, opacity .14s, background .16s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(.975); }

.btn--primary {
  flex: 1 1 auto;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: var(--glow);
}

.btn--ghost {
  flex: 0 0 auto;
  background: var(--panel-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.btn--danger {
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
}
.btn--danger[hidden] { display: none; }

/* ══════════════ 全览 ══════════════ */

.search-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 6px;
  padding: 0 14px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.search-wrap svg { width: 17px; height: 17px; color: var(--text-3); flex: 0 0 auto; }

.search-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 15px;
}
.search-wrap input::-webkit-search-cancel-button { display: none; }

.ov-group { display: flex; flex-direction: column; gap: 2px; }

.ov-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 680;
  color: var(--text-3);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 0 9px 5px;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.ov-group-title .n {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  opacity: .8;
}

.ov-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

mark {
  background: color-mix(in srgb, var(--today) 32%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ══════════════ 口令页 ══════════════ */

.token-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.token-desc--dim { color: var(--text-3); font-size: 12.5px; }

.token-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.5px 5px;
}

.token-error {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
  font-weight: 550;
}
.token-error[hidden] { display: none; }

/* ══════════════ 到点提醒 ══════════════ */

.alarm-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8,10,14,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .22s ease;
}
.alarm-pop[hidden] { display: none; }

.alarm-card {
  width: 100%;
  max-width: 330px;
  background: var(--panel);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 26px 22px 20px;
  text-align: center;
  animation: popIn .34s cubic-bezier(.32,.72,0,1);
}

@keyframes popIn { from { transform: scale(.92); opacity: 0; } }

.alarm-icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  animation: ring 1.6s ease-in-out infinite;
}
.alarm-icon svg { width: 26px; height: 26px; }

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-9deg); }
  24% { transform: rotate(9deg); }
  36% { transform: rotate(-6deg); }
  48% { transform: rotate(6deg); }
  60% { transform: rotate(0); }
}

.alarm-time {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.alarm-text {
  margin: 0 0 20px;
  font-size: 16.5px;
  font-weight: 570;
  line-height: 1.5;
  word-break: break-word;
}

.alarm-actions { display: flex; gap: 9px; }
.alarm-actions .btn { height: 46px; font-size: 14.5px; }

/* ══════════════ 提示条 ══════════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sb) + 104px);
  transform: translate(-50%, 12px);
  max-width: calc(100vw - 44px);
  padding: 11px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 550;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity .2s, transform .2s;
  backdrop-filter: blur(10px);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════ iPhone：单列堆叠 ══════════════ */

@media (max-width: 719px), (max-height: 519px) {
  .board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 6px;
  }

  .panel { flex: 0 0 auto; }
  .note-list { overflow: visible; padding-bottom: 14px; }
  .panel-empty { padding: 26px 16px; }

  .panel--today    { order: 1; }
  .panel--tomorrow { order: 2; }
  .panel--standing { order: 3; }

  .app-title { font-size: 22px; }
  .topbar { padding: calc(var(--st) + 16px) 18px 12px; }
  .board { padding: 0 18px; }
  .actionbar { padding: 12px 18px calc(var(--sb) + 14px); }
}

/* ══════════════ 平板 / 桌面微调 ══════════════ */

@media (min-width: 720px) and (min-height: 520px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet {
    border-radius: var(--r-xl);
    max-height: 88dvh;
    padding-bottom: 0;
  }
  .sheet--full { height: auto; max-height: 88dvh; }
  .sheet-grabber { display: none; }
  .app-title { font-size: 27px; }
}

@media (min-width: 1100px) {
  .board { gap: 18px; padding: 0 32px; }
  .topbar { padding-left: 32px; padding-right: 32px; }
  .actionbar { padding-left: 32px; padding-right: 32px; }
}

/* ══════════════ 无障碍 ══════════════ */

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

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ══════════════ 滚动分隔线 ══════════════ */

.topbar.scrolled { border-bottom-color: var(--glass-line); }

/* ══════════════ 条目动效 ══════════════ */

.note.anim-in {
  animation: itemIn .4s cubic-bezier(.32,.72,0,1) backwards;
}

@keyframes itemIn {
  from { opacity: 0; transform: translateY(7px); }
}

.note.leaving {
  opacity: 0;
  transform: translateX(16px) scale(.95);
  transition: opacity .22s ease, transform .22s cubic-bezier(.4,0,1,1);
  pointer-events: none;
}

.note-check svg {
  transition: opacity .18s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════ 已完成面板 ══════════════ */

.sheet-foot--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border-top: 1px solid var(--glass-line);
  padding: 14px 20px calc(var(--sb) + 16px);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.meta-line {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.meta-line strong { color: var(--text-2); font-weight: 650; }

.meta-actions { display: flex; gap: 9px; }

.btn--sm {
  flex: 1 1 0;
  height: 42px;
  padding: 0 12px;
  font-size: 13.5px;
  border-radius: var(--r-md);
}

.btn--sm.confirming {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: nudge .3s ease;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.restore-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s, transform .14s;
  -webkit-tap-highlight-color: transparent;
}

.restore-btn svg { width: 12px; height: 12px; }
.restore-btn:active { transform: scale(.93); }

@media (hover: hover) {
  .restore-btn:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--accent-soft);
  }
}

/* ══════════════ 窄屏压缩 ══════════════ */

@media (max-width: 380px) {
  .bar-btn { font-size: 13.5px; gap: 6px; height: 50px; }
  .bar-btn svg { width: 15px; height: 15px; }
  .bar-badge { min-width: 18px; height: 17px; font-size: 10.5px; }
  .fab { width: 56px; height: 56px; }
  .fab svg { width: 24px; height: 24px; }
}

/* 减少动态效果时，极光也停住 */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}