/* ============================================================
 * Page-specific — 首页 / 课程页 / 详情页 / 提交页 / 家长页
 * ============================================================ */

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center;
  padding: var(--sp-9) 0 var(--sp-8);
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 229, 255, 0.18) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(177, 75, 255, 0.15) 0%, transparent 30%);
  filter: blur(40px);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-tag {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cyan);
  padding: 6px 14px;
  border: 1px solid var(--c-line-soft);
  background: var(--c-cyan-soft);
  border-radius: 999px;
}
.hero-tag::before {
  content: ""; width: 6px; height: 6px;
  background: var(--c-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-cyan);
  animation: pulse 2s ease-in-out infinite;
}
.hero h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: var(--sp-4);
}
.hero h1 .accent { color: var(--c-cyan); }
.hero h1 .violet { color: var(--c-violet); }
.hero .sub {
  font-size: var(--fs-md);
  color: var(--c-text-1);
  max-width: 620px;
  margin-bottom: var(--sp-6);
  line-height: 1.7;
}
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero-marquee {
  margin-top: var(--sp-8);
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-2);
  display: flex; gap: var(--sp-5); align-items: center;
  flex-wrap: wrap;
}
.hero-marquee .pulse { color: var(--c-green); }

/* 右侧装饰几何 */
.hero-art {
  position: absolute;
  right: -2%; top: 50%; transform: translateY(-50%);
  width: 540px; height: 540px;
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}
@media (max-width: 1280px) { .hero-art { width: 400px; height: 400px; right: -10%; } }
@media (max-width: 900px)  { .hero-art { display: none; } }

/* 旋转环 */
.ring {
  position: absolute; inset: 0;
  border: 1px solid var(--c-line-soft);
  border-radius: 50%;
}
.ring--1 { animation: spin 30s linear infinite; }
.ring--2 {
  inset: 12%;
  border-color: rgba(177, 75, 255, 0.25);
  animation: spin-rev 24s linear infinite;
}
.ring--3 {
  inset: 24%;
  border-color: rgba(0, 229, 255, 0.35);
  border-style: dashed;
  animation: spin 18s linear infinite;
}
.ring-core {
  position: absolute; inset: 38%;
  background: radial-gradient(circle, var(--c-cyan) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(12px);
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---------- 数据条 ---------- */
.data-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-7) 0;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.data-item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  position: relative;
}
.data-item + .data-item::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--c-line);
}
.data-item .label {
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.data-item .value {
  font-family: var(--f-num);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text-0);
  letter-spacing: -0.03em;
}
.data-item .value .unit {
  font-size: 0.4em;
  color: var(--c-cyan);
  margin-left: 4px;
}
.data-item .desc {
  font-size: 19px;
  color: var(--c-text-1);
}
@media (max-width: 768px) {
  .data-strip { grid-template-columns: 1fr; }
  .data-item + .data-item::before { left: 10%; right: 10%; top: 0; bottom: auto; height: 1px; width: auto; }
}

/* ---------- 课程亮点卡片（三栏）---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

.feature {
  padding: var(--sp-6) var(--sp-5);
  position: relative;
  background: linear-gradient(180deg, rgba(17, 22, 42, 0.5) 0%, rgba(11, 14, 26, 0.8) 100%);
  border: 1px solid var(--c-line);
  transition: all var(--t-base);
  overflow: hidden;
}
.feature::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cat-c) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.feature:hover { transform: translateY(-4px); border-color: var(--c-line-soft); }
.feature:hover::before { opacity: 1; }
.feature .ic {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--cat-c);
  color: var(--cat-c);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: var(--sp-4);
  position: relative;
  background: color-mix(in srgb, var(--cat-c) 8%, transparent);
}
.feature .ic::after {
  content: "";
  position: absolute; top: -4px; right: -4px;
  width: 6px; height: 6px;
  background: var(--cat-c);
  box-shadow: 0 0 8px var(--cat-c);
}
.feature h3 {
  font-size: 20px;
  margin-bottom: var(--sp-2);
  color: var(--c-text-0);
}
.feature p { color: var(--c-text-1); font-size: 20px; margin-bottom: var(--sp-4); line-height: 1.6; }
.feature .stat {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--c-text-2);
  letter-spacing: 0.1em;
}
.feature .stat strong {
  font-family: var(--f-num);
  font-size: 24px;
  color: var(--cat-c);
  font-weight: 700;
}

/* ---------- 课程总览页：网格 ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .course-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * 10 天夏令营专属组件
 * ============================================================ */

/* ---------- 今日任务 Banner ---------- */
.today-banner {
  position: relative;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) auto var(--sp-5);
  max-width: var(--container);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(177, 75, 255, 0.06) 100%);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-cyan);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all var(--t-base);
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: calc(100% - var(--sp-5) * 2);
}
.today-banner:hover {
  border-color: var(--c-line-soft);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12) 0%, rgba(177, 75, 255, 0.08) 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.today-banner[data-status="pre"] { border-left-color: var(--c-text-2); }
.today-banner[data-status="ended"] { border-left-color: var(--c-yellow); }
.today-banner[data-today-done="1"] { border-left-color: var(--c-green); }

.today-banner .tb-side {
  position: relative;
  width: 6px;
  height: 56px;
  display: grid;
  place-items: center;
}
.today-banner .tb-pulse {
  width: 12px; height: 12px;
  background: var(--c-pink);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-pink);
  animation: pulse 1.5s ease-in-out infinite;
}
.today-banner[data-today-done="1"] .tb-pulse {
  background: var(--c-green);
  box-shadow: 0 0 12px var(--c-green);
  animation: none;
}
.today-banner[data-status="pre"] .tb-pulse,
.today-banner[data-status="ended"] .tb-pulse {
  background: var(--c-text-mute);
  box-shadow: none;
  animation: none;
}

.today-banner .tb-main { min-width: 0; }
.today-banner .tb-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: 6px;
}
.today-banner .tb-tag {
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--c-cyan);
  text-transform: uppercase;
}
.today-banner[data-status="pre"] .tb-tag { color: var(--c-text-2); }
.today-banner[data-status="ended"] .tb-tag { color: var(--c-yellow); }
.today-banner .tb-reminder {
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--c-pink);
  padding: 2px 8px;
  border: 1px solid var(--c-pink);
  background: rgba(255, 61, 110, 0.08);
}
.today-banner .tb-reminder.tb-ok {
  color: var(--c-green);
  border-color: var(--c-green);
  background: rgba(77, 224, 168, 0.08);
}
.today-banner .tb-title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-text-0);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-banner .tb-sub {
  font-size: 19px;
  color: var(--c-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-banner .tb-cta { flex-shrink: 0; }

@media (max-width: 900px) {
  .today-banner { grid-template-columns: 6px 1fr auto; padding: var(--sp-4); }
  .today-banner .tb-cta { display: inline-flex; padding: 8px 14px; font-size: 16px; }
  .today-banner .tb-title { font-size: 18px; white-space: normal; }
  .today-banner .tb-sub { display: none; }
}

/* ---------- 仪表盘 4 列 ---------- */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.dash-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: all var(--t-base);
}
.dash-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-cyan) 50%, transparent 100%);
}
.dash-card:hover { border-color: var(--c-line-soft); }
.dash-label {
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.2em;
  color: var(--c-text-2);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.dash-value {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: var(--sp-2);
}
.dash-value .num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 40px;
  color: var(--c-cyan);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}
.dash-value .dash-unit {
  font-family: var(--f-mono);
  font-size: 19px;
  color: var(--c-text-2);
  letter-spacing: 0.08em;
}
.dash-desc {
  font-size: 19px;
  color: var(--c-text-1);
  line-height: 1.5;
}
@media (max-width: 900px) { .dashboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .dashboard { grid-template-columns: 1fr; } }

/* ---------- 10 格进度条 ---------- */
.ten-bar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin-bottom: var(--sp-3);
}
.ten-bar-mini {
  gap: 4px;
  margin-bottom: 0;
}
.ten-bar-mini .tb-cell { padding: 6px 4px; }
.ten-bar-mini .tb-cell-num { font-size: 16px; }
.ten-bar-mini .tb-cell-tick { font-size: 18px; }

.tb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) 6px;
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-text-2);
  font-family: var(--f-mono);
  transition: all var(--t-base);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.tb-cell:hover {
  background: var(--c-bg-2);
  color: var(--c-text-0);
  border-color: var(--c-line-soft);
  transform: translateY(-2px);
}
.tb-cell.is-done {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0.08) 100%);
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.15);
}
.tb-cell.is-done .tb-cell-tick { color: var(--c-cyan); text-shadow: 0 0 8px var(--c-cyan); }
.tb-cell.is-current {
  background: linear-gradient(135deg, rgba(177, 75, 255, 0.18) 0%, rgba(177, 75, 255, 0.08) 100%);
  border-color: var(--c-violet);
  color: var(--c-violet);
  animation: glow-pulse 2.5s ease-in-out infinite;
}
.tb-cell.is-current .tb-cell-tick { color: var(--c-violet); text-shadow: 0 0 8px var(--c-violet); }
.tb-cell-num {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.tb-cell-tick {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(177, 75, 255, 0); }
  50% { box-shadow: 0 0 16px rgba(177, 75, 255, 0.35); }
}
.ten-legend {
  display: flex; gap: var(--sp-4);
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--c-text-2);
  text-transform: uppercase;
}
.legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.legend-done { background: var(--c-cyan); box-shadow: 0 0 8px var(--c-cyan); }
.legend-current { background: var(--c-violet); box-shadow: 0 0 8px var(--c-violet); }
.legend-todo { background: var(--c-line); }

@media (max-width: 900px) {
  .ten-bar { grid-template-columns: repeat(5, 1fr); }
  .ten-bar-mini { grid-template-columns: repeat(10, 1fr); }
}

/* ---------- 导航 day-tag ---------- */
.day-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--c-violet);
  color: var(--c-bg-0);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
}

/* ---------- 日程页：Day 卡片 ---------- */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 1100px) { .schedule-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .schedule-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .schedule-grid { grid-template-columns: 1fr; } }

.day-card {
  position: relative;
  display: block;
  padding: var(--sp-4);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
  overflow: hidden;
}
.day-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.day-card:hover { transform: translateY(-3px); border-color: var(--c-line-soft); }
.day-card:hover::before { transform: scaleX(1); }
.day-card.is-done::before { background: var(--c-cyan); transform: scaleX(1); }
.day-card.is-current { border-color: var(--c-violet); }
.day-card.is-current::before { background: var(--c-violet); transform: scaleX(1); }
.day-card.is-past { opacity: 0.7; }
.day-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-3);
}
.day-num {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-cyan);
  letter-spacing: 0.04em;
}
.day-card.is-current .day-num { color: var(--c-violet); }
.day-card.is-done .day-num { color: var(--c-cyan); }
.day-card h3 {
  font-size: 19px;
  color: var(--c-text-0);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}
.day-theme {
  font-size: 18px;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.day-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.06em;
}
.day-diff { color: var(--c-yellow); letter-spacing: 1px; }
.day-now {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--c-violet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 附加题卡片（首页） ---------- */
.extras-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .extras-grid { grid-template-columns: 1fr; } }
.extra-card {
  position: relative;
  display: block;
  padding: var(--sp-4);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
  overflow: hidden;
}
.extra-card::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--c-cyan);
}
.extra-card[data-cat="image"]::before { background: var(--c-violet); }
.extra-card[data-cat="video"]::before { background: var(--c-yellow); }
.extra-card:hover { transform: translateY(-3px); border-color: var(--c-line-soft); }
.ex-no {
  display: inline-block;
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.ex-badge {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 2px 6px;
  background: var(--c-cyan-soft);
  color: var(--c-cyan);
  letter-spacing: 0.1em;
}
.extra-card[data-cat="image"] .ex-badge { color: var(--c-violet); background: rgba(177, 75, 255, 0.08); }
.extra-card[data-cat="video"] .ex-badge { color: var(--c-yellow); background: rgba(248, 225, 108, 0.08); }
.extra-card h4 {
  font-size: 21px;
  color: var(--c-text-0);
  margin: 0 0 6px;
  line-height: 1.3;
}
.extra-card p {
  font-size: 19px;
  color: var(--c-text-1);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Day 详情：5 道题列表 ---------- */
.day-tasks-list {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.task-card {
  position: relative;
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  padding: var(--sp-5);
  transition: all var(--t-base);
}
.task-card:hover { border-color: var(--c-line-soft); }
.task-card::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--c-cyan);
}
.task-card[data-cat="image"]::before { background: var(--c-violet); }
.task-card[data-cat="video"]::before { background: var(--c-yellow); }
.task-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.task-no-badge { display: flex; align-items: center; gap: var(--sp-3); }
.task-no {
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-cyan);
  padding: 4px 10px;
  background: var(--c-cyan-soft);
  border: 1px solid var(--c-line-soft);
  letter-spacing: 0.04em;
}
.task-card[data-cat="image"] .task-no { color: var(--c-violet); background: rgba(177, 75, 255, 0.08); }
.task-card[data-cat="video"] .task-no { color: var(--c-yellow); background: rgba(248, 225, 108, 0.08); }
.task-meta {
  font-family: var(--f-mono);
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.task-card-title {
  font-size: 20px;
  color: var(--c-text-0);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}
.task-card-brief {
  font-size: 20px;
  color: var(--c-text-1);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
}
.task-card-details {
  border-top: 1px dashed var(--c-line);
  padding-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.task-card-details summary {
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cyan);
  list-style: none;
  padding: 4px 0;
}
.task-card-details summary::-webkit-details-marker { display: none; }
.task-card-details summary::before { content: "▸ "; }
.task-card-details[open] summary::before { content: "▾ "; }
.task-content {
  font-size: 20px;
  line-height: 1.85;
  color: var(--c-text-0);
  margin: var(--sp-3) 0;
}
.task-content h4 { font-size: 16px; margin: var(--sp-4) 0 var(--sp-2); color: var(--c-text-0); }
.task-content p { margin: 0 0 var(--sp-3); }
.task-content blockquote {
  position: relative;
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-0);
  border-left: 3px solid var(--c-violet);
  color: var(--c-text-1);
  font-size: 18px;
  line-height: 1.7;
}
.task-card-actions {
  display: flex; gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}

/* ---------- 家长页：筛选器 ---------- */
.filter-bar {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
}
.filter-btn {
  font-family: var(--f-mono);
  font-size: 17px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-text-1);
  cursor: pointer;
  transition: all var(--t-fast);
  border-radius: var(--r-xs);
}
.filter-btn:hover { color: var(--c-cyan); border-color: var(--c-cyan); background: var(--c-cyan-soft); }
.filter-btn.active {
  color: var(--c-bg-0);
  background: var(--c-cyan);
  border-color: var(--c-cyan);
}

/* ---------- 题目详情页 ---------- */
.detail-head {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-6);
}
.crumbs {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--c-text-2);
  margin-bottom: var(--sp-4);
}
.crumbs a { color: var(--c-text-1); }
.crumbs a:hover { color: var(--c-cyan); }
.crumbs .sep { color: var(--c-text-mute); }

.detail-title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
  color: var(--c-text-0);
  line-height: 1.1;
}
.detail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--c-text-2);
  letter-spacing: 0.1em;
}
.detail-meta .diff { color: var(--c-yellow); letter-spacing: 3px; }
.detail-meta .dot { color: var(--c-text-mute); }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 1000px) {
  .detail-layout { grid-template-columns: 1fr; }
}

.detail-content {
  font-size: 19px;
  line-height: 1.85;
  color: var(--c-text-0);
}
.detail-content h3 {
  font-size: 19px;
  margin: var(--sp-6) 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--c-text-0);
}
.detail-content h3::before {
  content: "▍";
  color: var(--c-cyan);
  font-size: 1.1em;
}
.detail-content blockquote {
  position: relative;
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-1);
  border-left: 3px solid var(--c-violet);
  color: var(--c-text-1);
  font-style: normal;
  font-size: 18px;
  line-height: 1.75;
}
.detail-content blockquote::before {
  content: "EXAMPLE";
  position: absolute; top: -8px; left: 16px;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--c-violet);
  background: var(--c-bg-0);
  padding: 0 6px;
}
.detail-content ol, .detail-content ul {
  padding-left: var(--sp-5);
  margin: var(--sp-3) 0;
}
.detail-content li { margin-bottom: var(--sp-2); }

.detail-tips {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-cyan-soft);
  border: 1px solid var(--c-line-soft);
  position: relative;
}
.detail-tips::before {
  content: "PROMPT TIPS";
  position: absolute; top: -10px; left: var(--sp-4);
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--c-cyan);
  background: var(--c-bg-0);
  padding: 0 8px;
}
.detail-tips code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-text-0);
}

/* 侧边栏：操作卡 */
.action-card {
  position: sticky; top: calc(var(--nav-h) + var(--sp-5));
  padding: var(--sp-5);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line-soft);
}
.action-card .label { margin-bottom: var(--sp-3); }
.action-card h4 { font-size: 17px; margin-bottom: var(--sp-2); color: var(--c-text-0); }
.action-card p { color: var(--c-text-1); font-size: 19px; margin-bottom: var(--sp-4); }
.action-card .btn { width: 100%; justify-content: center; margin-bottom: var(--sp-3); }
.action-card .quick {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.1em;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.action-card .quick a { color: var(--c-text-1); }
.action-card .quick a:hover { color: var(--c-cyan); }

/* 邻题导航 */
.adjacent {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.adj-card {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  background: var(--c-bg-1);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-fast);
}
.adj-card:hover { border-color: var(--c-cyan); background: var(--c-cyan-soft); }
.adj-card.next { text-align: right; }
.adj-card .t {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: 4px;
}
.adj-card .ttl { font-size: 20px; color: var(--c-text-0); }

/* ---------- 提交页 ---------- */
.submit-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-7) 0 var(--sp-8);
}
.submit-card {
  background: var(--c-bg-1);
  border: 1px solid var(--c-line-soft);
  padding: var(--sp-6);
  position: relative;
}
.submit-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-cyan) 50%, transparent 100%);
}
.submit-card h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.submit-card .meta { color: var(--c-text-1); margin-bottom: var(--sp-5); }

/* ---------- 家长聚合页 ---------- */
.parent-hero {
  padding: var(--sp-7) 0 var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-6);
}
.parent-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: linear-gradient(135deg, var(--c-bg-1) 0%, rgba(11, 14, 26, 0.6) 100%);
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.parent-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.parent-avatar {
  width: 80px; height: 80px;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--c-bg-0);
  background: var(--g-cyan);
  border: 1px solid var(--c-cyan);
  box-shadow: var(--glow-cyan);
  position: relative;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.parent-info h2 { font-size: 28px; margin-bottom: 4px; }
.parent-info .sub {
  display: flex; gap: var(--sp-4);
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--c-text-1);
  letter-spacing: 0.06em;
}
.parent-info .sub strong { color: var(--c-cyan); font-weight: 600; }
.parent-stat { text-align: right; }
.parent-stat .v {
  font-family: var(--f-num);
  font-size: 40px;
  font-weight: 700;
  color: var(--c-yellow);
  line-height: 1;
  text-shadow: var(--glow-yellow);
}
.parent-stat .l {
  font-family: var(--f-mono);
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .parent-card { grid-template-columns: 64px 1fr; }
  .parent-stat { grid-column: 1 / -1; text-align: left; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
  .parent-avatar { width: 64px; height: 64px; font-size: 24px; }
}

/* 学生列表 */
.student-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 1000px) { .student-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .student-grid { grid-template-columns: 1fr; } }
.student-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-5);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  position: relative;
  transition: all var(--t-base);
  overflow: hidden;
}
.student-tile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--g-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.student-tile:hover { transform: translateY(-4px); border-color: var(--c-line-soft); }
.student-tile:hover::before { transform: scaleX(1); }
.student-tile .av {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-bg-0);
  background: var(--g-cyan);
  margin-bottom: var(--sp-4);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.student-tile .nm { font-size: 18px; color: var(--c-text-0); margin-bottom: 4px; }
.student-tile .cl { font-family: var(--f-mono); font-size: 18px; color: var(--c-text-2); letter-spacing: 0.08em; }
.student-tile .ct {
  display: flex; gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--c-text-1);
  letter-spacing: 0.08em;
}
.student-tile .ct strong { color: var(--c-cyan); font-weight: 600; }

/* 作品瀑布 */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .work-grid { grid-template-columns: 1fr; } }

.work-card {
  display: flex; flex-direction: column;
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  position: relative;
  transition: all var(--t-base);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.work-card:hover { transform: translateY(-3px); border-color: var(--c-line-soft); }
.work-cover {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--c-bg-2) 0%, var(--c-bg-1) 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.work-cover::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cat-c) 16%, transparent) 0%, transparent 60%);
}
.work-cover .glyph {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 700;
  color: var(--cat-c);
  opacity: 0.4;
  text-shadow: 0 0 24px color-mix(in srgb, var(--cat-c) 60%, transparent);
}
.work-cover .badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.work-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.work-body h4 { font-size: 21px; color: var(--c-text-0); margin-bottom: 4px; line-height: 1.4; }
.work-body .brief {
  font-size: 19px; color: var(--c-text-1);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  line-height: 1.6;
}
.work-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 17px;
  color: var(--c-text-2);
  letter-spacing: 0.06em;
}
.work-foot .date { color: var(--c-cyan); }

/* 作品详情抽屉 */
.drawer {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(5, 6, 11, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-6);
}
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer-inner {
  max-width: 800px;
  margin: 0 auto;
}
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-text-1);
  cursor: pointer;
  transition: all var(--t-fast);
}
.drawer-close:hover { color: var(--c-cyan); border-color: var(--c-cyan); }

/* ---------- 表单提示条 ---------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-yellow);
  margin-bottom: var(--sp-5);
  font-size: 19px;
  color: var(--c-text-1);
}
.notice .ic { color: var(--c-yellow); flex-shrink: 0; }