/* 燕赵科普游统一品牌主题：阵地版强调现场互动、任务与成长档案。 */
:root {
  --brand-50: #E6F4FF;
  --brand-100: #CCE8FF;
  --brand-200: #99D1FF;
  --brand-400: #33A3FF;
  --brand-600: #0078D4;
  --brand-800: #003D8F;
  --tech-cyan: #00D4FF;
  --academic-gold: #C9A227;
  --champagne: #E8D5A3;
  --error: #E85D4E;
  --ink: #1A1F36;
  --muted: #4B5563;
  --teal: #0078D4;
  --mint: #E6F4FF;
  --sand: #FFF8E1;
  --coral: #E85D4E;
  --line: #E5E7EB;
  --shadow: 0 8px 24px rgba(0, 120, 212, .15);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 4%, rgba(0, 212, 255, .12), transparent 27%),
    linear-gradient(180deg, #E6F4FF, #FFFFFF 42%, #F5F7FA);
}

.brand-mark,
button {
  background: linear-gradient(135deg, #003D8F, #0078D4 50%, #33A3FF);
  box-shadow: 0 8px 24px rgba(0, 120, 212, .18);
}

.eyebrow,
.status { color: var(--brand-600); }

.status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--tech-cyan);
  box-shadow: 0 0 0 4px rgba(0, 212, 255, .14);
}

.mode-notice {
  color: #6B5700;
  background: #FFF8E1;
  border-color: rgba(201, 162, 39, .38);
}

.card {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

input:focus,
select:focus {
  border-color: var(--tech-cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, .20), 0 0 12px rgba(0, 212, 255, .20);
}

button:hover { filter: brightness(1.06); }
.secondary { color: #005BA8; background: var(--brand-100); box-shadow: none; }
.score { color: var(--brand-800); }
.progress-bar { background: var(--brand-100); }
.progress-bar i { background: linear-gradient(135deg, #0078D4, #00D4FF); }
.badge { color: #6B5700; background: linear-gradient(180deg, #FFF8E1, #E8D5A3); }
.live-dot { color: #007A91; }
.live-dot::first-letter { color: var(--tech-cyan); }
.bubble.ai { color: var(--ink); background: var(--brand-50); }
.bubble.user { background: linear-gradient(135deg, #0078D4, #00D4FF); }

.task-card {
  background: linear-gradient(180deg, #FFF8E1, #FFFFFF);
  border-color: rgba(201, 162, 39, .38);
  box-shadow: inset 4px 0 0 var(--academic-gold);
}

.quick button {
  color: #005BA8;
  background: #FFFFFF;
  border-color: var(--brand-200);
  box-shadow: none;
}

.quick button:hover { color: var(--brand-800); border-color: var(--brand-400); background: var(--brand-50); }
.metric { background: var(--brand-50); border: 1px solid var(--brand-100); }
.metric strong { color: var(--brand-800); }
.evidence { background: #F5F7FA; border-color: var(--line); }

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 212, 255, .55);
  outline-offset: 2px;
}