@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2'); }
/* 设计系统「Unitty」tokens，暗场优先 */
:root { --surface-100: #0A0A0B; --surface-200: #141416; --line: #2A2A2E; --ink: #EDEDEA; --ink-muted: #8E8E94; --ascii-dim: #3A3A40; --brand: #39FF88; --on-brand: #0A0A0B; --brand-soft: #0F2A1A; --accent: #FF3B4E; --accent-strong: #FF5A6A; --accent-soft: #2A0E13; --highlight: #FFB3BA; --on-accent: #0E0E10; --spark: #E8956F; --success: #7BE3A6; --danger: #FF8A8A; --glow-brand: 0 0 0 1px rgba(57, 255, 136, 0.45), 0 0 24px rgba(57, 255, 136, 0.22); --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --font-mono: "JetBrains Mono", "Sarasa Mono SC", ui-monospace, Consolas, monospace; --font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --surface-100: #F4F4F0; --surface-200: #FFFFFF; --line: #D9D9D4; --ink: #0E0E10; --ink-muted: #5E5E66; --ascii-dim: #C2C2BA; --brand: #0A7A3C; --on-brand: #FFFFFF; --brand-soft: #DDF3E5; --accent: #FF4D5E; --accent-strong: #C21F35; --accent-soft: #FDE3E6; --highlight: #FFB3BA; --on-accent: #0E0E10; --spark: #C4613D; --success: #177A4C; --danger: #C62F2F; --glow-brand: 0 0 0 1px rgba(10, 122, 60, 0.35); color-scheme: light; } }
:root[data-theme="light"] { --surface-100: #F4F4F0; --surface-200: #FFFFFF; --line: #D9D9D4; --ink: #0E0E10; --ink-muted: #5E5E66; --ascii-dim: #C2C2BA; --brand: #0A7A3C; --on-brand: #FFFFFF; --brand-soft: #DDF3E5; --accent: #FF4D5E; --accent-strong: #C21F35; --accent-soft: #FDE3E6; --highlight: #FFB3BA; --on-accent: #0E0E10; --spark: #C4613D; --success: #177A4C; --danger: #C62F2F; --glow-brand: 0 0 0 1px rgba(10, 122, 60, 0.35); color-scheme: light; }
:root[data-theme="dark"] { --surface-100: #0A0A0B; --surface-200: #141416; --line: #2A2A2E; --ink: #EDEDEA; --ink-muted: #8E8E94; --ascii-dim: #3A3A40; --brand: #39FF88; --on-brand: #0A0A0B; --brand-soft: #0F2A1A; --accent: #FF3B4E; --accent-strong: #FF5A6A; --accent-soft: #2A0E13; --highlight: #FFB3BA; --on-accent: #0E0E10; --spark: #E8956F; --success: #7BE3A6; --danger: #FF8A8A; --glow-brand: 0 0 0 1px rgba(57, 255, 136, 0.45), 0 0 24px rgba(57, 255, 136, 0.22); color-scheme: dark; }
/* Unitty 组件样式（ASCII 风格）：只引用 tokens.css 里的变量 */
.ca-btn, .ca-chip, .ca-tabbar, .ca-course, .ca-reminder, .ca-todo, .ca-expense, .ca-card {
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.ca-course p, .ca-reminder p, .ca-todo p, .ca-expense p, .ca-card p { margin: 0; }
.ca-icon { flex: none; display: block; }

/* 分区色系：学习区绿、钱包区红。组件只读 --zone*，由所在分区决定颜色 */
:root, .ca-zone-study {
  --zone: var(--brand); --on-zone: var(--on-brand); --zone-soft: var(--brand-soft); --zone-ink: var(--brand);
}
.ca-zone-money {
  --zone: var(--accent); --on-zone: var(--on-accent); --zone-soft: var(--accent-soft); --zone-ink: var(--accent-strong);
}
.ca-zone-neutral {
  --zone: var(--ink); --on-zone: var(--surface-100); --zone-soft: var(--line); --zone-ink: var(--ink);
}

/* AsciiField */
.ca-ascii {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 14px; letter-spacing: 0;
  white-space: pre; user-select: none; overflow: hidden;
}
.ca-ascii-line { display: block; }
.ca-ascii-lo { color: var(--ascii-dim); }
.ca-ascii-ink .ca-ascii-hi, .ca-ascii-ink .ca-ascii-top { color: var(--ink); }
.ca-ascii-brand .ca-ascii-hi, .ca-ascii-brand .ca-ascii-top { color: var(--brand); }
.ca-ascii-accent .ca-ascii-hi, .ca-ascii-accent .ca-ascii-top { color: var(--accent); }
.ca-ascii-duo .ca-ascii-hi { color: var(--brand); }
.ca-ascii-duo .ca-ascii-top { color: var(--accent); }
.ca-ascii-zone .ca-ascii-hi { color: var(--zone); }
.ca-ascii-zone .ca-ascii-top { color: var(--ink); }
.ca-ascii-fill { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 彩蛋「小克」：全系统唯一的陶土橙，只给它用 */
.ca-ascii-egg { color: var(--spark); }
.ca-ascii-egg-eye { color: var(--surface-100); }
.ca-backdrop > .ca-ascii-fill .ca-ascii-egg { text-shadow: 0 0 8px var(--spark); }

/* AsciiBackdrop：字符画在底，内容在上 */
.ca-backdrop { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); }
/* 作背景时整体压暗，字符只是氛围；fade 再在内容区中央多压一层 */
.ca-backdrop > .ca-ascii-fill .ca-ascii-lo,
.ca-backdrop > .ca-ascii-fill .ca-ascii-hi,
.ca-backdrop > .ca-ascii-fill .ca-ascii-top { opacity: .42; }
.ca-backdrop-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 55% at 45% 40%, var(--surface-100) 25%, transparent 100%);
  opacity: .75;
}
.ca-backdrop-content { position: relative; z-index: 2; }

/* Button */
.ca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-weight: 600; white-space: nowrap;
  transition: filter .15s ease, background-color .15s ease;
}
.ca-btn:focus-visible, .ca-chip:focus-visible, .ca-tab:focus-visible, .ca-todo-check:focus-visible {
  outline: 2px solid var(--zone); outline-offset: 2px;
}
.ca-btn:disabled { opacity: .45; cursor: not-allowed; }
.ca-btn-md { height: 44px; padding: 0 18px; font-size: 15px; }
.ca-btn-lg { height: 52px; padding: 0 24px; font-size: 17px; border-radius: var(--radius-lg); }
.ca-btn-sm { height: 32px; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; font-weight: 500; border-radius: var(--radius-sm); gap: var(--space-1); }
.ca-btn-block { display: flex; width: 100%; }
.ca-btn-primary { background: var(--zone); color: var(--on-zone); }
.ca-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ca-btn-secondary { background: var(--surface-200); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ca-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-muted); }
.ca-btn-ghost:hover:not(:disabled), .ca-btn-secondary:hover:not(:disabled) { background: var(--zone-soft); }
.ca-btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

/* Chip */
.ca-chip {
  height: 32px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--ink-muted); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
}
.ca-chip::before { content: "[ ] "; color: var(--ink-muted); }
.ca-chip.is-selected { background: var(--zone); border-color: var(--zone); color: var(--on-zone); font-weight: 600; }
.ca-chip.is-selected::before { content: "[x] "; color: var(--on-zone); }

/* TabBar */
.ca-tabbar {
  position: relative; display: flex; background: var(--surface-200); border-top: 1px solid var(--line);
  padding: 6px var(--space-2) 10px;
}
.ca-tab {
  flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; cursor: pointer; color: var(--ink-muted); border-radius: var(--radius-md);
}
.ca-tab.is-active { color: var(--zone-ink); }
.ca-tab-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 28px; border-radius: var(--radius-sm); }
/* 选中底块：宽 48、高 28，居中在第 i 个入口的图标后面 */
.ca-tab-indicator {
  position: absolute; top: 6px; width: 48px; height: 28px; border-radius: var(--radius-sm);
  left: calc(var(--space-2) + (100% - 2 * var(--space-2)) / var(--n) * (var(--i) + 0.5) - 24px);
  background: var(--zone-soft); pointer-events: none;
  transition: left .42s cubic-bezier(.34, 1.36, .64, 1), background-color .3s ease;
}
.ca-tab { position: relative; z-index: 1; transition: color .25s ease; }
.ca-tab-icon { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ca-tab.is-active .ca-tab-icon { transform: translateY(-1px) scale(1.06); }
.ca-tab:active .ca-tab-icon { transform: scale(.9); }
.ca-tab-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .04em; font-weight: 500; }
.ca-tab-badge {
  position: absolute; top: -2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
}

/* CourseCard */
.ca-course {
  display: flex; gap: var(--space-4); padding: 12px;
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink);
}
.ca-course-time {
  flex: none; width: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--space-2) 0; border-radius: var(--radius-sm); background: var(--zone-soft); color: var(--ink);
  font-family: var(--font-mono);
}
.ca-course-start { font-size: 15px; line-height: 20px; font-weight: 600; }
.ca-course-end { font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.ca-course-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.ca-course-head { display: flex; align-items: center; gap: var(--space-2); }
.ca-course-name { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-course-tag { flex: none; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .04em; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--ink-muted); color: var(--ink-muted); }
.ca-course-meta { display: flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ca-dot { padding: 0 2px; }
.ca-course-now { border-color: var(--zone); box-shadow: var(--glow-brand); }
.ca-course-now .ca-course-time { background: var(--zone); color: var(--on-zone); }
.ca-course-now .ca-course-end { color: var(--on-zone); }
.ca-course-now .ca-course-tag { border-color: var(--zone); color: var(--zone-ink); font-weight: 600; }
.ca-course-now .ca-course-tag::before { content: "● "; }
.ca-course-done { background: var(--surface-100); border-style: dashed; }
.ca-course-done .ca-course-name { color: var(--ink-muted); }
.ca-course-done .ca-course-time { background: transparent; color: var(--ink-muted); }

/* ClassReminder */
.ca-reminder {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  background: var(--zone-soft); border: 1px solid var(--zone); border-radius: var(--radius-lg); color: var(--ink);
}
.ca-reminder-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background: var(--zone); color: var(--on-zone); }
.ca-reminder-text { flex: 1; min-width: 0; }
.ca-reminder-title { font-size: 17px; line-height: 24px; font-weight: 700; }
.ca-reminder-meta { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.ca-reminder-meta::before { content: "> "; color: var(--ink); }
.ca-reminder-actions { flex: none; display: flex; gap: var(--space-2); }

/* TodoItem */
.ca-todo { display: flex; align-items: flex-start; gap: 12px; padding: 12px var(--space-4); background: var(--surface-200); color: var(--ink); border-bottom: 1px solid var(--line); }
.ca-todo-check {
  flex: none; width: 22px; height: 22px; margin-top: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); border: 1.5px solid var(--ink-muted); background: transparent; color: var(--on-zone);
  display: flex; align-items: center; justify-content: center;
}
.ca-todo.is-done .ca-todo-check { background: var(--zone); border-color: var(--zone); }
.ca-todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ca-todo-title { font-size: 15px; line-height: 22px; }
.ca-todo.is-done .ca-todo-title { color: var(--ink-muted); text-decoration: line-through; }
.ca-todo-meta { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.ca-todo-course { padding: 0 6px; border-radius: var(--radius-sm); background: var(--zone-soft); color: var(--ink); }
.ca-todo-due { display: inline-flex; align-items: center; gap: var(--space-1); }
.ca-todo-due.is-overdue { color: var(--danger); font-weight: 600; }

/* 分类方块（ExpenseItem、WeeklyReport 共用） */
.ca-cat { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.ca-cat-sm { width: 22px; height: 22px; font-size: 11px; }
.ca-cat-accent { background: var(--accent); color: var(--on-accent); }
.ca-cat-line { background: var(--line); color: var(--ink); }
.ca-cat-soft { background: var(--zone-soft); color: var(--ink); }
.ca-cat-highlight { background: var(--highlight); color: var(--on-accent); }
.ca-cat-ink { background: var(--ink); color: var(--surface-100); }
.ca-cat-muted { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-muted); }
.ca-cat-success { background: var(--success); color: var(--surface-100); }

/* ExpenseItem */
.ca-expense { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-4); background: var(--surface-200); color: var(--ink); border-bottom: 1px solid var(--line); }
.ca-expense-body { flex: 1; min-width: 0; }
.ca-expense-title { font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-expense-meta { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.ca-expense-amount { flex: none; font-family: var(--font-mono); font-size: 16px; line-height: 24px; font-weight: 600; }
.ca-expense-amount.is-income { color: var(--success); }

/* 卡片通用 */
.ca-card { padding: var(--space-4); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); }
.ca-card-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; color: var(--ink-muted); }

/* BudgetCard：分段进度条像终端里的 [######....] */
.ca-budget-left { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0 12px; font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 600; }
.ca-budget-caption { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.ca-budget.is-over .ca-budget-left { color: var(--danger); }
.ca-progress { height: 12px; border-radius: 2px; background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 8px); overflow: hidden; }
.ca-progress > span { display: block; height: 100%; background: repeating-linear-gradient(to right, var(--zone) 0 6px, transparent 6px 8px); }
.ca-budget.is-warn .ca-progress > span { background: repeating-linear-gradient(to right, var(--highlight) 0 6px, transparent 6px 8px); }
.ca-budget.is-over .ca-progress > span { background: repeating-linear-gradient(to right, var(--danger) 0 6px, transparent 6px 8px); }
.ca-budget-meta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* WeeklyReport：柱子由横向扫描线叠成 */
.ca-report { display: flex; flex-direction: column; gap: var(--space-4); }
.ca-report-head { display: flex; align-items: baseline; justify-content: space-between; }
.ca-report-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.ca-report-range { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.ca-report-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.ca-report-total .ca-card-label { width: 100%; }
.ca-report-amount { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 600; }
.ca-report-delta { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.ca-report-delta.is-down { color: var(--success); }
.ca-report-delta.is-up { color: var(--danger); }
.ca-bars { display: flex; gap: var(--space-2); height: 132px; }
.ca-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; }
.ca-bar-value { height: 16px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.ca-bar-track { flex: 1; width: 100%; max-width: 28px; display: flex; align-items: flex-end; }
.ca-bar-fill { display: block; width: 100%; background: repeating-linear-gradient(to top, var(--ink-muted) 0 3px, transparent 3px 5px); }
.ca-bar.is-peak .ca-bar-fill { background: repeating-linear-gradient(to top, var(--zone) 0 3px, transparent 3px 5px); }
.ca-bar-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.ca-bar.is-today .ca-bar-label { color: var(--ink); font-weight: 700; }
.ca-report-cats { display: flex; flex-direction: column; gap: var(--space-2); }
.ca-cat-row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.ca-cat-name { width: 32px; flex: none; }
.ca-cat-track { flex: 1; height: 8px; background: repeating-linear-gradient(to right, var(--line) 0 4px, transparent 4px 6px); overflow: hidden; }
.ca-cat-track > span { display: block; height: 100%; background: repeating-linear-gradient(to right, var(--ink-muted) 0 4px, transparent 4px 6px); }
.ca-cat-amount { width: 60px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.ca-report-stats { display: flex; gap: var(--space-2); }
.ca-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.ca-stat-value { font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-weight: 600; }
.ca-stat-value small { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-muted); }

/* —— 动效 ——
   时长：按压 120ms · 状态变化 200–300ms · 位移 350–450ms。
   缓动：出现用 ease-out，弹性位移用 cubic-bezier(.34, 1.36, .64, 1)。 */
.ca-btn { transition: filter .15s ease, background-color .2s ease, transform .12s ease, box-shadow .2s ease; }
.ca-btn:active:not(:disabled) { transform: scale(.96); }
.ca-chip { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.ca-chip:active { transform: scale(.95); }
.ca-course { transition: border-color .3s ease, box-shadow .4s ease, background-color .3s ease; }
.ca-course-time { transition: background-color .3s ease, color .3s ease; }
.ca-todo-check { transition: background-color .2s ease, border-color .2s ease, transform .12s ease; }
.ca-todo-check:active { transform: scale(.88); }
.ca-todo.is-done .ca-todo-check .ca-icon { animation: ca-check .32s cubic-bezier(.34, 1.56, .64, 1); }
.ca-todo-title { transition: color .25s ease; }
.ca-progress > span { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ca-bar-fill { transform-origin: bottom; animation: ca-grow .6s cubic-bezier(.2, .8, .2, 1) both; transition: height .5s cubic-bezier(.2, .8, .2, 1); }
.ca-bar:nth-child(2) .ca-bar-fill { animation-delay: .04s; }
.ca-bar:nth-child(3) .ca-bar-fill { animation-delay: .08s; }
.ca-bar:nth-child(4) .ca-bar-fill { animation-delay: .12s; }
.ca-bar:nth-child(5) .ca-bar-fill { animation-delay: .16s; }
.ca-bar:nth-child(6) .ca-bar-fill { animation-delay: .2s; }
.ca-bar:nth-child(7) .ca-bar-fill { animation-delay: .24s; }
.ca-cat-track > span { transform-origin: left; animation: ca-grow-x .6s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ca-check { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1); } }
@keyframes ca-grow { from { transform: scaleY(0); } }
@keyframes ca-grow-x { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ca-btn, .ca-chip, .ca-course, .ca-course-time, .ca-todo-check, .ca-todo-title, .ca-tab, .ca-tab-icon, .ca-tab-indicator, .ca-progress > span, .ca-bar-fill { transition: none; }
  .ca-bar-fill, .ca-cat-track > span, .ca-todo.is-done .ca-todo-check .ca-icon { animation: none; }
  .ca-btn:active:not(:disabled), .ca-chip:active, .ca-todo-check:active, .ca-tab:active .ca-tab-icon, .ca-tab.is-active .ca-tab-icon { transform: none; }
}

/* —— v2：可点开的行 —— 卡片、待办正文、流水行变成按钮时去掉按钮默认样式 */
button.ca-course, button.ca-todo-body, button.ca-expense {
  width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.ca-todo-body { padding: 0; border: 0; background: none; }
button.ca-expense { border-left: 0; border-right: 0; border-top: 0; }
.is-pressable { transition: transform .12s ease, background-color .2s ease; }
.is-pressable:active { transform: scale(.985); }
.is-pressable:focus-visible { outline: 2px solid var(--zone); outline-offset: 2px; }
.ca-course.is-absent .ca-course-tag { color: var(--danger); border-color: var(--danger); }

/* 原型外壳：一部手机居中，里面是 App；颜色全部来自设计系统 tokens */
html, body { height: 100%; }
body {
  margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-block: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface-200); color: var(--ink); font-family: var(--font-sans);
}
.caption { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); text-align: center; }
#app { width: min(400px, 100%); flex: 1 1 auto; min-height: 640px; max-height: 860px; display: flex; }
.phone {
  position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-100); border: 1px solid var(--line); border-radius: 28px;
}
.statusbar { flex: none; display: flex; justify-content: flex-end; padding: 12px 22px 6px; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.logo { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; user-select: none; }
.logo:active { color: var(--spark); }
.logo:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: 2px; }
.screen { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.layer { position: absolute; inset: 0; }
.layer > * { height: 100%; }
.ca-backdrop-content { height: 100%; }
.screen-plain { background: var(--surface-100); }
.scroll { height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 0 16px 24px; scrollbar-width: thin; }
.ca-tabbar { flex: none; }

.hero { padding: 44px 0 20px; }
.page-head { padding: 24px 0 16px; }
.eyebrow { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.headline { margin: 8px 0 0; font: 700 34px/38px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.title { margin: 6px 0 0; font: 700 26px/32px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.sub { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.group { display: flex; flex-direction: column; gap: 8px; }
.sec-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.sec-right { font-variant-numeric: tabular-nums; }
/* 叠在字符画上的文字垫一层底色，保证可读 */
.sec-label > span, .hero .eyebrow, .hero .sub, .page-head .eyebrow, .page-head .sub { background: var(--surface-100); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 4px; margin-left: -4px; }
.hero .eyebrow, .hero .sub, .page-head .eyebrow, .page-head .sub { display: inline-block; }
.ca-reminder { flex-wrap: wrap; }
.ca-reminder-actions { width: 100%; justify-content: flex-end; }
.list { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.list > :last-child, .list > :last-child > .ca-expense { border-bottom: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips .ca-chip { flex: none; }
.muted { color: var(--ink-muted); font-size: 13px; line-height: 19px; }
.pad { margin: 0; padding: 8px 0 24px; }
.spacer { height: 64px; }

/* 课表的星期条 */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); color: var(--ink);
  font-family: var(--font-mono); cursor: pointer;
}
.day.is-today { border-color: var(--zone); }
.day.is-on { background: var(--zone); border-color: var(--zone); color: var(--on-zone); }
.day:focus-visible, .key:focus-visible, .link:focus-visible { outline: 2px solid var(--zone); outline-offset: 2px; }
.day-w { font-size: 11px; line-height: 14px; }
.day-d { font-size: 16px; line-height: 20px; font-weight: 600; }
.day-n { height: 12px; font-size: 10px; line-height: 12px; letter-spacing: 1px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; color: var(--ink-muted); font-size: 14px; }
.empty p { margin: 0; }

/* 记账 */
.fab { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
.sheet-wrap { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .55); }
.sheet {
  width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--surface-200); border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.link { background: none; border: 0; padding: 4px; color: var(--ink-muted); font: 14px var(--font-sans); cursor: pointer; }
.amount { font: 600 40px/48px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.caret { color: var(--zone); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.note input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
  border: 1px solid var(--ink-muted); border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 15px var(--font-sans);
}
.note input::placeholder { color: var(--ink-muted); }
.note input:focus { outline: 2px solid var(--zone); outline-offset: 1px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.key { height: 46px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-100); color: var(--ink); font: 500 20px var(--font-mono); cursor: pointer; }
.key:active { background: var(--zone-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 周报 */
.tip { padding: 16px; border: 1px dashed var(--ink-muted); border-radius: var(--radius-lg); background: var(--surface-200); }
.tip p:last-child { margin: 6px 0 0; font-size: 14px; line-height: 21px; }

/* 我的 */
.me { display: flex; align-items: center; gap: 14px; padding-top: 36px; }
.avatar { flex: none; width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--surface-100); font: 700 24px var(--font-sans); }
.settings { display: flex; flex-direction: column; gap: 16px; }
.setting-label { margin: 0 0 8px; font-size: 14px; }
.row-btns { display: flex; gap: 8px; }

.toast {
  position: absolute; left: 16px; right: 16px; top: 40px; z-index: 30; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--ink); color: var(--surface-100); font: 500 13px/18px var(--font-mono);
}

/* —— 动效 ——
   页面切换：新页面从前进方向滑入淡入，旧页面反向淡出。
   时长与缓动和设计系统一致：位移 360ms ease-out，退场 260ms，弹性用 cubic-bezier(.34, 1.36, .64, 1)。 */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.36, .64, 1); }
.enter-fwd { animation: page-in-fwd .36s .06s var(--ease-out) both; }
.enter-back { animation: page-in-back .36s .06s var(--ease-out) both; }
.leave-fwd { animation: page-out-fwd .18s ease-in both; pointer-events: none; }
.leave-back { animation: page-out-back .18s ease-in both; pointer-events: none; }
@keyframes page-in-fwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes page-in-back { from { opacity: 0; transform: translateX(-32px); } }
@keyframes page-out-fwd { to { opacity: 0; transform: translateX(-24px); } }
@keyframes page-out-back { to { opacity: 0; transform: translateX(24px); } }

/* 内容错落入场：每一块晚 40ms */
.stagger > *, .rise { animation: rise .42s var(--ease-out) both; }
.stagger > :nth-child(2) { animation-delay: .04s; }
.stagger > :nth-child(3) { animation-delay: .08s; }
.stagger > :nth-child(4) { animation-delay: .12s; }
.stagger > :nth-child(5) { animation-delay: .16s; }
.stagger > :nth-child(6) { animation-delay: .2s; }
.stagger > :nth-child(n+7) { animation-delay: .24s; }
.hero, .page-head { animation: rise .42s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* 上课提醒「稍后提醒」：高度收起 */
.collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out), opacity .22s ease, transform .3s var(--ease-out); }
.collapse > div { min-height: 0; overflow: hidden; }
.collapse.is-leaving { grid-template-rows: 0fr; opacity: 0; transform: scale(.97); }

/* 星期条、键盘：按压回弹 */
.day { transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .12s ease; }
.day:active { transform: scale(.92); }
.key { transition: background-color .15s ease, transform .1s ease; }
.key:active { transform: scale(.93); }
.fab { animation: fab-in .5s .15s var(--ease-spring) both; }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(.8); } }

/* 记一笔：从底部弹出，关闭时滑回 */
.sheet-wrap { animation: fade-in .22s ease both; }
.sheet { animation: sheet-up .38s cubic-bezier(.2, .9, .3, 1) both; }
.sheet-wrap.is-closing { animation: fade-out .24s ease both; }
.sheet-wrap.is-closing .sheet { animation: sheet-down .24s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.amount-num { display: inline-block; animation: num-pop .22s var(--ease-spring); }
@keyframes num-pop { from { transform: translateY(4px) scale(.96); opacity: .4; } }

/* 新记的一笔：展开进入并闪一下分区浅底 */
.row-in { animation: row-in .5s .2s var(--ease-out) both; }
.row-in .ca-expense { animation: row-flash 1.4s .3s ease both; }
@keyframes row-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes row-flash { from { background: var(--zone-soft); } }

/* 提示条 */
.toast { animation: toast-in .34s var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out .26s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* 待办：勾掉时小克跳出来把这一条扛走
   0–0.45s 小克从这一条右下方跳上来 · 0.45–0.65s 抬起这一条晃一下 · 0.65–1.15s 扛着往右走出屏幕 · 1.15–1.45s 下面的补上来 */
.todo-stack { gap: 8px; }
.todo-list { overflow: visible; }
.todo-row { max-height: 160px; }
.todo-inner { position: relative; }
.todo-row:first-child .ca-todo { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.todo-row:last-child .ca-todo { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: 0; }
.todo-row:only-child .ca-todo { border-radius: var(--radius-md); }
.todo-row.is-carried { position: relative; z-index: 2; animation: row-collapse .3s 1.15s ease-in forwards; }
.todo-row.is-carried .todo-inner { animation: carry-off 1.15s both; }
.claude-wrap { position: absolute; right: 24%; top: -26px; z-index: 3; animation: claude-jump .45s cubic-bezier(.3, 1.6, .6, 1) both; }
/* 全局小克已经跳到这里交接时，不再从下面重新跳一次 */
.claude-wrap.is-arrived { animation: none; }
.claude { display: block; filter: drop-shadow(0 0 6px var(--spark)); }
.claude .px { fill: var(--spark); }
.claude .eye { fill: var(--surface-100); }
.legs-b { opacity: 0; }
.is-carried .claude { animation: claude-bob .24s .65s steps(1) infinite; }
.is-carried .legs-a { animation: legs-a .24s .65s steps(1) infinite; }
.is-carried .legs-b { animation: legs-b .24s .65s steps(1) infinite; }
@keyframes claude-jump {
  0% { opacity: 0; transform: translateY(44px) scale(.4); }
  55% { opacity: 1; transform: translateY(-14px) scale(1.06, .96); }
  80% { transform: translateY(2px) scale(1.04, .94); }
  100% { transform: none; }
}
@keyframes carry-off {
  0%, 39% { transform: none; animation-timing-function: cubic-bezier(.3, 1.5, .6, 1); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
  57% { transform: translateY(-8px) rotate(1deg); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  100% { transform: translate(120%, -8px) rotate(1deg); }
}
@keyframes row-collapse { to { max-height: 0; opacity: 0; } }
@keyframes claude-bob { 50% { transform: translateY(-2px); } }
@keyframes legs-a { 50% { opacity: 0; } }
@keyframes legs-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.done-toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--surface-100); color: var(--ink-muted);
  font: 500 12px/16px var(--font-mono); letter-spacing: .04em; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.done-toggle:hover { border-color: var(--ink-muted); color: var(--ink); }
.done-toggle:focus-visible { outline: 2px solid var(--zone); outline-offset: 2px; }

/* 全局小克：一层透明的覆盖层，小克在上面跑跳 */
.claude-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.claude-sprite { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.walking .claude { animation: claude-bob .24s steps(1) infinite; }
.walking .legs-a { animation: legs-a .24s steps(1) infinite; }
.walking .legs-b { animation: legs-b .24s steps(1) infinite; }

/* 记一笔面板顶边坐着的小克 */
.sheet { position: relative; }
.sheet-claude { position: absolute; top: -18px; right: 28px; animation: claude-jump .45s .28s cubic-bezier(.3, 1.6, .6, 1) both; }
.sheet-wrap.is-closing .sheet-claude { animation: claude-hop-off .24s ease-in both; }
@keyframes claude-hop-off { 40% { transform: translateY(-10px); } 100% { transform: translateY(6px); opacity: 0; } }

/* 提示条里的小克头像 */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-claude { flex: none; display: flex; animation: claude-jump .4s .08s cubic-bezier(.3, 1.6, .6, 1) both; }
.toast-claude .claude { filter: none; }

/* —— v1.0：表单、弹层、设置 —— */
.pad-s { margin: 0; padding: 4px 0 8px; }
.sample-tip p:not(.eyebrow) { margin: 6px 0 0; font-size: 14px; line-height: 21px; }
.sample-tip .row-btns { margin-top: 12px; flex-wrap: wrap; }
.week-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.week-nav .eyebrow { margin: 0 4px; }
.page-head .week-nav .eyebrow { background: var(--surface-100); padding: 0 4px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-100); color: var(--ink); cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:focus-visible { outline: 2px solid var(--zone); outline-offset: 2px; }
.link { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-100); border-radius: var(--radius-sm); }
.link.push { margin-left: auto; color: var(--ink); }
.period-chips { align-items: center; margin-bottom: 16px; }
.period-chips .icon-btn { width: 32px; height: 32px; }
.period-chips .icon-btn:first-of-type { margin-left: auto; }
.add-row { margin-top: 12px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.month-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-num { margin: 4px 0 0; font: 600 20px/26px var(--font-mono); font-variant-numeric: tabular-nums; }
.tip-head { display: flex; align-items: center; gap: 8px; }
.tip-claude { display: flex; }
.tip-claude .claude { filter: none; }
.tip p:not(.eyebrow) { margin: 6px 0 0; font-size: 14px; line-height: 21px; }
.me-text { flex: 1; min-width: 0; }

/* 背景选择：每个格子是一小块正在动的字符画 */
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-tile {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); color: var(--ink);
  transition: border-color .2s ease, transform .12s ease;
}
.bg-tile:active { transform: scale(.96); }
.bg-tile.is-on { border-color: var(--zone); box-shadow: 0 0 0 1px var(--zone); }
.bg-tile:focus-visible { outline: 2px solid var(--zone); outline-offset: 2px; }
.bg-tile .ca-ascii { margin: 0; height: 56px; overflow: hidden; font-size: 7px; line-height: 8px; }
.bg-name { padding: 4px 8px 6px; font: 500 12px/16px var(--font-mono); text-align: left; border-top: 1px solid var(--line); }
.bg-tile.is-on .bg-name { color: var(--zone-ink, var(--zone)); }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.field input, .inline-form input, .date-input, .settings .field input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
  border: 1px solid var(--ink-muted); border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 15px var(--font-sans);
}
.field input:focus, .inline-form input:focus, .date-input:focus { outline: 2px solid var(--zone); outline-offset: 1px; }
.field input::placeholder, .inline-form input::placeholder { color: var(--ink-muted); }
.date-input { width: auto; height: 36px; padding: 0 8px; font: 13px var(--font-mono); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-error, .field-warn { margin: -4px 0 0; font-size: 13px; line-height: 18px; }
.field-error { color: var(--danger); }
.field-warn { color: var(--ink-muted); }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }
.inline-form input { width: 96px; height: 36px; }
.inline-form.wide { display: flex; margin-top: 10px; }
.inline-form.wide input { flex: 1; width: auto; }
.seg { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-100); }
.seg button {
  padding: 6px 12px; border: 0; border-radius: calc(var(--radius-md) - 2px); background: none; color: var(--ink-muted);
  font: 500 13px var(--font-sans); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.seg button.is-on { background: var(--zone); color: var(--on-zone); }
.seg-lg { display: flex; }
.seg-lg button { flex: 1; padding: 10px 12px; font-size: 14px; }
.removable { display: inline-flex; gap: 2px; }
.removable span { color: var(--ink-muted); }

/* 弹层：内容多时在里面滚动，小克坐在外框顶边不会被裁掉 */
.sheet { max-height: calc(100% - 48px); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.sheet-body { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: thin; }
.sheet-actions { display: flex; gap: 8px; padding-top: 2px; }
.sheet-actions .ca-btn-block { flex: 1; }
.sheet-title { margin: 0; }
.sheet .sub { margin: -8px 0 0; }
.confirm-text { margin: 0; font-size: 15px; line-height: 23px; }
.ca-btn.is-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }

/* 报表自定义：勾选显示、上下调顺序 */
.order-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.order-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; background: var(--surface-100); border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: 0; }
.order-check {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border: 0; background: none;
  color: var(--ink-muted); font: 14px var(--font-sans); text-align: left; cursor: pointer;
}
.order-row.is-on .order-check { color: var(--ink); }
.order-check .box {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--ink-muted); border-radius: var(--radius-sm); color: var(--on-zone);
}
.order-row.is-on .box { background: var(--zone); border-color: var(--zone); }
.order-row .icon-btn { width: 32px; height: 32px; }

/* 新加的待办和课程也闪一下 */
.row-in .ca-todo, .row-in .ca-course { animation: row-flash 1.4s .3s ease both; }

/* 安卓 App 里：去掉演示用的手机外框，铺满整块屏幕 */
html.native body { padding: 0; gap: 0; background: var(--surface-100); }
html.native .caption { display: none; }
html.native #app { width: 100%; min-height: 0; max-height: none; height: 100%; }
html.native .phone { border: 0; border-radius: 0; }
html.native .statusbar { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
html.native .ca-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
@media (max-width: 440px) { .phone { border-radius: 20px; } .headline { font-size: 30px; line-height: 34px; } }

/* —— v1.2 —— */
/* 开屏：和系统启动页同一个暗底、同一个「U_」，接上之后再打出今天的概况 */
.boot {
  position: absolute; inset: 0; z-index: 35; background: #0E0E10; color: #ECECEC; overflow: hidden;
  font-family: var(--font-mono); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.boot.is-leaving { animation: boot-out .3s ease-in both; pointer-events: none; }
.boot-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.boot-mark svg { display: block; transform-origin: 50% 100%; }
.boot-mark.is-stomped svg { animation: mark-stomp .3s cubic-bezier(.3, 1.6, .6, 1); }
.mark-u { fill: #ECECEC; }
.mark-cursor { fill: #39FF88; animation: blink 1s steps(1) infinite; }
.boot-log { position: absolute; left: 50%; top: calc(50% + 76px); transform: translateX(-50%); width: min(300px, calc(100% - 48px)); }
.boot-log p {
  margin: 0; font-size: 13px; line-height: 22px; white-space: nowrap; color: #9A9AA2;
  clip-path: inset(0 100% 0 0); animation: type-line .26s steps(var(--n, 12)) both;
}
.boot-log p:first-child { color: #39FF88; }
.boot-log p:last-child { margin-top: 6px; color: #ECECEC; font: 700 22px/30px var(--font-sans); }
.boot-skip { position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 11px; color: #5A5A62; animation: fade-in .3s .9s both; }
@keyframes mark-stomp { 0% { transform: scale(1.06, .84); } 100% { transform: none; } }
@keyframes type-line { to { clip-path: inset(0 0 0 0); } }
@keyframes boot-out { to { opacity: 0; } }

/* 顶部的 Unitty_ */
.logo-cursor { color: var(--brand); animation: blink 1.2s steps(1) infinite; }

/* 提示条里的「撤销」 */
.toast-msg { flex: 1; min-width: 0; }
.toast-act {
  flex: none; margin: -6px -6px -6px 0; padding: 6px 10px; border: 1px solid currentColor; border-radius: var(--radius-sm, 6px);
  background: none; color: inherit; font: 600 13px var(--font-sans); cursor: pointer;
}

/* 第几周 */
.stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stepper-num { min-width: 84px; text-align: center; font: 600 17px/24px var(--font-mono); font-variant-numeric: tabular-nums; }
.stepper-date { position: relative; margin-left: auto; font-size: 12px; color: var(--ink-muted); }
.stepper-date span { border-bottom: 1px dashed var(--ink-muted); }
.stepper-date input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.week-range { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.field .week-range input { width: 64px; height: 36px; text-align: center; }

/* 今日：明天的课 */
.tmr-row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--line); background: var(--surface-100); color: var(--ink); text-align: left; font: 14px var(--font-sans); cursor: pointer;
}
.tmr-row:last-child { border-bottom: 0; }
.tmr-time { font: 500 13px var(--font-mono); color: var(--ink-muted); }
.tmr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmr-loc { font-size: 12px; color: var(--ink-muted); }

.off-note, .swipe-hint { margin: 8px 0 0; text-align: center; }
.swipe-hint { font-size: 11px; opacity: .7; }
.row-btns.wrap { flex-wrap: wrap; }
.backup-text {
  width: 100%; box-sizing: border-box; padding: 10px 12px; resize: none;
  border: 1px solid var(--ink-muted); border-radius: var(--radius-md); background: var(--surface-100); color: var(--ink);
  font: 12px/18px var(--font-mono); word-break: break-all;
}
.backup-text:focus { outline: 2px solid var(--zone); outline-offset: 1px; }
.field-ok { margin: -4px 0 0; font-size: 13px; line-height: 18px; color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .boot-log p { animation: none; clip-path: none; }
}

/* 键盘弹出时弹层抬到键盘上面（--kb 由 App 里的键盘监听写入） */
/* 键盘高度从屏幕底边算，里面包含了约 24px 的手势导航条，网页本身不在导航条下面，所以减掉 */
html.native .sheet-wrap { padding-bottom: max(0px, calc(var(--kb, 0px) - 24px)); transition: padding-bottom .18s ease-out; }
html.native .sheet { max-height: calc(100% - 16px); }