/* ==========================================================================
   学生工具箱 · 全局组件
   原样移植自教师工具箱（assets/css/components.css），未做修改 ——
   按钮、输入、卡片、Toast、弹窗、空状态两个站必须一致。
   学生站专有的组件（学段卡、学段色）在 student.css，不往这里加。

   班级相关的类（.class-row / .roster / .switcher / .class-chip）学生站用不到，
   暂时留着没删：删了会和教师站产生 diff，将来同步麻烦。
   颜色一律取 tokens.css 的变量，这里不出现任何硬编码色值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   页面标题区
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-head h1 { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 32px); }
.page-head__desc { margin: 0; color: var(--text-muted); }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap-min);
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;      /* <a class="btn"> 不应该带下划线 */
}
.btn:hover { text-decoration: none; }
.btn:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); }

.btn--primary {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--text-on-brand);
}
.btn--primary:hover {
  background: var(--blue-800);
  border-color: var(--blue-800);
  color: var(--text-on-brand);
}

/* 黄底一律深色字（文档 10.1.1，白字只有 1.8:1） */
.btn--accent {
  background: var(--yellow-500);
  border-color: var(--yellow-500);
  color: var(--text-on-accent);
}
.btn--accent:hover { filter: brightness(.94); color: var(--text-on-accent); }

.btn--danger {
  background: var(--danger-strong);
  border-color: var(--danger-strong);
  color: var(--text-on-danger);
  font-weight: 600;
}
.btn--danger:hover { filter: brightness(.92); color: var(--text-on-danger); }

.btn--ghost { background: transparent; }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* 危险的文字按钮：用 -text 变体保证浅底对比度 */
.btn--link {
  min-height: 34px;
  padding: 0 8px;
  border-color: transparent;
  background: transparent;
  color: var(--blue-600);
}
.btn--link:hover { text-decoration: underline; }
.btn--link.is-danger { color: var(--danger-text); }

/* --------------------------------------------------------------------------
   Input / Textarea / Select
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
.field__hint { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.field__error { margin: 6px 0 0; font-size: 13px; color: var(--danger-text); font-weight: 500; }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--blue-600); }
.textarea { min-height: 200px; resize: vertical; line-height: 1.6; }
.textarea--roster { font-family: var(--font-mono); font-size: 14px; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  cursor: pointer;
}
.checkbox input { width: 18px; height: 18px; accent-color: var(--blue-600); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.card__title { margin: 0 0 4px; font-size: 18px; }
.card__desc { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }
.card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.card + .card { margin-top: 20px; }

.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   班级列表
   -------------------------------------------------------------------------- */

.class-list { display: flex; flex-direction: column; gap: 12px; }

.class-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.class-row.is-current { border-color: var(--blue-600); }
.class-row__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--blue-600);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.class-row__main { flex: 1; min-width: 170px; }
.class-row__name { margin: 0; font-size: 16.5px; font-weight: 600; }
.class-row__meta { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.class-row__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--current {
  background: var(--blue-600);
  color: var(--text-on-brand);
}
.badge--warn {
  background: var(--yellow-500);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   学生名单（可拖拽）
   -------------------------------------------------------------------------- */

.roster { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }

.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.roster-row.is-dragging { opacity: .4; }
.roster-row.is-drop-target { border-color: var(--blue-600); border-style: dashed; }
.roster-row.is-duplicate { border-left: 4px solid var(--yellow-500); }

.roster-row__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  font-size: 15px;
  flex-shrink: 0;
}
.roster-row__handle:hover { background: var(--bg); color: var(--text); }
.roster-row__no {
  width: 30px;
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.roster-row__name {
  flex: 1;
  min-width: 80px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.roster-row__name:hover { border-color: var(--border); }
.roster-row__name:focus { border-color: var(--blue-600); background: var(--surface); }

.roster-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.roster-count { font-size: 14px; color: var(--text-muted); }
.roster-count strong { color: var(--text); font-size: 16px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
  width: min(560px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* 图标 + 文案双通道，不靠颜色单一维度（文档第 18 章） */
.toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast--info    .toast__icon { background: var(--blue-600);  color: var(--text-on-brand); }
.toast--success .toast__icon { background: var(--success);   color: var(--text-on-accent); }
.toast--error   .toast__icon { background: var(--danger-strong); color: var(--text-on-danger); }
.toast--error { border-color: var(--danger); }

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 21, 32, .55);
  animation: fade-in .15s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }

.dialog {
  width: min(520px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 26px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.dialog__title { margin: 0 0 12px; font-size: 19px; }
.dialog__body { color: var(--text); font-size: 14.5px; line-height: 1.7; }
.dialog__body p { margin: 0 0 10px; }
.dialog__body ul { margin: 10px 0; padding-left: 20px; }
.dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   班级切换器
   -------------------------------------------------------------------------- */

.switcher { display: flex; flex-direction: column; gap: 8px; }
.switcher__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap-min);
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.switcher__item:hover { border-color: var(--blue-600); }
.switcher__item.is-current { border-color: var(--blue-600); background: var(--bg); }
.switcher__name { flex: 1; font-weight: 600; }
.switcher__meta { font-size: 13px; color: var(--text-muted); }

/* Header 里的当前班级按钮 */
.class-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.class-chip:hover { border-color: var(--blue-600); }
.class-chip__label { color: var(--text-muted); font-size: 13px; }
.class-chip__name { font-weight: 600; }
.class-chip__count { color: var(--text-muted); font-size: 13px; }
.class-chip--empty { color: var(--blue-600); font-weight: 500; }

@media (max-width: 720px) {
  .class-chip__label { display: none; }
}

/* --------------------------------------------------------------------------
   EmptyState
   -------------------------------------------------------------------------- */

.empty {
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
}
.empty__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.empty__desc {
  margin: 0 auto 20px;
  max-width: 460px;
  color: var(--text-muted);
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   通知条
   -------------------------------------------------------------------------- */

.notice--compact {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   当前班级卡片（首页）
   -------------------------------------------------------------------------- */

.current-class {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.current-class__label { margin: 0; font-size: 13px; color: var(--text-muted); }
.current-class__name { margin: 2px 0 0; font-size: 26px; font-weight: 700; color: var(--blue-600); }
.current-class__count { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.current-class__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   数据统计行（设置页）
   -------------------------------------------------------------------------- */

.stat-list { margin: 0; padding: 0; list-style: none; }
.stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.stat-list li:last-child { border-bottom: 0; }
.stat-list__value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 隐藏但可被读屏访问的文件输入 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   减少动态效果（设置页手动开关，覆盖系统偏好）
   -------------------------------------------------------------------------- */

[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* ==========================================================================
   工具大厅 / 下载中心
   ========================================================================== */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 26px;
}
.toolbar__search { flex: 1 1 320px; margin: 0; }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-chip {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--blue-600); color: var(--blue-600); }
.filter-chip.is-on {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--text-on-brand);
  font-weight: 600;
}

.tool-section { margin-bottom: 22px; }
.tool-section__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 17px;
}
.tool-section__count { color: var(--text-muted); font-size: 13px; font-weight: 400; }

/* 一排 6 个：15 个工具正好分成 6 / 6 / 3 三类，每类各占一行，一屏看全。
   这里用固定列数而不是 auto-fill —— auto-fill 只保证「不小于某个宽度」，
   1440px 下会排成 8 列，反而更零碎。 */
.tool-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px)  { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px)  { .tool-grid { grid-template-columns: repeat(4, 1fr); } }
/* 6 列的门槛卡在 1200px：再窄的话「课堂小测验生成器」这种最长的名字
   会折行，整行卡片跟着变高，反而不齐。1200px 也正好是 --page-pad
   切到 56px 的断点。 */
@media (min-width: 1200px) { .tool-grid { grid-template-columns: repeat(6, 1fr); } }

.tool-card {
  position: relative;
  border: 1px solid var(--border);
  /* 分类色移到左边框：紧凑卡片没有「开始使用 →」那行来承载颜色了。
     仍不是唯一区分手段 —— 分类标题写着字。 */
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.tool-card:hover { border-color: var(--blue-600); transform: translateY(-2px); }

.tool-card__link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px 12px;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.tool-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 22px;          /* 给右上角的星标让位 */
}
.tool-card__icon { font-size: 17px; line-height: 1; flex-shrink: 0; }
.tool-card__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tool-card__desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  /* 简介长短不一：短的补到两行高、长的截到两行，
     这样每张卡一样高，三行网格才对得齐 —— 这一页的意义就是一眼扫全。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;             /* 12px × 1.5 × 2 行 */
}

/* 三类用不同强调色，但不作为唯一区分手段（分类标题也写着） */
.tool-card--teaching { border-left-color: var(--success); }
.tool-card--teaching:hover { border-color: var(--success); }
.tool-card--content { border-left-color: var(--yellow-500); }
.tool-card--content:hover { border-color: var(--yellow-500); }

.tool-card__star {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* 看得见的是 26px 的小星标，但点击区域按文档 18 章补足到 44×44
   —— 教室触屏一体机上手指点不准 26px。用伪元素扩，不影响布局，
   也不会把 hover 的圆形底色撑大。
   （原来是 34px，本来就不达标；卡片变紧凑后更得补。） */
.tool-card__star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tap-min);
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

.tool-card__star:hover { background: var(--bg); }
.tool-card__star.is-on { color: var(--yellow-500); }

/* 下载中心 */
.download-list { display: flex; flex-direction: column; gap: 10px; }
.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
}
.download-row__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.download-row__main { flex: 1; min-width: 190px; }
.download-row__name {
  margin: 0; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.download-row__desc { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
.download-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 关于页 / 隐私页 */
.about-list { margin: 10px 0 18px; padding-left: 22px; }
.about-list li { margin: 6px 0; line-height: 1.7; }

/* 新版本提示条（文档 15.3） */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transform: translateX(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--blue-600);
  border-radius: var(--radius-control);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font-size: 14.5px;
  max-width: calc(100vw - 32px);
}

/* ==========================================================================
   首页工具入口（文档第 6 章）
   ========================================================================== */

.home-section { margin-top: 34px; }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.home-section__title { margin: 0; font-size: 19px; }
.home-section__more { font-size: 14px; text-decoration: none; }
.home-section__more:hover { text-decoration: underline; }

.home-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
}

.home-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.home-tool:hover { border-color: var(--blue-600); transform: translateY(-2px); }

.home-tool__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.home-tool__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.home-tool__name { font-size: 16px; font-weight: 600; }
.home-tool__desc { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.home-tool__go { color: var(--blue-600); font-size: 13.5px; font-weight: 600; margin-top: 4px; }

/* 三类各有强调色，但分类标题本身也写着，不靠颜色单独区分 */
.home-tool--teaching .home-tool__no { color: var(--success-text); }
.home-tool--teaching .home-tool__go { color: var(--success-text); }
.home-tool--teaching:hover { border-color: var(--success); }
.home-tool--content .home-tool__no { color: var(--text); }
.home-tool--content .home-tool__go { color: var(--text); }
.home-tool--content:hover { border-color: var(--yellow-500); }