/*
 * 醇语文统一视觉层 v1
 * 目标：克制、清楚、像教师工具；统一颜色、图标、圆角、卡片和长文本布局。
 * 该文件必须位于页面原有样式之后，以逐步收敛历史页面而不影响业务逻辑。
 */
:root {
  color-scheme: light;
  --brand-primary: #2f648f;
  --brand-primary-strong: #244e71;
  --brand-primary-soft: #edf4f9;
  --brand-canvas: #f4f6f8;
  --brand-surface: #ffffff;
  --brand-ink: #17212b;
  --brand-muted: #66737f;
  --brand-line: #dfe5ea;
  --brand-success: #2f7657;
  --brand-warning: #a86712;
  --brand-danger: #b54747;
  --brand-radius-sm: 10px;
  --brand-radius: 14px;
  --brand-radius-lg: 18px;
  --brand-shadow: 0 1px 2px rgba(23, 33, 43, .035), 0 8px 24px rgba(23, 33, 43, .055);

  /* 收拢历史变量，避免旧页面继续出现紫色、棕色和多套蓝色。 */
  --bg: var(--brand-canvas);
  --bg-elevated: var(--brand-surface);
  --card: var(--brand-surface);
  --card-solid: var(--brand-surface);
  --text: var(--brand-ink);
  --t1: var(--brand-ink);
  --text2: var(--brand-muted);
  --t2: var(--brand-muted);
  --text-secondary: var(--brand-muted);
  --bdr: var(--brand-line);
  --border: var(--brand-line);
  --sep: rgba(23, 33, 43, .10);
  --sep2: rgba(23, 33, 43, .16);
  --c1: var(--brand-primary);
  --c2: #7295b2;
  --c3: var(--brand-primary-soft);
  --c4: var(--brand-ink);
  --accent: var(--brand-primary);
  --accent-light: #7295b2;
  --accent-bg: rgba(47, 100, 143, .10);
  --accent-bg2: rgba(47, 100, 143, .16);
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-strong);
  --purple: var(--brand-primary);
  --blue: var(--brand-primary);
  --green: var(--brand-success);
  --success: var(--brand-success);
  --orange: var(--brand-warning);
  --warning: var(--brand-warning);
  --gold: var(--brand-warning);
  --red: var(--brand-danger);
  --danger: var(--brand-danger);
  --radius-sm: var(--brand-radius-sm);
  --radius: var(--brand-radius);
  --r-sm: var(--brand-radius-sm);
  --rs: var(--brand-radius-sm);
  --r: var(--brand-radius);
  --apple-blue: var(--brand-primary);
  --apple-blue-pressed: var(--brand-primary-strong);
  --apple-green: var(--brand-success);
  --apple-orange: var(--brand-warning);
  --apple-red: var(--brand-danger);
  --apple-indigo: var(--brand-primary);
  --apple-cyan: #5f8cab;
  --apple-bg: var(--brand-canvas);
  --apple-surface-solid: var(--brand-surface);
  --apple-label: var(--brand-ink);
  --apple-secondary: rgba(23, 33, 43, .66);
  --apple-tertiary: rgba(23, 33, 43, .42);
  --apple-separator: rgba(23, 33, 43, .12);
  --apple-focus: rgba(47, 100, 143, .18);
  --apple-radius-sm: var(--brand-radius-sm);
  --apple-radius: var(--brand-radius);
  --apple-radius-lg: var(--brand-radius-lg);
}

html, body {
  background: var(--brand-canvas) !important;
  color: var(--brand-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* 页头采用同一块安静的磨砂面，不再使用紫色/棕色渐变。 */
.header,
.nav-top,
body > header {
  background: rgba(244, 246, 248, .94) !important;
  color: var(--brand-ink) !important;
  border-bottom: 1px solid var(--brand-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.header h1,
.nav-top h1,
body > header .title { color: var(--brand-ink) !important; }
.header a,
.nav-top a,
body > header .back { color: var(--brand-primary) !important; }
.back-btn,
.header .back {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.btn-header {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
  border: 1px solid rgba(47, 100, 143, .14) !important;
}

/* 卡片和输入统一为低阴影、清晰边界。 */
.card,
.quick-card,
.hw-card,
.student-item,
.student-card,
.hw-item,
.agent-card,
.kpi,
.form-card {
  border-color: var(--brand-line) !important;
  border-radius: var(--brand-radius) !important;
  box-shadow: var(--brand-shadow) !important;
}
.card:active,
.hw-card:active,
.student-item:active,
.student-card:active,
.hw-item:active { transform: none !important; }

button,
.btn,
.button,
.primary-action {
  border-radius: var(--brand-radius-sm) !important;
  box-shadow: none !important;
}
.btn-primary,
.btn-blue,
.button,
.primary-action,
button[type="submit"] {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn-primary:active,
.btn-blue:active,
.button:active,
.primary-action:active { background: var(--brand-primary-strong) !important; }
.btn-green,
.btn-success { background: var(--brand-success) !important; color: #fff !important; }
.btn-purple,
.btn-correct { background: var(--brand-primary) !important; color: #fff !important; }
.btn-danger,
.btn-red { background: rgba(181, 71, 71, .10) !important; color: var(--brand-danger) !important; }
.btn-outline,
.btn-cancel,
.btn-archive {
  background: var(--brand-surface) !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--brand-line) !important;
}
input,
textarea,
select,
.field-input,
.field-select,
.form-input,
.form-select {
  background-color: #f8fafb !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--brand-radius-sm) !important;
}
input:focus,
textarea:focus,
select:focus,
.field-input:focus,
.field-select:focus,
.form-input:focus,
.form-select:focus {
  background-color: #fff !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 100, 143, .14) !important;
}

/* 单色线性 SVG 图标：统一 1.8px 线宽、圆角端点、固定占位。 */
.ui-icon,
.app-nav-icon {
  --ui-icon: var(--app-icon);
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  color: inherit;
  background-color: currentColor !important;
  -webkit-mask: var(--ui-icon) center / contain no-repeat !important;
  mask: var(--ui-icon) center / contain no-repeat !important;
  vertical-align: -.18em;
}
.icon-home { --ui-icon: url("../icons/home.svg?v=20260906"); --app-icon: url("../icons/home.svg?v=20260906"); }
.icon-homework { --ui-icon: url("../icons/homework.svg?v=20260906"); --app-icon: url("../icons/homework.svg?v=20260906"); }
.icon-grading { --ui-icon: url("../icons/grading.svg?v=20260906"); --app-icon: url("../icons/grading.svg?v=20260906"); }
.icon-report { --ui-icon: url("../icons/report.svg?v=20260906"); --app-icon: url("../icons/report.svg?v=20260906"); }
.icon-student { --ui-icon: url("../icons/student.svg?v=20260906"); --app-icon: url("../icons/student.svg?v=20260906"); }
.icon-settings { --ui-icon: url("../icons/settings.svg?v=20260906"); --app-icon: url("../icons/settings.svg?v=20260906"); }
.icon-analytics { --ui-icon: url("../icons/analytics.svg?v=20260906"); --app-icon: url("../icons/analytics.svg?v=20260906"); }
.icon-family { --ui-icon: url("../icons/family.svg?v=20260906"); --app-icon: url("../icons/family.svg?v=20260906"); }
.icon-classroom,
.icon-school { --ui-icon: url("../icons/classroom.svg?v=20260906"); --app-icon: url("../icons/classroom.svg?v=20260906"); }
.icon-assistant { --ui-icon: url("../icons/assistant.svg?v=20260906"); --app-icon: url("../icons/assistant.svg?v=20260906"); }
.icon-book { --ui-icon: url("../icons/book-open.svg?v=20260906"); }
.icon-scroll { --ui-icon: url("../icons/scroll.svg?v=20260906"); }
.icon-essay,
.icon-pen { --ui-icon: url("../icons/pen-line.svg?v=20260906"); }
.icon-mixed { --ui-icon: url("../icons/layers.svg?v=20260906"); }
.icon-inbox { --ui-icon: url("../icons/inbox.svg?v=20260906"); }
.icon-edit { --ui-icon: url("../icons/edit.svg?v=20260906"); }
.icon-send { --ui-icon: url("../icons/send.svg?v=20260906"); }
.icon-target { --ui-icon: url("../icons/target.svg?v=20260906"); }
.icon-calendar { --ui-icon: url("../icons/calendar.svg?v=20260906"); }
.icon-archive { --ui-icon: url("../icons/archive.svg?v=20260906"); }
.icon-check { --ui-icon: url("../icons/check-circle.svg?v=20260906"); }
.icon-search { --ui-icon: url("../icons/search.svg?v=20260906"); }
.icon-refresh { --ui-icon: url("../icons/refresh.svg?v=20260906"); }
.icon-image { --ui-icon: url("../icons/image.svg?v=20260906"); }
.icon-camera { --ui-icon: url("../icons/camera.svg?v=20260906"); }
.icon-upload { --ui-icon: url("../icons/upload.svg?v=20260906"); }
.icon-file { --ui-icon: url("../icons/file-text.svg?v=20260906"); }
.icon-warning { --ui-icon: url("../icons/warning.svg?v=20260906"); }
.icon-message { --ui-icon: url("../icons/message.svg?v=20260906"); }
.icon-download { --ui-icon: url("../icons/download.svg?v=20260906"); }
.icon-link { --ui-icon: url("../icons/link.svg?v=20260906"); }
.icon-clock { --ui-icon: url("../icons/clock.svg?v=20260906"); }
.icon-next { --ui-icon: url("../icons/chevron-right.svg?v=20260906"); }
.icon-success { color: var(--brand-success); }
.icon-warning-tone { color: var(--brand-warning); }
.icon-danger { color: var(--brand-danger); }

.icon-label,
.section-heading,
.card h2,
.card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-label .ui-icon,
.section-heading .ui-icon,
.card h2 .ui-icon,
.card h3 .ui-icon { color: var(--brand-primary); }

/* 首页模块：固定骨架，长短文案不再改变单个板块尺寸。 */
.quick-actions {
  align-items: stretch !important;
  grid-auto-rows: 1fr;
}
.quick-card {
  min-width: 0;
  min-height: 142px;
  display: grid !important;
  grid-template-rows: 38px 40px minmax(36px, 1fr);
  align-content: start;
  gap: 5px !important;
  padding: 18px !important;
  overflow: hidden;
  background: var(--brand-surface) !important;
}
.quick-card .icon,
.quick-card .app-nav-icon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  color: var(--brand-primary) !important;
  background-color: var(--brand-primary) !important;
}
.quick-card .label {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.quick-card .sub {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--brand-muted) !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 作业类型并列卡片保持等高；标题、说明都有独立槽位。 */
.grading-mode-grid { align-items: stretch; grid-auto-rows: 1fr; }
.grading-mode-card {
  min-height: 112px !important;
  display: grid !important;
  grid-template-rows: 38px minmax(36px, 1fr);
  align-content: start;
  gap: 6px;
  padding: 14px !important;
  background: #f8fafb !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--brand-radius) !important;
}
.grading-mode-card[aria-pressed="true"] {
  background: var(--brand-primary-soft) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 100, 143, .10) !important;
}
.grading-mode-name {
  display: flex !important;
  align-items: center;
  gap: 7px;
  line-height: 1.35 !important;
  min-height: 38px;
}
.grading-mode-name .ui-icon { width: 20px; height: 20px; color: var(--brand-primary); }
.grading-mode-desc {
  margin: 0 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 作业列表用稳定的信息区，不让长标题、主题和按钮把单卡任意撑大。 */
.homework-list { max-width: 980px; margin: 0 auto; }
.homework-list > .hw-card {
  min-height: 246px;
  display: flex;
  flex-direction: column;
  padding: 18px !important;
  overflow: visible;
}
.homework-list > .hw-card::before { width: 3px !important; background: var(--brand-primary) !important; }
.homework-list > .hw-card.status-ended::before { background: #9aa4ad !important; }
.homework-list > .hw-card .hw-card-top { min-height: 46px; padding-left: 6px !important; }
.homework-list > .hw-card .hw-title {
  font-size: 16px !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.homework-list > .hw-card .hw-topic {
  min-height: 39px;
  max-height: 39px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--brand-primary) !important;
}
.homework-list > .hw-card .hw-topic.is-empty { visibility: hidden; }
.homework-list > .hw-card .hw-card-middle {
  min-height: 58px;
  align-content: flex-start;
  gap: 6px !important;
}
.homework-list > .hw-card .hw-card-bottom { margin-top: auto !important; }
.homework-list > .hw-card .hw-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.homework-list > .hw-card .btn { min-height: 34px !important; padding: 6px 10px !important; font-size: 12px !important; }
.hw-tag { border-radius: 999px !important; padding: 4px 9px !important; }
.tag-date,
.tag-class,
.tag-type,
.tag-grading { background: #f0f3f6 !important; color: #52606d !important; }
.tag-status-active { background: rgba(47, 118, 87, .10) !important; color: var(--brand-success) !important; }
.tag-status-ended { background: #eef0f2 !important; color: #6f7880 !important; }
.tag-archived { background: rgba(168, 103, 18, .10) !important; color: var(--brand-warning) !important; }

/* 分析页不再另起一套米色或紫色视觉。 */
.hero-card,
.ai-analysis { background: var(--brand-primary-soft) !important; border-color: rgba(47, 100, 143, .16) !important; }
.timeline-item i,
.bar > i,
.progress-fill,
.fill { background: var(--brand-primary) !important; }
.pill.info,
.suggestion,
.codebox { background: var(--brand-primary-soft) !important; color: var(--brand-primary-strong) !important; }

/* 家长端和登录页与管理端同源，但保留更温和的留白。 */
body:has(#parentApp) .hero {
  background: var(--brand-primary) !important;
  box-shadow: 0 14px 34px rgba(47, 100, 143, .20) !important;
}
.form-card { padding: 26px !important; }
.submit-btn { background: var(--brand-primary) !important; box-shadow: none !important; }

@media (min-width: 768px) {
  .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .homework-list { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 520px) {
  .quick-card { min-height: 136px; padding: 15px !important; }
  .grading-mode-grid { grid-template-columns: 1fr 1fr !important; }
  .grading-mode-card { min-height: 116px !important; }
  .homework-list > .hw-card { min-height: 264px; }
  .homework-list > .hw-card .hw-card-bottom { align-items: flex-start !important; }
  .homework-list > .hw-card .hw-actions { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}