/* 学生平台的设计底座。
 *
 * token 全部沿用招生站 index.html 的 :root（--void / --grad / .bez 双层卡片 /
 * .btn 渐变描边），孩子和家长看到的应该是同一个产品，不是两个网站。
 *
 * 和招生站的两点不同：
 *  - 不引 Lenis。平滑滚动和代码编辑器抢滚动事件。
 *  - 动画克制：只在进场、状态变化、diff 展开上用，编辑区不做任何装饰动效。
 */

:root {
  /* 底色 */
  --void: #04050D;
  --ink: #070919;
  --surface: #0D1027;
  --surface-2: #121635;

  /* 描边 */
  --hair: rgba(255, 255, 255, .075);
  --hair-2: rgba(255, 255, 255, .13);
  --inner-lit: inset 0 1px 0 rgba(255, 255, 255, .09);

  /* 强调色 —— 从 flyer 提取 */
  --cyan: #22E6FF;
  --blue: #4B7BFF;
  --violet: #7B5CFF;
  --magenta: #E85BFF;
  --grad: linear-gradient(100deg, #22E6FF 0%, #4B7BFF 34%, #7B5CFF 62%, #E85BFF 100%);

  /* 文字 */
  --text: #EDF0FF;
  --muted: #8A91BE;
  --dim: #5A6089;

  /* 状态 */
  --ok: #3DDC97;
  --warn: #FFB86B;
  --err: #FF6B8A;

  /* 缓动 */
  --e: cubic-bezier(.22, 1, .36, 1);
  --e-fluid: cubic-bezier(.32, .72, 0, 1);

  --font: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 英文时把 Noto SC 摘掉，否则拉丁字母会掉进中文字面 */
html[data-lang="en"] {
  --font: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(15px, 1.02vw, 16px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(123, 92, 255, .4); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 排印 ─────────────────────────────────────────────────────────── */

.mono {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}

/* 这套 mono 微标（10px + 大字距 + 全大写）是为拉丁字母设计的。
 * 汉字本来就是等宽方块，再加 .24em 会被拉散成一个个孤字，很难读，
 * 而 text-transform 对中文又完全没作用。中文下把字距收回来。 */
html[data-lang="zh"] .mono,
html[data-lang="zh"] .field > .lbl,
html[data-lang="zh"] .eyebrow {
  letter-spacing: .1em;
  font-size: 10.5px;
}

.g {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  width: max-content;   /* 渐变按元素宽度铺开，窄一点才看得到完整色带 */
}

h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; }
html[data-lang="en"] h1 { font-weight: 600; letter-spacing: -.03em; }

.muted { color: var(--muted); font-weight: 300; }
.dim { color: var(--dim); }
.note { font-size: .86rem; color: var(--dim); line-height: 1.6; }

/* ── 品牌标记 ─────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: .58rem; font-size: .82rem; font-weight: 600; }
.brand .mk {
  width: 22px; height: 22px; flex: none;
  border-radius: 7px;
  background: var(--grad);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: #04050D;
  box-shadow: 0 0 18px -3px rgba(123, 92, 255, .9);
}

/* ── 双层卡片：核心原语 ───────────────────────────────────────────── */
/* 外框 7px 半透明，内层圆角 = 外层 - 7 */

.bez {
  position: relative;
  padding: 7px;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  border: 1px solid var(--hair);
}
.bez-in {
  position: relative;
  height: 100%;
  border-radius: 23px;
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--hair);
  box-shadow: var(--inner-lit);
  overflow: hidden;
}
.bez-in.pad { padding: clamp(1.5rem, 3vw, 2.4rem); }

/* ── 按钮 ─────────────────────────────────────────────────────────── */
/* 渐变做描边：::before 是渐变底，::after 是 inset 1px 的深色填充 */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .72rem 1.6rem;
  border-radius: 999px;
  border: 0;
  font-family: inherit; font-size: .94rem; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .45s var(--e-fluid), box-shadow .45s var(--e-fluid), opacity .2s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: var(--grad); background-size: 200% 100%;
  transition: background-position .9s var(--e-fluid);
}
.btn::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(150deg, #141834, #090C1E);
  transition: opacity .5s var(--e-fluid);
}
.btn:hover:not(:disabled)::before { background-position: 100% 0; }
.btn:hover:not(:disabled) { box-shadow: 0 14px 46px -14px rgba(123, 92, 255, .75); }
.btn:active:not(:disabled) { transform: scale(.978); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.solid::after { opacity: 0; }
.btn.solid { color: #05060F; font-weight: 600; }
.btn.ghost::before { background: var(--hair-2); }
.btn.wide { width: 100%; }

/* ── 表单 ─────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 1.15rem; }
.field > .lbl {
  display: block; margin-bottom: .5rem;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.field input {
  width: 100%;
  padding: .82rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hair-2);
  background: rgba(4, 5, 13, .55);
  color: var(--text);
  font-family: inherit;
  /* 16px 是为了挡掉 iOS Safari 聚焦时的自动放大 */
  font-size: 16px;
  transition: border-color .25s var(--e), box-shadow .25s var(--e);
}
.field input::placeholder { color: var(--dim); }
.field input:focus {
  outline: none;
  border-color: rgba(123, 92, 255, .8);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, .16);
}
.field input:disabled { opacity: .5; }

/* ── 提示条 ───────────────────────────────────────────────────────── */

.msg {
  display: none;
  margin: 0 0 1.15rem;
  padding: .7rem .95rem;
  border-radius: 12px;
  font-size: .88rem;
  line-height: 1.55;
  border: 1px solid transparent;
}
.msg.on { display: block; animation: msgIn .32s var(--e) both; }
.msg.err { color: var(--err); background: rgba(255, 107, 138, .09); border-color: rgba(255, 107, 138, .28); }
.msg.ok { color: var(--ok); background: rgba(61, 220, 151, .09); border-color: rgba(61, 220, 151, .28); }
.msg.info { color: var(--muted); background: rgba(123, 92, 255, .08); border-color: rgba(123, 92, 255, .25); }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

/* ── 语言切换 ─────────────────────────────────────────────────────── */

.lang {
  display: inline-flex; gap: 2px; padding: 2px;
  border-radius: 999px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .03);
}
.lang button {
  border: 0; cursor: pointer; padding: .28rem .6rem; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  background: transparent; color: var(--cyan);
  transition: background .25s var(--e), color .25s var(--e);
}
.lang button[aria-pressed="true"] { background: var(--text); color: #04050D; }

/* ── 装饰 ─────────────────────────────────────────────────────────── */

.orb {
  position: fixed; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0; opacity: .5;
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .038; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}