/* ==========================================================================
   布局与组件样式
   命名约定：块级用 .app- / .card / .btn / .pill / .state；修饰用 -modifier。
   所有颜色与间距都引用 tokens.css 中的变量。
   ========================================================================== */

/* —— 应用外壳 —— */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    'brand topbar'
    'nav   main';
  min-height: 100vh;
}

.app-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.app-brand__mark {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  flex: none;
}

.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-nav {
  grid-area: nav;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.app-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: 500;
}
.app-nav__link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}
.app-nav__link[aria-current='page'] {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}
.app-nav__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.app-nav__foot {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.app-main {
  grid-area: main;
  padding: var(--space-5) var(--space-5) var(--space-7);
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.page-head__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}
.page-head__actions {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

/* —— 卡片 —— */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}
.card__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* —— 按钮 —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--color-surface-alt);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-surface);
}
.btn--danger:hover:not(:disabled) {
  background: var(--color-danger-soft);
}
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

/* —— 状态标签 —— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.pill--study {
  background: var(--color-study-soft);
  color: var(--color-study);
}
.pill--fixed {
  background: var(--color-fixed-soft);
  color: var(--color-text-muted);
}
.pill--rest {
  background: var(--color-rest-soft);
  color: var(--color-rest);
}
.pill--locked {
  background: var(--color-locked-soft);
  color: var(--color-locked);
}
.pill--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.pill--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.pill--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* —— 提示条 / 空状态 / 错误状态 —— */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-4);
}
.notice__title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.notice--info {
  background: var(--color-primary-soft);
  border-color: #cfe0f7;
}
.notice--warning {
  background: var(--color-warning-soft);
  border-color: #f0e0b6;
}
.notice--danger {
  background: var(--color-danger-soft);
  border-color: #f2cfc9;
}
.notice--success {
  background: var(--color-success-soft);
  border-color: #cbe6d8;
}

.state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.state__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.state__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* —— 数据摘要（避免无意义的大数字卡片堆砌，只保留必要的每日统计） —— */
.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.metric__value {
  font-size: var(--font-size-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* —— 图例 —— */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--color-border-strong);
}

/* —— 任务列表 —— */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.task-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.task-item:last-child {
  border-bottom: none;
}
.task-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.task-item__title {
  font-weight: 600;
}
.task-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.task-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* —— 表单 —— */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.form-field__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0 0 var(--space-4);
}
legend {
  padding: 0 var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* —— 可聚焦的横向滚动区域（七天看板）—— */
.day-board:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* —— 屏幕阅读器专用提示 —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* —— 表格型列表（版本历史） —— */
.table-wrap {
  overflow-x: auto;
}

/* —— 诊断列表（未安排原因、冲突与风险） —— */
.diag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.diag-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: var(--font-size-sm);
}
.diag-item__code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  flex: none;
}

/* —— 窄屏适配：侧边栏收起为顶部标签，网格变单列 —— */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'brand'
      'nav'
      'main';
  }
  .app-topbar {
    grid-area: brand;
    border-bottom: 1px solid var(--color-border);
  }
  .app-brand {
    display: none;
  }
  .app-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
  }
  .app-nav__list {
    flex-direction: row;
    gap: var(--space-1);
  }
  .app-nav__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.app-nav__foot {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
  }
  .app-main {
    padding: var(--space-4);
  }
  .grid-2,
  .grid-3,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   首页、统计与进度组件
   ========================================================================== */

/* —— 首页主视觉 —— */
.home-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.home-hero__date {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.home-hero__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  line-height: 1.25;
}

.home-hero__sub {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.home-hero__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* —— 统计磁贴 —— */
.home-tiles,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.stat-tile--button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.stat-tile--button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.stat-tile__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat-tile__value {
  font-size: var(--font-size-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.stat-tile__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 进度条 —— */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.progress__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.progress__value {
  font-variant-numeric: tabular-nums;
}

.progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 240ms ease;
}

.progress__fill--rest { background: var(--color-rest); }
.progress__fill--accent { background: var(--color-accent); }
.progress__fill--locked { background: var(--color-locked); }
.progress__fill--danger { background: var(--color-danger); }

.progress__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 首页两列布局 —— */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.home-grid__main,
.home-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 1080px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* —— 下一项学习 —— */
.home-next__task {
  margin-bottom: var(--space-2);
}

.home-next__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.home-next__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* —— 最近七天迷你柱状图 —— */
.week-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  align-items: end;
  height: 132px;
}

.week-bars__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
}

.week-bars__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.week-bars__bar {
  width: 12px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height 240ms ease;
}

.week-bars__bar--planned {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
}

.week-bars__bar--actual {
  background: var(--color-primary);
}

.week-bars__label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* —— 占比条 —— */
.share-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.share-bars__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.share-bars__value {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.share-bars__track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.share-bars__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}

.share-bars__fill--rest { background: var(--color-rest); }
.share-bars__fill--accent { background: var(--color-accent); }
.share-bars__fill--locked { background: var(--color-locked); }

/* —— 柱状图 —— */
.chart-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chart-figure__axis {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  align-items: end;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}

.chart__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
  min-width: 0;
}

/* 计划时长：同一列背后的浅色轨道（与实际柱同一坐标，不并列） */
.chart__track {
  position: absolute;
  bottom: 18px;
  width: 68%;
  border-radius: 4px 4px 0 0;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  box-sizing: border-box;
  z-index: 0;
}

.chart__bar {
  position: relative;
  z-index: 1;
  width: 58%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--color-primary);
  transition: height 260ms ease;
}

/* 当天没有任何已完成学习：一条基线短划，与"没有数据"区分开 */
.chart__zero {
  width: 58%;
  height: 2px;
  margin-bottom: 0;
  border-radius: 1px;
  background: var(--color-border-strong);
  z-index: 1;
}

.chart__label {
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.chart-legend__swatch--bar { background: var(--color-primary); }
.chart-legend__swatch--track { background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); }
.chart-legend__swatch--zero { background: var(--color-border-strong); height: 2px; }

.chart__label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 完成的清单项 —— */
.task-item--done {
  opacity: 0.68;
}

.task-item--done strong {
  text-decoration: line-through;
}

/* ==========================================================================
   主题选项、转盘、番茄钟、通知列表
   ========================================================================== */

/* —— 主题选项卡片 —— */
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 140ms ease, transform 140ms ease;
}

.theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
}

.theme-option.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.theme-option__preview {
  display: flex;
  gap: 6px;
  height: 44px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.theme-option__preview--light { background: #f6f7f9; }
.theme-option__preview--dark { background: #12161c; }
.theme-option__preview--system { background: linear-gradient(90deg, #f6f7f9 50%, #12161c 50%); }

.theme-option__swatch {
  flex: 1;
  border-radius: var(--radius-sm);
}

.theme-option__preview--light .theme-option__swatch:nth-child(1) { background: #2f6fd0; }
.theme-option__preview--light .theme-option__swatch:nth-child(2) { background: #ffffff; border: 1px solid #dfe3e8; }
.theme-option__preview--light .theme-option__swatch:nth-child(3) { background: #3f9e7f; }

.theme-option__preview--dark .theme-option__swatch:nth-child(1) { background: #6ba4f0; }
.theme-option__preview--dark .theme-option__swatch:nth-child(2) { background: #1a1f27; border: 1px solid #2e3641; }
.theme-option__preview--dark .theme-option__swatch:nth-child(3) { background: #4fbf9a; }

.theme-option__preview--system .theme-option__swatch { background: rgba(47, 111, 208, 0.65); }

.theme-option__name {
  font-weight: 600;
}

.theme-option__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* —— 滑块行 —— */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.slider-row input[type='range'] {
  flex: 1;
  accent-color: var(--color-primary);
}


/* ==========================================================================
   响应式：手机与窄屏
   桌面是"左侧栏 + 主区"的两列布局；窄屏改为单列纵向堆叠，
   导航变成可横向滚动的一行，保证任何屏幕宽度下都能操作与阅读。
   ========================================================================== */

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      'brand'
      'topbar'
      'nav'
      'main';
  }

  .app-brand {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .app-topbar {
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  /* 导航改为横向滚动的标签条：不用汉堡菜单也能一键直达任意页面 */
  .app-nav {
    padding: var(--space-2) var(--space-3);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-2);
    overflow-x: auto;
  }

  .app-nav__list {
    flex-direction: row;
    gap: var(--space-1);
    min-width: max-content;
  }

  .app-nav__link {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
  }

  /* 窄屏下快捷键数字没有意义，隐藏以免占用宽度 */
  .app-nav__key {
    display: none;
  }

  .app-main {
    padding: var(--space-3);
  }

  /* 表格在窄屏允许横向滚动，而不是把内容压变形 */
  .table-wrap {
    overflow-x: auto;
  }

  .home-hero {
    padding: var(--space-4);
  }

  .home-hero__actions {
    width: 100%;
  }

  .home-hero__actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .metric-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .home-tiles,
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .card {
    padding: var(--space-3);
  }

  .task-item__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .task-item__actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   每日视图：日期为列、任务为内容
   ========================================================================== */

.day-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  align-items: start;
}

/* 窄屏允许横向滚动，保证卡片不会被压扁或重叠 */
@media (max-width: 900px) {
  .day-board {
    grid-auto-columns: minmax(160px, 1fr);
    padding: var(--space-3);
  }
}

.day-board__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid transparent;
}

.day-board__col.is-today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.day-board__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.day-board__date {
  font-weight: 650;
  font-size: var(--font-size-sm);
}

.day-board__num {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-board__badge {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: auto;
}

.day-board__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.day-board__empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  padding: var(--space-2);
  text-align: center;
}

/* —— 任务卡片 —— */
.day-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  text-align: left;
  font: inherit;
  color: inherit;
}

.day-card--study {
  border-left-color: var(--color-study);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.day-card--study:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.day-card--study:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.day-card--fixed {
  border-left-color: var(--color-fixed);
  background: var(--color-surface-alt);
}

.day-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-card__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.day-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* —— 小标签 —— */
.day-tag {
  font-size: 11px;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.day-tag--study {
  background: var(--color-study-soft);
  color: var(--color-study);
}

.day-tag--fixed {
  background: var(--color-fixed-soft);
  color: var(--color-fixed);
}

.day-tag--completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.day-tag--in_progress {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.day-tag--flexible {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.day-tag--locked {
  background: var(--color-locked-soft);
  color: var(--color-locked);
}

.day-tag--overdue {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.day-tag--cancelled {
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
}

/* ==========================================================================
   七天计划看板（日期为列、任务为内容）
   尺寸基准：--day-grid-step 代表 5 分钟，卡片高度 = 整数个标准格。
   注意：这些标准格只用于**尺寸对齐**，不绘制任何时间刻度文字。
   ========================================================================== */

:root {
  --day-grid-step: 8px;
}

.day-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  align-items: start;
}

@media (max-width: 900px) {
  .day-board {
    grid-auto-columns: minmax(170px, 1fr);
    padding: var(--space-3);
  }
}

.day-board__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid transparent;
}

.day-board__col.is-today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.day-board__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.day-board__date {
  font-weight: 650;
  font-size: var(--font-size-sm);
}

.day-board__num {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-board__badge {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: auto;
}

.day-board__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
}

.day-board__empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  padding: var(--space-2);
  text-align: center;
}

/* —— 卡片：高度按时长取整数个标准格，文字绝不溢出 —— */
.day-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  overflow: hidden;
}

.day-card--study { border-left-color: var(--color-study); }
.day-card--fixed { border-left-color: var(--color-fixed); background: var(--color-surface-alt); }
.day-card--rest { border-left-color: var(--color-rest); background: var(--color-rest-soft); }

/* 极短时段（≤30 分钟）：只显示一行时间与名称，隐藏次要信息 */
.day-card.is-compact {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.day-card.is-compact .day-card__title {
  font-size: var(--font-size-xs);
}

.day-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.day-card__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  /* 名称最长 10 个字符，这里再做一次兜底，确保绝不溢出卡片 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 0 auto;
}

.day-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 0 0 auto;
}

.day-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  flex: 0 0 auto;
}

.day-card__actions .btn {
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  min-height: 0;
}

/* —— 小标签 —— */
.day-tag {
  font-size: 10px;
  line-height: 1.6;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.day-tag--study { background: var(--color-study-soft); color: var(--color-study); }
.day-tag--fixed { background: var(--color-fixed-soft); color: var(--color-fixed); }
.day-tag--rest { background: var(--color-rest-soft); color: var(--color-rest); border-color: var(--color-rest); }
.day-tag--completed { background: var(--color-success-soft); color: var(--color-success); }
.day-tag--in_progress { background: var(--color-warning-soft); color: var(--color-warning); }
.day-tag--flexible { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.day-tag--locked { background: var(--color-locked-soft); color: var(--color-locked); }
.day-tag--overdue { background: var(--color-danger-soft); color: var(--color-danger); }
.day-tag--cancelled { background: var(--color-surface-alt); color: var(--color-text-faint); }

/* ==========================================================================
   布局与组件样式
   命名约定：块级用 .app- / .card / .btn / .pill / .state；修饰用 -modifier。
   所有颜色与间距都引用 tokens.css 中的变量。
   ========================================================================== */

/* —— 应用外壳 —— */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    'brand topbar'
    'nav   main';
  min-height: 100vh;
}

.app-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.app-brand__mark {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  flex: none;
}

.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-nav {
  grid-area: nav;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.app-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: 500;
}
.app-nav__link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}
.app-nav__link[aria-current='page'] {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}
.app-nav__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.app-nav__foot {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.app-main {
  grid-area: main;
  padding: var(--space-5) var(--space-5) var(--space-7);
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.page-head__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}
.page-head__actions {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

/* —— 卡片 —— */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}
.card__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* —— 按钮 —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--color-surface-alt);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-surface);
}
.btn--danger:hover:not(:disabled) {
  background: var(--color-danger-soft);
}
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

/* —— 状态标签 —— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.pill--study {
  background: var(--color-study-soft);
  color: var(--color-study);
}
.pill--fixed {
  background: var(--color-fixed-soft);
  color: var(--color-text-muted);
}
.pill--rest {
  background: var(--color-rest-soft);
  color: var(--color-rest);
}
.pill--locked {
  background: var(--color-locked-soft);
  color: var(--color-locked);
}
.pill--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.pill--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.pill--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* —— 提示条 / 空状态 / 错误状态 —— */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-4);
}
.notice__title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.notice--info {
  background: var(--color-primary-soft);
  border-color: #cfe0f7;
}
.notice--warning {
  background: var(--color-warning-soft);
  border-color: #f0e0b6;
}
.notice--danger {
  background: var(--color-danger-soft);
  border-color: #f2cfc9;
}
.notice--success {
  background: var(--color-success-soft);
  border-color: #cbe6d8;
}

.state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.state__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.state__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* —— 数据摘要（避免无意义的大数字卡片堆砌，只保留必要的每日统计） —— */
.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.metric__value {
  font-size: var(--font-size-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* —— 图例 —— */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--color-border-strong);
}

/* —— 任务列表 —— */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.task-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.task-item:last-child {
  border-bottom: none;
}
.task-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.task-item__title {
  font-weight: 600;
}
.task-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.task-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* —— 表单 —— */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.form-field__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0 0 var(--space-4);
}
legend {
  padding: 0 var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* —— 可聚焦的横向滚动区域（七天看板）—— */
.day-board:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* —— 屏幕阅读器专用提示 —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* —— 表格型列表（版本历史） —— */
.table-wrap {
  overflow-x: auto;
}

/* —— 诊断列表（未安排原因、冲突与风险） —— */
.diag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.diag-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: var(--font-size-sm);
}
.diag-item__code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  flex: none;
}

/* —— 窄屏适配：侧边栏收起为顶部标签，网格变单列 —— */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'brand'
      'nav'
      'main';
  }
  .app-topbar {
    grid-area: brand;
    border-bottom: 1px solid var(--color-border);
  }
  .app-brand {
    display: none;
  }
  .app-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
  }
  .app-nav__list {
    flex-direction: row;
    gap: var(--space-1);
  }
  .app-nav__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.app-nav__foot {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
  }
  .app-main {
    padding: var(--space-4);
  }
  .grid-2,
  .grid-3,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   首页、统计与进度组件
   ========================================================================== */

/* —— 首页主视觉 —— */
.home-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.home-hero__date {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.home-hero__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  line-height: 1.25;
}

.home-hero__sub {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.home-hero__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* —— 统计磁贴 —— */
.home-tiles,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.stat-tile--button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.stat-tile--button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.stat-tile__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat-tile__value {
  font-size: var(--font-size-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.stat-tile__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 进度条 —— */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.progress__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.progress__value {
  font-variant-numeric: tabular-nums;
}

.progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 240ms ease;
}

.progress__fill--rest { background: var(--color-rest); }
.progress__fill--accent { background: var(--color-accent); }
.progress__fill--locked { background: var(--color-locked); }
.progress__fill--danger { background: var(--color-danger); }

.progress__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 首页两列布局 —— */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.home-grid__main,
.home-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 1080px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* —— 下一项学习 —— */
.home-next__task {
  margin-bottom: var(--space-2);
}

.home-next__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.home-next__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* —— 最近七天迷你柱状图 —— */
.week-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  align-items: end;
  height: 132px;
}

.week-bars__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
}

.week-bars__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.week-bars__bar {
  width: 12px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height 240ms ease;
}

.week-bars__bar--planned {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
}

.week-bars__bar--actual {
  background: var(--color-primary);
}

.week-bars__label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* —— 占比条 —— */
.share-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.share-bars__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.share-bars__value {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.share-bars__track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.share-bars__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}

.share-bars__fill--rest { background: var(--color-rest); }
.share-bars__fill--accent { background: var(--color-accent); }
.share-bars__fill--locked { background: var(--color-locked); }

/* —— 柱状图 —— */
.chart-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chart-figure__axis {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  align-items: end;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}

.chart__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
  min-width: 0;
}

/* 计划时长：同一列背后的浅色轨道（与实际柱同一坐标，不并列） */
.chart__track {
  position: absolute;
  bottom: 18px;
  width: 68%;
  border-radius: 4px 4px 0 0;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  box-sizing: border-box;
  z-index: 0;
}

.chart__bar {
  position: relative;
  z-index: 1;
  width: 58%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--color-primary);
  transition: height 260ms ease;
}

/* 当天没有任何已完成学习：一条基线短划，与"没有数据"区分开 */
.chart__zero {
  width: 58%;
  height: 2px;
  margin-bottom: 0;
  border-radius: 1px;
  background: var(--color-border-strong);
  z-index: 1;
}

.chart__label {
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.chart-legend__swatch--bar { background: var(--color-primary); }
.chart-legend__swatch--track { background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); }
.chart-legend__swatch--zero { background: var(--color-border-strong); height: 2px; }

.chart__label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* —— 完成的清单项 —— */
.task-item--done {
  opacity: 0.68;
}

.task-item--done strong {
  text-decoration: line-through;
}

/* ==========================================================================
   主题选项、转盘、番茄钟、通知列表
   ========================================================================== */

/* —— 主题选项卡片 —— */
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 140ms ease, transform 140ms ease;
}

.theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
}

.theme-option.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.theme-option__preview {
  display: flex;
  gap: 6px;
  height: 44px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.theme-option__preview--light { background: #f6f7f9; }
.theme-option__preview--dark { background: #12161c; }
.theme-option__preview--system { background: linear-gradient(90deg, #f6f7f9 50%, #12161c 50%); }

.theme-option__swatch {
  flex: 1;
  border-radius: var(--radius-sm);
}

.theme-option__preview--light .theme-option__swatch:nth-child(1) { background: #2f6fd0; }
.theme-option__preview--light .theme-option__swatch:nth-child(2) { background: #ffffff; border: 1px solid #dfe3e8; }
.theme-option__preview--light .theme-option__swatch:nth-child(3) { background: #3f9e7f; }

.theme-option__preview--dark .theme-option__swatch:nth-child(1) { background: #6ba4f0; }
.theme-option__preview--dark .theme-option__swatch:nth-child(2) { background: #1a1f27; border: 1px solid #2e3641; }
.theme-option__preview--dark .theme-option__swatch:nth-child(3) { background: #4fbf9a; }

.theme-option__preview--system .theme-option__swatch { background: rgba(47, 111, 208, 0.65); }

.theme-option__name {
  font-weight: 600;
}

.theme-option__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* —— 滑块行 —— */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.slider-row input[type='range'] {
  flex: 1;
  accent-color: var(--color-primary);
}


/* ==========================================================================
   响应式：手机与窄屏
   桌面是"左侧栏 + 主区"的两列布局；窄屏改为单列纵向堆叠，
   导航变成可横向滚动的一行，保证任何屏幕宽度下都能操作与阅读。
   ========================================================================== */

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      'brand'
      'topbar'
      'nav'
      'main';
  }

  .app-brand {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .app-topbar {
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  /* 导航改为横向滚动的标签条：不用汉堡菜单也能一键直达任意页面 */
  .app-nav {
    padding: var(--space-2) var(--space-3);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-2);
    overflow-x: auto;
  }

  .app-nav__list {
    flex-direction: row;
    gap: var(--space-1);
    min-width: max-content;
  }

  .app-nav__link {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
  }

  /* 窄屏下快捷键数字没有意义，隐藏以免占用宽度 */
  .app-nav__key {
    display: none;
  }

  .app-main {
    padding: var(--space-3);
  }

  /* 表格在窄屏允许横向滚动，而不是把内容压变形 */
  .table-wrap {
    overflow-x: auto;
  }

  .home-hero {
    padding: var(--space-4);
  }

  .home-hero__actions {
    width: 100%;
  }

  .home-hero__actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .metric-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .home-tiles,
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .card {
    padding: var(--space-3);
  }

  .task-item__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .task-item__actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   每日视图：日期为列、任务为内容
   ========================================================================== */

.day-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  align-items: start;
}

/* 窄屏允许横向滚动，保证卡片不会被压扁或重叠 */
@media (max-width: 900px) {
  .day-board {
    grid-auto-columns: minmax(160px, 1fr);
    padding: var(--space-3);
  }
}

.day-board__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid transparent;
}

.day-board__col.is-today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.day-board__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.day-board__date {
  font-weight: 650;
  font-size: var(--font-size-sm);
}

.day-board__num {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-board__badge {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: auto;
}

.day-board__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.day-board__empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  padding: var(--space-2);
  text-align: center;
}

/* —— 任务卡片 —— */
.day-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  text-align: left;
  font: inherit;
  color: inherit;
}

.day-card--study {
  border-left-color: var(--color-study);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.day-card--study:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.day-card--study:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.day-card--fixed {
  border-left-color: var(--color-fixed);
  background: var(--color-surface-alt);
}

.day-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-card__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.day-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* —— 小标签 —— */
.day-tag {
  font-size: 11px;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.day-tag--study {
  background: var(--color-study-soft);
  color: var(--color-study);
}

.day-tag--fixed {
  background: var(--color-fixed-soft);
  color: var(--color-fixed);
}

.day-tag--completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.day-tag--in_progress {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.day-tag--flexible {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.day-tag--locked {
  background: var(--color-locked-soft);
  color: var(--color-locked);
}

.day-tag--overdue {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.day-tag--cancelled {
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
}

/* ==========================================================================
   七天计划看板（日期为列、任务为内容）
   尺寸基准：--day-grid-step 代表 5 分钟，卡片高度 = 整数个标准格。
   注意：这些标准格只用于**尺寸对齐**，不绘制任何时间刻度文字。
   ========================================================================== */

:root {
  --day-grid-step: 8px;
}

.day-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-x: auto;
  align-items: start;
}

@media (max-width: 900px) {
  .day-board {
    grid-auto-columns: minmax(170px, 1fr);
    padding: var(--space-3);
  }
}

.day-board__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid transparent;
}

.day-board__col.is-today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.day-board__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.day-board__date {
  font-weight: 650;
  font-size: var(--font-size-sm);
}

.day-board__num {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.day-board__badge {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: auto;
}

.day-board__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
}

.day-board__empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  padding: var(--space-2);
  text-align: center;
}

/* —— 卡片：高度按时长取整数个标准格，文字绝不溢出 —— */
.day-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  overflow: hidden;
}

.day-card--study { border-left-color: var(--color-study); }
.day-card--fixed { border-left-color: var(--color-fixed); background: var(--color-surface-alt); }
.day-card--rest { border-left-color: var(--color-rest); background: var(--color-rest-soft); }

/* 极短时段（≤30 分钟）：只显示一行时间与名称，隐藏次要信息 */
.day-card.is-compact {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.day-card.is-compact .day-card__title {
  font-size: var(--font-size-xs);
}

.day-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.day-card__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  /* 名称最长 10 个字符，这里再做一次兜底，确保绝不溢出卡片 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 0 auto;
}

.day-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 0 0 auto;
}

.day-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  flex: 0 0 auto;
}

.day-card__actions .btn {
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  min-height: 0;
}

/* —— 小标签 —— */
.day-tag {
  font-size: 10px;
  line-height: 1.6;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.day-tag--study { background: var(--color-study-soft); color: var(--color-study); }
.day-tag--fixed { background: var(--color-fixed-soft); color: var(--color-fixed); }
.day-tag--rest { background: var(--color-rest-soft); color: var(--color-rest); border-color: var(--color-rest); }
.day-tag--completed { background: var(--color-success-soft); color: var(--color-success); }
.day-tag--in_progress { background: var(--color-warning-soft); color: var(--color-warning); }
.day-tag--flexible { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.day-tag--locked { background: var(--color-locked-soft); color: var(--color-locked); }
.day-tag--overdue { background: var(--color-danger-soft); color: var(--color-danger); }
.day-tag--cancelled { background: var(--color-surface-alt); color: var(--color-text-faint); }

/* ==========================================================================
   专注花园（内嵌的独立应用，常驻同源 iframe）
   ==========================================================================
   宿主容器与 main 共用同一个网格区域；进入花园时隐藏 main、显示宿主。
   iframe **只创建一次**，切换页面只切 hidden —— 这样花园的计时器不会被打断。
   ========================================================================== */

/* 花园模式下隐藏规划器的外壳（侧边栏 / 顶栏 / 品牌区），让花园占满整个窗口 */
.app[data-mode='garden'] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'main';
}

.app[data-mode='garden'] .app-brand,
.app[data-mode='garden'] .app-topbar,
.app[data-mode='garden'] .app-nav {
  display: none;
}

/* 返回按钮：花园全屏时唯一的出口，浮在左上角，克制但清楚 */
.garden-back {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full, 999px);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.garden-back:hover,
.garden-back:focus-visible {
  opacity: 1;
  background: var(--color-surface-alt);
}

.garden-host {
  grid-area: main;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  /* 铺满内容区，不留内边距（花园自己有一整套布局） */
  padding: 0;
}

.garden-host[hidden] {
  display: none;
}

.garden-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  /* 用内容区的整块高度，而不是写死 px，避免和侧边栏高度打架 */
  min-height: calc(100vh - var(--topbar-height));
  border: 0;
  background: var(--color-surface);
}

/* 已完成的卡片：保留在时间表里，但降低对比度并给出明确的完成视觉 */
.day-card--completed {
  border-left-color: var(--color-success, #2f6f4f);
  background: var(--color-surface-alt);
  opacity: 0.78;
}

.day-card--completed .day-card__title {
  text-decoration: line-through;
  text-decoration-color: var(--color-text-faint);
  text-decoration-thickness: 1px;
  color: var(--color-text-muted);
}

.day-card--completed:hover,
.day-card--completed:focus-within {
  opacity: 1;
}

.day-card--completed .day-tag--completed {
  background: var(--color-success-soft, #eef5f0);
  color: var(--color-success, #2f6f4f);
  border-color: var(--color-success-border, #c8ddd1);
}

/* ==========================================================================
   液态玻璃：分层应用
   ==========================================================================

   Tier 1 外壳（品牌区 / 顶栏 / 侧边栏）：真模糊。它们是固定的窄条，
   背后是氛围色场，模糊后才看得出"玻璃"；而且不会盖住正文。

   Tier 2 内容卡片：**不模糊**，只做高不透明度 tint + 边缘光。
   正文承载在这里，模糊会把字搅浑——这是本项目之前"整页发蒙"的教训。

   Tier 3 浮层（弹窗 / Toast）：最强玻璃 + 大阴影，形成明显的悬浮层级。
   ========================================================================== */

/* —— Tier 1：外壳 —— */
.app-brand,
.app-topbar,
.app-nav {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-outer);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-shade);
}

.app-brand {
  border-right-color: var(--glass-border-outer);
  border-bottom-color: var(--glass-border-outer);
}

.app-topbar {
  border-bottom-color: var(--glass-border-outer);
}

.app-nav {
  border-right-color: var(--glass-border-outer);
  /* 侧边栏底部有一条更高光的收口，像 macOS 窗口的分隔 */
  border-bottom: 1px solid transparent;
}

/* 侧边栏的"顶部高光"再亮一点，模拟玻璃的受光面 */
.app-brand::after,
.app-topbar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.app-brand,
.app-topbar {
  position: relative;
}

/* —— Tier 2：内容卡片（tint，不模糊） —— */
.card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-outer);
  border-radius: var(--glass-radius-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-shade),
    var(--glass-shadow);
  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

/* 更小的表面：圆角收窄，避免"胶囊化" */
.day-card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-outer);
  border-radius: var(--glass-radius-sm);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}

.task-item,
.metric {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-outer);
  border-radius: var(--glass-radius-md);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}

/* 悬停：轻微上浮 + 阴影增强（克制，不做发光） */
.card:hover,
.metric:hover {
  background: var(--glass-bg-card-hover);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-shade),
    var(--glass-shadow-hover);
}

@media (hover: hover) {
  .card:hover,
  .metric:hover {
    transform: translateY(-1px);
  }
}

/* 按压 */
.card:active,
.metric:active {
  transform: translateY(0) scale(0.997);
}

/* —— Tier 3：浮层 —— */
dialog {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-outer);
  border-radius: var(--glass-radius-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 1px 2px rgba(0, 0, 0, 0.08),
    var(--glass-shadow-float);
}

dialog::backdrop {
  background: rgba(16, 20, 26, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Toast / 通知条：与弹窗同族，但更轻 */
#toast-host .notice {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-outer);
  border-radius: var(--glass-radius-md);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow-float);
}

/* —— 控件 —— */

/* 导航 active：液态高光胶囊，而不是整块高饱和色 */
.app-nav__link[aria-current='page'] {
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 62%),
    var(--color-primary-soft);
  border: 1px solid var(--glass-border-outer);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 1px 2px rgba(20, 26, 34, 0.06);
  color: var(--color-primary-hover);
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.app-nav__link {
  transition: background-color 150ms ease, color 150ms ease;
}

/* 次级/幽灵按钮：小玻璃胶囊 */
.btn--ghost {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-outer);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.btn--ghost:hover {
  background: var(--glass-bg-card-hover);
}

/* 主按钮保持实色（可点击性优先），只加一点内高光与按压反馈 */
.btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(20, 26, 34, 0.16);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* 输入框：高不透明度，focus 用 accent 边 + 柔和外发光 */
.input,
.select,
textarea {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-outer);
  box-shadow: inset 0 1px 2px rgba(20, 26, 34, 0.04);
}

.input:focus,
.select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* —— 鼠标跟随的镜面高光（只在支持 hover 且未减少动态效果时） —— */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-glass] {
    position: relative;
    isolation: isolate;
  }

  [data-glass]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    background: radial-gradient(
      260px circle at var(--glass-x) var(--glass-y),
      rgba(255, 255, 255, 0.16),
      transparent 70%
    );
    z-index: 0;
  }

  [data-glass]:hover::before {
    opacity: 1;
  }

  /* 内容要压在高光之上，否则会被蒙一层 */
  [data-glass] > * {
    position: relative;
    z-index: 1;
  }
}

/* —— 移动端：模糊降档，保证滚动流畅 —— */
@media (max-width: 720px) {
  .app-brand,
  .app-topbar,
  .app-nav {
    backdrop-filter: blur(var(--glass-blur-soft)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(150%);
    background: var(--glass-bg-card);
  }

  dialog,
  #toast-host .notice {
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}

/* —— 降低动态效果：去掉上浮与漂移 —— */
@media (prefers-reduced-motion: reduce) {
  .card,
  .metric,
  .btn,
  .app-nav__link {
    transition: none;
  }

  .card:hover,
  .metric:hover,
  .card:active,
  .metric:active,
  .btn:active {
    transform: none;
  }

  [data-glass]::before {
    display: none;
  }
}

/* —— 减少透明：整体退化为实色 —— */
@media (prefers-reduced-transparency: reduce) {
  .app-brand,
  .app-topbar,
  .app-nav,
  dialog,
  #toast-host .notice {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .card,
  .day-card,
  .task-item,
  .metric {
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(20, 26, 34, 0.06);
  }
}

/* —— 强制颜色模式：交给系统色，去掉玻璃与渐变 —— */
@media (forced-colors: active) {
  .app-brand,
  .app-topbar,
  .app-nav,
  dialog,
  .card,
  .day-card,
  .task-item,
  .metric,
  #toast-host .notice {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ambient-field,
  [data-glass]::before {
    display: none;
  }
}

/* —— 打印：干净输出，不要背景光斑与阴影 —— */
@media print {
  .app-brand,
  .app-topbar,
  .app-nav,
  .card,
  .day-card,
  .task-item,
  .metric,
  dialog,
  #toast-host .notice {
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-glass]::before {
    display: none;
  }
}

/* ==========================================================================
   文字安全层（Text safety）
   ==========================================================================

   这一层只解决"文字跑出容器"的**根因**，不是用 overflow: hidden 把问题藏起来：

   1. flex / grid 子项默认 `min-width: auto`，不肯收缩 → 补 `min-width: 0`；
   2. 单行文字（标题/标签/时间）→ 省略号 + `title`（DOM 侧已补）；
   3. 多行正文 → 允许换行 + `overflow-wrap: anywhere`；
   4. 按钮/输入框的固有宽度 → `max-width: 100%` + `min-width: 0`。

   刻意**不做**的事：
   - 不给 body / .app / .app-main 加 overflow: hidden（会裁掉焦点环与阴影）；
   - 不把正文容器设成 nowrap（重要内容必须能读全）。
   ========================================================================== */

/* —— 1. 基准：允许收缩 —— */
.page-head > *,
.card__head > *,
.form-actions > *,
.notice > *,
.task-item__head > *,
.app-topbar > *,
.app-topbar__meta > * {
  min-width: 0;
}

.page-head,
.card__head,
.app-topbar,
.app-topbar__meta,
.form-actions {
  flex-wrap: wrap;
}

/* —— 2. 单行：省略号 —— */
.app-nav__link,
.app-nav__link > span,
.task-item__title,
.day-card__time,
.day-card__minutes,
.page-head__actions .btn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/**
 * 卡片标题**不做**单行截断。
 *
 * 为什么从上面那组里单独摘出来：
 * 标题都是短词（"今天的任务""排程参数"），本来就不会撑破容器，
 * 没有必要为它们加 `nowrap + overflow: hidden`。
 * 而 `overflow: hidden` 会在**四周**裁剪，包括左侧——
 * 在高分屏（devicePixelRatio 2）下，中文字形左侧的亚像素留白正好被裁掉，
 * 首字看起来像"超出了文本框"（实测 scrollWidth === clientWidth，
 * 说明不是布局溢出，而是裁切造成的视觉问题）。
 *
 * 改为允许换行：既避免裁切，也避免极端窄容器下文字被省略号吃掉。
 */
.card__title {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

/* 任务行标题要能收缩，否则会把右侧操作按钮挤走 */
.task-item__head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* —— 3. 多行：换行 + 断词 —— */
.page-head__sub,
.card__hint,
.task-item__meta,
.metric__label,
.form-field__hint,
.form-field__error,
.notice,
#toast-host .notice,
dialog p,
dialog li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 看板卡片标题：最多两行，超出省略（固定高度卡片不能撑破）。
   注意：上面原有的 `.day-card__title` 设了 white-space: nowrap，
   这里必须显式改回 normal，否则 line-clamp 不生效、文字会顶出卡片。 */
.day-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* 胶囊与图表标签：长文字不能顶出容器 */
.pill,
.chart__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标签也要能省略，否则长科目名会顶出卡片 */
.day-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 4. 按钮与操作区 —— */
.btn {
  max-width: 100%;
  min-width: 0;
}

/* 操作区里的按钮允许换行显示长文案（只对显式标记的操作区生效） */
.form-actions .btn,
.task-item__actions .btn,
.day-card__actions .btn {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* —— 5. 输入框：原生控件有固有宽度，必须显式允许收缩 —— */
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}

/* 日期/时间控件在 Safari/iOS 上有较宽的固有尺寸 */
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  min-width: 0;
}

textarea {
  resize: vertical;
}

/* —— 6. 统计磁贴：长数字/长标签不撑破 —— */
.metric {
  min-width: min(96px, 100%);
  max-width: 100%;
}

.metric__value {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* —— 7. 弹窗：不超出视口，内容可滚动 —— */
dialog {
  max-width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

/* —— 8. Toast / 通知条：长消息在固定宽度内换行 —— */
#toast-host .notice {
  max-width: 100%;
}

#toast-host .notice > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* —— 9. 外壳：长文案不把按钮挤出去 —— */
.app-topbar__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.app-topbar__actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-topbar__meta > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 10. 窄屏：允许标题与操作区上下堆叠 —— */
@media (max-width: 720px) {
  .page-head,
  .card__head,
  .task-item__head {
    flex-direction: column;
    align-items: stretch;
  }

  .page-head__actions,
  .card__head > div:last-child,
  .task-item__actions {
    justify-content: flex-start;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   日程助手（AI 气泡 + 抽屉）
   位置固定在右下角，不参与任何页面布局，也不改变 .app 的网格。
   ========================================================================== */

.ai-assistant {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  /* 容器本身不拦截点击，只有气泡与面板响应事件 */
  pointer-events: none;
}

.ai-assistant__bubble {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border);
  /* 圆形按钮不使用项目里的圆角令牌 */
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-assistant__bubble:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}

.ai-assistant__bubble:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.ai-assistant__icon {
  font-size: 24px;
  line-height: 1;
}

/* 未读角标：自动问候拿到结论时出现，提示"这里有一句 AI 生成的话" */
.ai-assistant__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.ai-assistant__panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 140px));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ai-assistant__panel[hidden] {
  display: none;
}

.ai-assistant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.ai-assistant__close {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.ai-assistant__messages {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.ai-assistant__msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}

.ai-assistant__msg--user {
  align-items: flex-end;
}

.ai-assistant__who {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

.ai-assistant__text {
  /* 保证长英文串与 URL 不会撑破气泡 */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.ai-assistant__msg--user .ai-assistant__text {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.ai-assistant__msg--error .ai-assistant__text {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.ai-assistant__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ai-assistant__chip {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.ai-assistant__chip:hover {
  border-color: var(--color-border-strong);
}

.ai-assistant__status {
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ai-assistant__composer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.ai-assistant__input {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
}

.ai-assistant__send {
  align-self: flex-end;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.ai-assistant__send:disabled,
.ai-assistant__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-assistant__hint {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
}

/* 移动端：气泡不要挡住底部导航 */
@media (max-width: 720px) {
  .ai-assistant {
    right: var(--space-4);
    bottom: 76px;
  }

  .ai-assistant__panel {
    max-height: min(520px, calc(100vh - 180px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-assistant__bubble {
    transition: none;
  }
}

/* ==========================================================================
   AI 助手页（计划急救 + 时间校准）
   原则：AI 的内容与程序的内容视觉上分开，用户要能分清哪句来自模型、哪个数字来自计算。
   ========================================================================== */

.ai-report {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.ai-report:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.ai-fact-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.ai-fact__label {
  color: var(--color-text-muted);
  flex: none;
}

.ai-fact__value {
  font-weight: 560;
}

.ai-loading {
  padding: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* AI 的分析：左侧竖线标记，与程序的提示块区分开 */
.ai-reply {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}

.ai-reply__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.ai-reply__text {
  /* 模型输出可能很长，必须能换行且不撑破容器 */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.ai-proposals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.ai-hint {
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.ai-cal-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.ai-cal-row:last-child {
  border-bottom: 0;
}

.ai-cal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-cal-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ai-cal-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ai-cal-delta {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ai-cal-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .ai-cal-delta {
    align-self: flex-start;
  }
}