/* ============================================================
   青少年AI素养授课平台 · 课件平台 设计系统 v1.0
   清新明亮 · 蓝紫AI科技 · 简洁高端
   ============================================================ */

:root {
  /* ── 蓝紫AI科技主色系 ── */
  --c-primary: #6366F1;          /* 靛蓝 */
  --c-primary-deep: #4F46E5;
  --c-primary-soft: #EEF0FE;
  --c-violet: #8B5CF6;           /* 紫 */
  --c-violet-soft: #F3EFFE;
  --c-sky: #38BDF8;              /* 天蓝点缀 */
  --c-sky-soft: #E6F6FE;

  /* ── 功能色 ── */
  --c-ok: #10B981;               /* 成功/答对 清新绿 */
  --c-ok-deep: #0D9668;
  --c-ok-soft: #E4F9F0;
  --c-energy: #F59E0B;           /* 能量 暖橙 */
  --c-energy-soft: #FEF3E0;
  --c-pink: #EC4899;             /* 柔粉紫点缀 */
  --c-pink-soft: #FCE7F3;
  --c-danger: #EF4444;
  --c-danger-soft: #FEE2E2;

  /* ── 中性色 ── */
  --c-ink: #1E2440;
  --c-ink-2: #4B536E;
  --c-ink-soft: #7A8199;
  --c-line: #E3E7F2;
  --c-bg: #F5F7FD;
  --c-bg-deep: #ECEFFB;
  --c-white: #FFFFFF;

  /* ── 圆角 ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* ── 阴影 ── */
  --sh-1: 0 2px 10px rgba(30, 36, 64, .06);
  --sh-2: 0 10px 30px rgba(79, 70, 229, .10);
  --sh-3: 0 20px 50px rgba(30, 36, 64, .16);
  --sh-chunky: 0 4px 0 rgba(79, 70, 229, .85);       /* 触感按钮 */
  --sh-chunky-ok: 0 4px 0 #0D9668;
  --sh-chunky-energy: 0 4px 0 #D97706;

  /* ── 渐变 ── */
  --grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A78BFA 100%);
  --grad-sky: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
  --grad-warm: linear-gradient(135deg, #F59E0B 0%, #FB7185 100%);
  --grad-mint: linear-gradient(135deg, #34D399 0%, #38BDF8 100%);
  --grad-bg: radial-gradient(1100px 500px at 85% -10%, rgba(139, 92, 246, .10), transparent 60%),
              radial-gradient(900px 460px at -10% 110%, rgba(56, 189, 248, .10), transparent 60%),
              var(--c-bg);

  /* ── 字号（投影大屏） ── */
  --fs-hero: clamp(40px, 5.2vw, 64px);
  --fs-h1: clamp(30px, 3.6vw, 44px);
  --fs-h2: clamp(24px, 2.6vw, 34px);
  --fs-h3: clamp(20px, 2vw, 26px);
  --fs-body: clamp(17px, 1.45vw, 22px);
  --fs-note: clamp(14px, 1.1vw, 17px);

  /* ── 字体 ── */
  --font: "MiSans", "HarmonyOS Sans SC", "Source Han Sans SC", "PingFang SC",
          "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", var(--font);

  /* ── 动效 ── */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.4, 0, .2, 1);
  --dur: .28s;
}

/* ═══════════════ 基础 ═══════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--grad-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: rgba(99, 102, 241, .22); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9CEE8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #AEB5DD; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════ 按钮 ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px;
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .02em;
  border-radius: var(--r-md);
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--sh-chunky);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), filter var(--dur);
  user-select: none;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(79, 70, 229, .85); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ok   { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: var(--sh-chunky-ok); }
.btn-ok:active { box-shadow: 0 1px 0 #0D9668; }
.btn-energy { background: linear-gradient(135deg, #F59E0B, #FB923C); box-shadow: var(--sh-chunky-energy); }
.btn-energy:active { box-shadow: 0 1px 0 #D97706; }
.btn-ghost {
  background: var(--c-white); color: var(--c-primary-deep);
  box-shadow: 0 0 0 2px var(--c-line) inset, var(--sh-1);
}
.btn-ghost:hover { box-shadow: 0 0 0 2px var(--c-primary) inset, var(--sh-1); }
.btn-ghost:active { transform: translateY(2px); }
.btn-sm { padding: 9px 18px; font-size: var(--fs-note); border-radius: 10px; }
.btn-lg { padding: 18px 40px; font-size: calc(var(--fs-body) + 2px); border-radius: var(--r-lg); }
.btn-icon { width: 46px; height: 46px; padding: 0; border-radius: 12px; }
.btn-circle { width: 52px; height: 52px; padding: 0; border-radius: 50%; }

/* 图标按钮（幽灵） */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--c-ink-2); background: var(--c-white);
  border: 1.5px solid var(--c-line);
  transition: all var(--dur) var(--ease-spring);
}
.icon-btn:hover { transform: translateY(-2px); color: var(--c-primary); border-color: var(--c-primary); box-shadow: var(--sh-2); }
.icon-btn:active { transform: translateY(0); }
.icon-btn .ic { width: 22px; height: 22px; }

/* ═══════════════ 卡片 ═══════════════ */
.card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  border: 1.5px solid var(--c-line);
}
.card-hover { transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur); }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }

/* 渐变品牌卡 */
.card-brand {
  background: linear-gradient(140deg, #6366F1, #8B5CF6 60%, #A78BFA);
  color: #fff; border: none; box-shadow: var(--sh-2);
}

/* 玻璃卡 */
.glass {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: var(--sh-2);
  border-radius: var(--r-xl);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .94); }
}

/* ═══════════════ 标签/徽章 ═══════════════ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-note); font-weight: 700;
}
.tag-indigo { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.tag-violet { background: var(--c-violet-soft); color: var(--c-violet); }
.tag-sky    { background: var(--c-sky-soft); color: #0284C7; }
.tag-ok     { background: var(--c-ok-soft); color: var(--c-ok-deep); }
.tag-energy { background: var(--c-energy-soft); color: #D97706; }
.tag-pink   { background: var(--c-pink-soft); color: #DB2777; }

.badge-num {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-num); font-weight: 800; font-size: 14px;
}

/* ═══════════════ 进度条（胶囊） ═══════════════ */
.progress {
  position: relative; width: 100%; height: 16px;
  background: var(--c-bg-deep); border-radius: var(--r-pill);
  overflow: hidden;
}
.progress > i {
  position: absolute; top:0;right:0;bottom:0;left:0; right: auto;
  width: 0%; border-radius: var(--r-pill);
  background: var(--grad-brand);
  transition: width .6s var(--ease-out);
}
.progress > i::after {   /* 流动高光 */
  content: ""; position: absolute; top:0;right:0;bottom:0;left:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  background-size: 60px 100%; background-repeat: no-repeat;
  animation: shimmer 1.6s linear infinite;
}
.progress.ok > i { background: linear-gradient(90deg, #10B981, #34D399); }

/* ═══════════════ 输入框 ═══════════════ */
.input {
  width: 100%; padding: 12px 16px;
  font-size: var(--fs-note); font-family: inherit; color: var(--c-ink);
  background: var(--c-white);
  border: 2px solid var(--c-line); border-radius: var(--r-md);
  outline: none; transition: border-color var(--dur), box-shadow var(--dur);
}
.input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }

/* ═══════════════ 动画 ═══════════════ */
@keyframes shimmer { from { background-position: -60px 0; } to { background-position: 100% 0; } }

@keyframes float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-soft { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

@keyframes pop-in {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes rise-in {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake-x {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
@keyframes wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes breathe {
  0%,100% { box-shadow: 0 0 10px rgba(99, 102, 241, .35); }
  50% { box-shadow: 0 0 26px rgba(99, 102, 241, .75); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .4); }
  100% { box-shadow: 0 0 0 18px rgba(99, 102, 241, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce-soft {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.anim-pop { animation: pop-in .5s var(--ease-spring) both; }
.anim-rise { animation: rise-in .55s var(--ease-out) both; }
.anim-fade { animation: fade-in .4s ease both; }
.anim-float { animation: float-slow 5s ease-in-out infinite; }
.anim-shake { animation: shake-x .45s ease; }
.anim-breathe { animation: breathe 2.2s ease-in-out infinite; }
.anim-wiggle { animation: wiggle 1s ease-in-out infinite; }

/* 入场序列（用于页面元素依次浮现） */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* 进度圆环 */
.ring { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--c-bg-deep); stroke-width: 9; }
.ring-bar {
  fill: none; stroke: url(#ringGrad); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .5s var(--ease-out);
}

/* ═══════════════ 课间通用面板 ═══════════════ */
.panel-title {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-h2); font-weight: 800; letter-spacing: .01em;
}
.panel-title .bar { width: 8px; height: 34px; border-radius: 8px; background: var(--grad-brand); }
.panel-sub { color: var(--c-ink-soft); font-size: var(--fs-body); margin-top: 6px; }

/* 重点强调块 */
.callout {
  padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--c-primary-soft); border-left: 6px solid var(--c-primary);
  font-size: var(--fs-body); line-height: 1.75;
}
.callout.ok { background: var(--c-ok-soft); border-left-color: var(--c-ok); }
.callout.energy { background: var(--c-energy-soft); border-left-color: var(--c-energy); }
.callout.pink { background: var(--c-pink-soft); border-left-color: var(--c-pink); }
.callout.warn { background: var(--c-danger-soft); border-left-color: var(--c-danger); }
.callout b { color: var(--c-primary-deep); }
.callout.ok b { color: var(--c-ok-deep); }
.callout.energy b { color: #D97706; }

/* 列表 */
.ul-check { list-style: none; display: grid; gap: 12px; }
.ul-check li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--fs-body); line-height: 1.7;
}
.ul-check .tick {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--c-ok-soft); color: var(--c-ok-deep);
}
.ul-check .tick .ic { width: 15px; height: 15px; }
.ul-check li b { color: var(--c-ink); }

/* 数字步骤 */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 22px; background: var(--c-white); border: 1.5px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.step::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-num); font-weight: 800; font-size: 20px;
}
.step b { font-size: var(--fs-body); }
.step p { font-size: var(--fs-body); color: var(--c-ink-2); line-height: 1.7; }

/* 网格 */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* 隐藏 */
.hidden { display: none !important; }

/* ═══════════════ 无障碍 ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}