/* css/app.css — 66 的课程表 网页版设计系统（莫兰迪），由小程序 app.wxss 迁移 */

:root {
  /* 语义色 */
  --color-primary: #A8B5C2;
  --color-secondary: #D5B5A8;
  --color-bg: #F5F2EE;
  --color-card: #FFFFFF;
  --color-warning: #C9928A;
  --color-success: #A8BFA8;
  --color-text: #3A3A3A;
  --color-text-2: #8A8A8A;
  --color-divider: #EDE8E2;
  /* 7 分类色 */
  --cat-sport: #A8B5C2;
  --cat-art: #D5B5A8;
  --cat-language: #B5A8C2;
  --cat-music: #C2B5A8;
  --cat-dance: #C2A8B5;
  --cat-study: #A8C2B5;
  --cat-other: #C2C2A8;
  /* 圆角 */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(58, 58, 58, .06);
  --shadow-md: 0 4px 16px rgba(58, 58, 58, .08);
  --shadow-lg: 0 8px 28px rgba(58, 58, 58, .10);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

[v-cloak] { display: none; }

/* 手机优先：内容居中限宽，桌面端两边留白 */
.app-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 20px 96px;
  position: relative;
}

.page { padding-top: 12px; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 卡片 */
.card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.card + .card { margin-top: 16px; }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  background: var(--color-primary);
  color: #fff;
}
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.primary { background: var(--color-primary); color: #fff; }
.btn.success { background: var(--color-success); color: #fff; }
.btn.warning { background: var(--color-warning); color: #fff; }
.btn.secondary { background: rgba(168, 181, 194, .18); color: #4a5a66; }
.btn.ghost { background: transparent; color: var(--color-text-2); box-shadow: none; }
.btn.danger-text { background: transparent; color: var(--color-warning); box-shadow: none; }
.btn.disabled, .btn[disabled] { opacity: .5; pointer-events: none; }
.btn.sm { height: 38px; padding: 0 18px; font-size: 14px; }

/* 标签 chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(168, 181, 194, .16);
  color: #4a5a66;
}
.chip.primary { background: rgba(168, 181, 194, .16); color: #4a5a66; }
.chip.warning { background: rgba(201, 146, 138, .16); color: var(--color-warning); }
.chip.success { background: rgba(168, 191, 168, .18); color: #5c7a5c; }

/* 标题 / 文本 */
.t-title { font-size: 20px; font-weight: 700; }
.t-display { font-size: 40px; font-weight: 800; line-height: 1.1; }
.t-section { font-size: 17px; font-weight: 700; margin: 4px 0 12px; }
.t-meta { font-size: 13px; color: var(--color-text-2); }
.t-num { font-variant-numeric: tabular-nums; }

/* 进度条 */
.progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(58, 58, 58, .08);
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width .3s ease;
}
.progress.warning > i { background: var(--color-warning); }
.progress.success > i { background: var(--color-success); }

/* 步进器 */
.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
}
.stepper button {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--color-text);
  cursor: pointer;
}
.stepper button:disabled { color: #ccc; }
.stepper span {
  min-width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

/* 底部固定操作条 */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--color-divider);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(58, 58, 58, .06);
  z-index: 40;
}
.bottom-bar .inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }

/* TabBar */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--color-divider);
  z-index: 50;
}
.tabbar .inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 0 7px;
  color: #8A8A8A;
  text-decoration: none;
  font-size: 11px;
}
.tabbar a.active { color: var(--color-primary); font-weight: 600; }
.tabbar a i { font-size: 20px; }

/* 分类 tabs（横向滚动） */
.cat-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 14px;
  -webkit-overflow-scrolling: touch;
}
.cat-tab {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  background: #fff;
  color: var(--color-text-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: none;
}
.cat-tab.active { background: var(--color-primary); color: #fff; font-weight: 600; }

/* 分类色块（课程图标底） */
.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 26px;
  flex-shrink: 0;
}

/* 课程卡片 */
.course-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  cursor: pointer;
}
.course-card + .course-card { margin-top: 12px; }
.course-card .grow { flex: 1; min-width: 0; }

/* 表格行 / 列表项 */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.row:last-child { border-bottom: none; }

/* 表单 */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; color: var(--color-text-2); margin-bottom: 8px; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--color-divider);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--color-text);
  outline: none;
}
.input:focus, .textarea:focus { border-color: var(--color-primary); }
.textarea { min-height: 84px; resize: vertical; }

/* 星期多选 */
.week-pick { display: flex; gap: 8px; }
.week-pick button {
  flex: 1;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--color-divider);
  background: #fff;
  font-size: 15px;
  color: var(--color-text-2);
  cursor: pointer;
}
.week-pick button.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }

/* 日历（寒暑假模式） */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar .day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  border: 1px solid transparent;
}
.calendar .day.pad { background: transparent; cursor: default; }
.calendar .day.past { color: #ccc; }
.calendar .day.on { background: var(--color-primary); color: #fff; font-weight: 700; }
.calendar .day.today { border-color: var(--color-primary); }

/* 统计柱状图 */
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.bar-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar-chart .bar { width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: var(--color-primary); min-height: 3px; }
.bar-chart .col.current .bar { background: var(--color-secondary); }
.bar-chart .val { font-size: 12px; font-weight: 700; }

/* 占比条 */
.ratio-bar { height: 8px; border-radius: 999px; background: rgba(58, 58, 58, .08); overflow: hidden; }
.ratio-bar > i { display: block; height: 100%; border-radius: 999px; }

/* Hero */
.hero {
  border-radius: var(--radius-lg);
  padding: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #93a3b3);
}
.hero.secondary { background: linear-gradient(135deg, var(--color-secondary), #c8a494); }
.hero.success { background: linear-gradient(135deg, var(--color-success), #8fa98f); }

/* 空态 */
.empty { text-align: center; padding: 60px 20px; color: var(--color-text-2); }
.empty i { font-size: 42px; opacity: .5; display: block; margin-bottom: 12px; }

/* 弹层 */
.mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mask .sheet {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 70vh;
  overflow-y: auto;
}

/* 加载态 */
.loading { text-align: center; padding: 60px 0; color: var(--color-text-2); }
.spinner { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--color-divider); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 30px; pointer-events: none; }
.toast {
  background: rgba(58, 58, 58, .88);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  animation: popIn .2s ease;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 登录页 */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}

.confirm-modal { text-align: center; }
.confirm-modal h3 { margin: 6px 0 10px; font-size: 18px; }
.confirm-modal p { color: var(--color-text-2); font-size: 14px; margin: 0 0 18px; }
/* ===== UI 优化 v13：Hero 环进度 / 分类竖条 / 剩余磁贴 / FAB / 图表渐变 / 桌面双列 / 确认弹层 / success toast ===== */

/* 环形进度（Hero 右上） */
.ring {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ring .ring-inner {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
}
.ring .ring-num { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ring .ring-tag { font-size: 10px; opacity: .9; margin-top: 2px; }

/* 课程卡片：左侧分类色条 */
.course-card { position: relative; overflow: hidden; }
.course-card .cat-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}

/* 剩余课时磁贴 */
.remaining-tile {
  min-width: 56px;
  text-align: center;
  background: rgba(168, 181, 194, .14);
  border-radius: 14px;
  padding: 8px 6px;
  flex-shrink: 0;
}
.remaining-tile .num { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.remaining-tile .unit { font-size: 11px; color: var(--color-text-2); }
.remaining-tile.warn { background: rgba(201, 146, 138, .16); }
.remaining-tile.warn .num { color: var(--color-warning); }

/* 底部中间 FAB（签到） */
.tabbar-fab {
  flex: 0 0 auto; width: 86px;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-fab a {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #93a3b3);
  color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(168, 181, 194, .55);
  margin-bottom: 6px;
}

/* 柱状图渐变 */
.bar-chart .bar {
  background: linear-gradient(180deg, #c6d2dc, var(--color-primary));
  border-radius: 8px 8px 4px 4px;
}
.bar-chart .col.current .bar { background: linear-gradient(180deg, #e3c9bb, var(--color-secondary)); }
.bar-chart .week-tag { font-size: 11px; color: var(--color-text-2); }
.bar-chart .col.current .week-tag { color: var(--color-secondary); font-weight: 700; }

/* 桌面双列 */
@media (min-width: 700px) {
  .course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .course-grid .course-card + .course-card { margin-top: 0; }
  .course-grid .course-card { margin-top: 0 !important; }
}

/* 确认弹层 */
.confirm-emoji { font-size: 52px; margin-bottom: 6px; }
.confirm-title { font-size: 18px; font-weight: 700; }
.confirm-msg { font-size: 14px; color: var(--color-text-2); margin: 8px 0 20px; line-height: 1.6; }
.confirm-msg b { color: var(--color-text); }

/* success toast（签到成功动效） */
.toast.success { background: var(--color-success); }
.toast .tick {
  display: inline-block; margin-right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--color-success);
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
  animation: popIn .3s ease;
}