/* ===========================================================================
   夏三七 · 官网  sq.css   2026-10-23 重装修
   ---------------------------------------------------------------------------
   概念：「灯台与暗房」
     · 作品 / 学生作品 / 课程 = 灯台（看片台）：亮、干净，片子像印样一样摊开，每张带 X37 片号。
     · 修图轮椅 = 暗房：修图是在暗房里干的活，所以那一页是暗的（body.is-dark）。
     · 点缀色取自色卡（ColorChecker 那一排）—— 跟软件的「校色」是一回事。
   字体：OPPO Sans（用户定）。H 900 做大字，M 500 做小标题 / 按钮，R 400 做正文。
   用户 10-02 定过「亮色、要鲜明」，所以主站是亮的，颜色用高饱和，不用灰调「高级色」。
   ⚠ 没内容的模块由 sq.js 整块收掉（[data-need] + .is-empty），这里不写占位样式。
   =========================================================================== */

/* ------------------------------------------------------------------ 字体 */
/* @font-face 在 sq-fonts.css（tools/site-fonts/subset.py 生成，别手改）：
   每个字重两块 —— 「全站用到的字」小块（带 unicode-range，一般页面只下它）+ GB2312 一级汉字大块兜底。 */

/* ------------------------------------------------------------------ 变量 */
:root {
  color-scheme: light;
  --paper: #f4f3ee;          /* 看片台的底：偏暖的白 */
  --sheet: #ffffff;          /* 印样纸 */
  --ink: #111111;
  --ink-2: #4a4a48;
  --ink-3: #8a8a85;
  --line: rgba(17, 17, 17, .12);
  --line-2: rgba(17, 17, 17, .06);

  /* 色卡（高饱和）。每个栏目认一个色 */
  --c-works: #ff2d55;
  --c-students: #ff9500;
  --c-courses: #2d5bff;
  --c-tool: #a44fd4;
  --c-center: #00b86b;
  --c-yellow: #ffcc00;
  --c-cyan: #00b8f0;

  --accent: var(--c-works);
  --max: 1440px;
  --pad: clamp(18px, 4vw, 56px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "OPPO Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mosaic-dot: rgba(17, 17, 17, .16);
}

/* ⭐ 2026-10-23 深色模式（用户要「深色模式和浅色模式」）：<html data-theme="dark|light">。
   每个页面 <head> 里一行小脚本先定好（读 localStorage 'sq.theme'，没选过就跟系统），免得先闪一下白；
   顶栏右边的方块按钮切换（sq.js initTheme）。修图轮椅那页（body.is-dark）一直是暗的，不跟着切。 */
html[data-theme="dark"], body.is-dark {
  color-scheme: dark;
  --paper: #0c0c0e;
  --sheet: #151518;
  --ink: #f1efe9;
  --ink-2: #b9b7b0;
  --ink-3: #75736d;
  --line: rgba(241, 239, 233, .14);
  --line-2: rgba(241, 239, 233, .07);
  --mosaic-dot: rgba(241, 239, 233, .14);
}
body.is-dark { --accent: var(--c-tool); }
html[data-theme] body { transition: background-color .35s var(--ease), color .35s var(--ease); }

/* ------------------------------------------------------------------ 底子 */
*, *::before, *::after { box-sizing: border-box; }
/* ⚠ overflow-x: clip 要 html 和 body 都写：手机上只写 body 的 hidden 不管用 —— 装饰用的光晕伸出右边一截，整页就被撑宽，顶栏的菜单按钮被挤出屏幕（10-23 修图轮椅页实测）。
     用 clip 不用 hidden：hidden 会让 position: sticky 失效 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.75 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* 纸纹：很淡的颗粒，别让底子看着像一张死平的色块 */
body::before {
  content: "";
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 1;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.is-dark::before, html[data-theme="dark"] body::before { opacity: .9; mix-blend-mode: screen; filter: invert(1); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sq-wrap { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
main { position: relative; z-index: 2; }

/* 小号英文标签：像底片边上印的字 */
.sq-meta {
  font: 500 11px/1.4 var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sq-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 顶栏 */
.sq-nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.sq-nav.is-stuck { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.sq-nav .sq-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sq-brand { display: flex; align-items: center; gap: 12px; }
.sq-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--ink); color: var(--paper);
  font: 900 12px/1 var(--font); letter-spacing: -.02em;
}
.sq-brand b { font: 900 18px/1 var(--font); letter-spacing: .02em; }
.sq-brand small { display: block; margin-top: 3px; font: 500 9px/1 var(--font); letter-spacing: .26em; color: var(--ink-3); }
.sq-links { display: flex; gap: 4px; }
.sq-links a {
  position: relative;
  padding: 8px 12px;
  font: 500 14px/1 var(--font);
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.sq-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--dot, var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.sq-links a:hover { color: var(--ink); }
.sq-links a:hover::after, .sq-links a[aria-current="page"]::after { transform: scaleX(1); }
.sq-links a[aria-current="page"] { color: var(--ink); }
.sq-links a.l-works { --dot: var(--c-works); }
.sq-links a.l-students { --dot: var(--c-students); }
.sq-links a.l-courses { --dot: var(--c-courses); }
.sq-links a.l-tool { --dot: var(--c-tool); }
.sq-links a.l-center { --dot: var(--c-center); }
.sq-burger { display: none; width: 40px; height: 40px; border: 0; background: none; padding: 10px; cursor: pointer; }
.sq-burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .3s var(--ease); }
/* 深浅色切换：一个方块，左半边实心；切到深色转半圈（整个站只用方的，不用太阳月亮那种圆图标） */
.sq-nav .sq-wrap { justify-content: flex-start; }
.sq-links { margin-left: auto; }
.sq-theme { flex: none; width: 34px; height: 34px; margin-left: 10px; padding: 0; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; transition: border-color .2s var(--ease); }
.sq-theme:hover { border-color: var(--ink); }
.sq-theme i { display: block; width: 14px; height: 14px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); transition: transform .45s var(--ease-out); }
html[data-theme="dark"] .sq-theme i { transform: rotate(180deg); }
body.is-dark .sq-theme { display: none; }   /* 修图轮椅那页一直是暗房，不给切 */

@media (max-width: 860px) {
  .sq-burger { display: block; order: 3; }
  .sq-theme { margin-left: auto; margin-right: 6px; }
  body.is-dark .sq-burger { margin-left: auto; }
  .sq-links {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
    flex-direction: column; gap: 0;
    padding: 24px var(--pad);
    background: var(--paper);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .35s var(--ease-out);
  }
  .sq-nav.is-open .sq-links { transform: none; opacity: 1; pointer-events: auto; }
  .sq-links a { padding: 18px 0; font: 900 32px/1 var(--font); border-bottom: 1px solid var(--line); }
  .sq-links a::after { display: none; }
  .sq-nav.is-open .sq-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .sq-nav.is-open .sq-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ------------------------------------------------------------------ 色卡条 */
.sq-checker { display: flex; height: 10px; width: 100%; }
.sq-checker i { flex: 1; }
.sq-checker i:nth-child(1) { background: #ff2d55; }
.sq-checker i:nth-child(2) { background: #ff9500; }
.sq-checker i:nth-child(3) { background: #ffcc00; }
.sq-checker i:nth-child(4) { background: #00b86b; }
.sq-checker i:nth-child(5) { background: #00b8f0; }
.sq-checker i:nth-child(6) { background: #2d5bff; }
.sq-checker i:nth-child(7) { background: #a44fd4; }
.sq-checker i:nth-child(8) { background: #ff5ac8; }
.sq-checker i:nth-child(9) { background: #f3f3f3; }
.sq-checker i:nth-child(10) { background: #a0a0a0; }
.sq-checker i:nth-child(11) { background: #555555; }
.sq-checker i:nth-child(12) { background: #111111; }

/* ------------------------------------------------------------------ 按钮 / 标签 */
.sq-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font: 500 15px/1 var(--font);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.sq-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sq-btn:active { transform: translateY(1px); }
.sq-btn.is-ghost { background: transparent; color: var(--ink); }
.sq-btn.is-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sq-btn .arrow { transition: transform .3s var(--ease-out); }
.sq-btn:hover .arrow { transform: translateX(4px); }
.sq-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border: 1px solid var(--line);
  font: 500 12px/1 var(--font); color: var(--ink-2);
  white-space: nowrap;
}
.sq-tag::before { content: ""; width: 6px; height: 6px; background: var(--dot, var(--accent)); }

/* ------------------------------------------------------------------ 栏目头 */
.sq-section { position: relative; padding: clamp(72px, 11vw, 160px) 0 0; }
.sq-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px 28px;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.sq-head .no { font: 900 clamp(14px, 1.2vw, 18px)/1 var(--font); color: var(--dot, var(--accent)); font-variant-numeric: tabular-nums; align-self: start; padding-top: .55em; }
.sq-head h2 { margin: 0; font: 900 clamp(44px, 7.4vw, 120px)/.92 var(--font); letter-spacing: -.035em; }
.sq-head p { grid-column: 2 / 3; margin: 0; max-width: 34em; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 18px); }
.sq-head .more { grid-column: 3; grid-row: 1 / span 2; align-self: end; font: 500 14px/1 var(--font); color: var(--ink); display: inline-flex; gap: 8px; padding: 10px 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.sq-head .more:hover { color: var(--dot, var(--accent)); border-color: var(--dot, var(--accent)); }
@media (max-width: 720px) {
  .sq-head { grid-template-columns: 1fr; }
  .sq-head .no, .sq-head p, .sq-head .more { grid-column: 1; grid-row: auto; }
  .sq-head .more { justify-self: start; }
}

/* 模块没内容 —— 整块收起来（sq.js 判断） */
[data-need].is-empty, [data-empty].is-empty { display: none !important; }
/* 大字按词组换行：一个词组里不断开（中文默认哪儿都能断，大标题会断成「教自 / 己会」） */
.nw { white-space: nowrap; }

/* ------------------------------------------------------------------ 片子（印样格） */
.sq-frame {
  position: relative; display: block;
  background: #e8e7e1;
  overflow: hidden;
  cursor: zoom-in;
}
.sq-frame img, .sq-frame .ph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sq-frame img { opacity: 0; filter: brightness(1.6) saturate(.2); transition: opacity .9s var(--ease), filter 1.4s var(--ease), transform 1.2s var(--ease-out); }
.sq-frame img.is-in { opacity: 1; filter: none; }               /* 「显影」：从过曝的白慢慢出来 */
.sq-frame:hover img.is-in { transform: scale(1.025); }
.sq-frame .no {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font: 500 10px/1 var(--font); letter-spacing: .16em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .3s var(--ease);
}
.sq-frame:hover .no, .sq-frame:focus-visible .no { opacity: 1; }
/* 对焦框：悬停时四个角收进来 —— 像相机对焦点 */
.sq-frame::before, .sq-frame::after,
.sq-af::before, .sq-af::after {
  content: ""; position: absolute; z-index: 3; width: 18px; height: 18px;
  border: 2px solid #fff; pointer-events: none;
  opacity: 0; transition: opacity .2s var(--ease), transform .35s var(--ease-out);
}
.sq-frame::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; transform: translate(-8px, -8px); }
.sq-frame::after { right: 10px; top: 10px; border-left: 0; border-bottom: 0; transform: translate(8px, -8px); }
.sq-af { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none; z-index: 3; }
.sq-af::before { left: 10px; bottom: 10px; border-right: 0; border-top: 0; transform: translate(-8px, 8px); }
.sq-af::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; transform: translate(8px, 8px); }
.sq-frame:hover::before, .sq-frame:hover::after, .sq-frame:hover .sq-af::before, .sq-frame:hover .sq-af::after,
.sq-frame:focus-visible::before, .sq-frame:focus-visible::after { opacity: 1; transform: none; }

/* 占位（?demo=1 才出现）：不同色相的渐变 + 噪点，标明是占位 */
.ph { background: var(--ph, linear-gradient(160deg, #ffd1dc, #a3c4ff)); }
.ph::after { content: "占位"; position: absolute; right: 10px; top: 8px; font: 500 10px/1 var(--font); letter-spacing: .2em; color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------ 首页 · 开场：作品拼成的「夏三七」
   10-23 用户：拼字「用来作为标题、大标题，重新排版」。画在 .hero-stage 的 canvas 里（sq-mosaic.js），
   舞台撑满开场剩下的高度；手机上字竖排，舞台高度由脚本按字的比例定。 */
.hero { position: relative; z-index: 2; min-height: 100svh; padding-top: calc(var(--nav-h) + 8px); display: flex; flex-direction: column; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 6px; padding-bottom: 12px; }
.hero-meta .sq-meta { white-space: nowrap; }
.hero-stage-wrap { flex: 1; display: flex; min-height: 0; }
.hero-stage { position: relative; flex: 1; min-height: 42vh; margin: clamp(6px, 1.4vw, 18px) 0 clamp(14px, 2.4vw, 30px); }
.hero-stage canvas { position: absolute; left: 0; top: 0; display: block; touch-action: manipulation; }
.hero-foot { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: end; padding-top: clamp(16px, 2vw, 24px); padding-bottom: clamp(22px, 3vw, 40px); border-top: 1px solid var(--line); }
.hero-line { margin: 0; max-width: 24em; font: 900 clamp(22px, 2.4vw, 38px)/1.25 var(--font); letter-spacing: -.01em; }
.hero-line em { display: block; font-style: normal; color: var(--accent); }
.hero-sub { margin: 10px 0 0; color: var(--ink-2); max-width: 36em; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hero-cta .sq-btn.is-tool:hover { background: var(--c-tool); border-color: var(--c-tool); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 860px) {
  /* 手机：字竖排，舞台高度由脚本按字的比例定（宽度还是要撑满 —— 写成 flex: none 宽度会变 0，10-23 实测整块不见） */
  .hero-stage-wrap { flex: none; }
  .hero-stage { min-height: 0; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-cta { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ 首页 · 作品墙（静态拼版） */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(70px, 7.4vw, 118px); gap: clamp(8px, 1vw, 14px); }
/* 9 张拼成一整块（12 列 × 10 行，严丝合缝）；不够 9 张时剩下的格子自动往前补 */
.mosaic .sq-frame:nth-child(1) { grid-column: 1 / 6;  grid-row: 1 / 7; }
.mosaic .sq-frame:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 5; }
.mosaic .sq-frame:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 6; }
.mosaic .sq-frame:nth-child(4) { grid-column: 6 / 8;  grid-row: 5 / 8; }
.mosaic .sq-frame:nth-child(5) { grid-column: 8 / 10; grid-row: 5 / 8; }
.mosaic .sq-frame:nth-child(6) { grid-column: 10 / 13; grid-row: 6 / 11; }
.mosaic .sq-frame:nth-child(7) { grid-column: 1 / 4;  grid-row: 7 / 11; }
.mosaic .sq-frame:nth-child(8) { grid-column: 4 / 6;  grid-row: 7 / 11; }
.mosaic .sq-frame:nth-child(9) { grid-column: 6 / 10; grid-row: 8 / 11; }
.mosaic .sq-frame:nth-child(n+10) { display: none; }
.mosaic-more { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
@media (max-width: 720px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .mosaic .sq-frame { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
  .mosaic .sq-frame:nth-child(n+7) { display: none; }
}

/* ------------------------------------------------------------------ 原片 / 修后 对比 */
.cmp {
  --at: 50%;
  position: relative; overflow: hidden;
  background: #e8e7e1;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.cmp > .ph, .cmp > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp .after { clip-path: inset(0 0 0 var(--at)); }
[data-home-student] { position: relative; }
[data-home-student] > .cmp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); z-index: 3; }
.cmp .knob {
  position: absolute; top: 50%; left: var(--at); z-index: 4;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; border: 2px solid #fff;
  background: rgba(17, 17, 17, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; color: #fff; font: 900 14px/1 var(--font);
}
.cmp .lab { position: absolute; top: 12px; z-index: 4; padding: 5px 9px; background: rgba(17, 17, 17, .6); color: #fff; font: 500 11px/1 var(--font); letter-spacing: .14em; }
.cmp .lab.l { left: 12px; }
.cmp .lab.r { right: 12px; }

/* ------------------------------------------------------------------ 学生作品 */
.stu { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px) clamp(12px, 1.6vw, 24px); }
.stu-item { grid-column: span 6; }
.stu-item:nth-child(3n+1) { grid-column: span 12; }
.stu-item .cmp { aspect-ratio: 3 / 2; }
.stu-item:nth-child(3n+1) .cmp { aspect-ratio: 21 / 10; }
.stu-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 0; }
.stu-cap b { font: 900 20px/1.2 var(--font); }
.stu-cap span { color: var(--ink-2); font-size: 14px; }
@media (max-width: 720px) {
  .stu-item, .stu-item:nth-child(3n+1) { grid-column: span 12; }
  .stu-item .cmp, .stu-item:nth-child(3n+1) .cmp { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------------ 课程（课表板） */
.board { border-top: 2px solid var(--ink); }
.board-row {
  position: relative;
  display: grid; grid-template-columns: 70px 1fr auto auto; gap: 16px 28px; align-items: center;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding .4s var(--ease-out);
}
.board-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--c-courses); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); z-index: -1; }
.board-row:hover::before { transform: scaleY(1); }
.board-row:hover { color: #fff; padding-left: 18px; padding-right: 18px; }
.board-row:hover .board-sub, .board-row:hover .board-no { color: rgba(255, 255, 255, .8); }
.board-row:hover .sq-tag { border-color: rgba(255, 255, 255, .5); color: #fff; }
.board-row:hover .sq-tag::before { background: #fff; }
.board-no { font: 500 13px/1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.board-name { font: 900 clamp(28px, 4vw, 60px)/1.05 var(--font); letter-spacing: -.02em; }
.board-sub { display: block; margin-top: 6px; font: 400 15px/1.5 var(--font); color: var(--ink-2); }
.board-price { font: 900 clamp(18px, 2vw, 28px)/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-price small { font: 500 12px/1 var(--font); margin-left: 4px; }
.board-wrap { position: relative; z-index: 0; isolation: isolate; }
@media (max-width: 720px) {
  .board-row { grid-template-columns: 1fr auto; }
  .board-no { display: none; }
  .board-row .sq-tag { grid-column: 1; justify-self: start; }
}

/* 课程详情卡（课程页） */
.course { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 72px); padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.course:first-child { border-top: 2px solid var(--ink); }
.course h3 { margin: 10px 0 0; font: 900 clamp(34px, 5vw, 76px)/1 var(--font); letter-spacing: -.025em; }
.course .tagline { margin: 16px 0 0; font: 500 18px/1.5 var(--font); }
.course .price { margin-top: 26px; font: 900 34px/1 var(--font); font-variant-numeric: tabular-nums; }
.course .price small { font: 500 14px/1 var(--font); color: var(--ink-3); margin-left: 6px; }
.course .desc { margin: 0; color: var(--ink-2); white-space: pre-line; }
.course .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.course ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.course li { padding: 12px 0 12px 28px; border-top: 1px solid var(--line-2); position: relative; }
.course li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 2px; background: var(--c-courses); }
.course .act { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .course { grid-template-columns: 1fr; } }

/* 步骤 / 问答（课程页下半） */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.step { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--line); }
.step .n { font: 900 46px/1 var(--font); color: var(--dot, var(--c-courses)); font-variant-numeric: tabular-nums; }
.step h4 { margin: 14px 0 6px; font: 900 20px/1.3 var(--font); }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 500 18px/1.5 var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font: 400 28px/1 var(--font); transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink-2); max-width: 46em; white-space: pre-line; }

/* ------------------------------------------------------------------ 首页 · 暗房（修图轮椅）横条 */
.darkroom {
  position: relative; z-index: 2;
  margin-top: clamp(80px, 12vw, 170px);
  background: #0c0c0e; color: #f1efe9;
  --ink: #f1efe9; --ink-2: #b9b7b0; --ink-3: #75736d; --line: rgba(241, 239, 233, .14); --paper: #0c0c0e;
  --accent: var(--c-tool);
  overflow: hidden;
}
.darkroom .sq-wrap { padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(64px, 9vw, 130px); }
.darkroom-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(24px, 5vw, 96px); align-items: end; }
.darkroom h2 { margin: 18px 0 0; font: 900 clamp(48px, 8vw, 132px)/.92 var(--font); letter-spacing: -.035em; }
.darkroom h2 .v { color: var(--c-tool); }
.darkroom .lead { margin: 22px 0 0; font: 500 clamp(17px, 1.5vw, 22px)/1.6 var(--font); color: var(--ink-2); max-width: 26em; }
.darkroom ol { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.darkroom li { counter-increment: k; display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.darkroom li::before { content: counter(k, decimal-leading-zero); font: 500 13px/1.8 var(--font); color: var(--c-tool); font-variant-numeric: tabular-nums; }
.darkroom li b { font: 900 19px/1.5 var(--font); }
.darkroom li span { grid-column: 2; color: var(--ink-2); font-size: 15px; }
.darkroom .act { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.darkroom .sq-btn { background: #f1efe9; color: #0c0c0e; border-color: #f1efe9; }
.darkroom .sq-btn:hover { background: var(--c-tool); border-color: var(--c-tool); color: #fff; }
.darkroom .sq-btn.is-ghost { background: transparent; color: #f1efe9; border-color: rgba(241, 239, 233, .4); }
.darkroom .sq-btn.is-ghost:hover { background: #f1efe9; color: #0c0c0e; }
.darkroom-glow { position: absolute; right: -10vw; top: -20vw; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(164, 79, 212, .28), transparent 62%); pointer-events: none; }
@media (max-width: 860px) { .darkroom-grid { grid-template-columns: 1fr; } }
/* 深色模式下整页都是暗的，暗房条要跟周围分得开：底色提一点、上下一条细线 */
html[data-theme="dark"] .darkroom { background: #141418; box-shadow: 0 -1px 0 rgba(241, 239, 233, .08), 0 1px 0 rgba(241, 239, 233, .08); }

/* ------------------------------------------------------------------ 页尾 */
.sq-foot { position: relative; z-index: 2; margin-top: clamp(80px, 12vw, 170px); }
/* 2026-10-24（V7待办/16，官网裁切）：原来 line-height .8 + overflow:hidden ⇒ 每页页脚大字底下被切掉一截（夏的底横、七的钩、3 的下半圈）；
   最小 64px ⇒ 360 宽手机上「修图轮椅V7」右边的 7 被切。现在：字号按可用宽度算（5.3 个字宽塞满一行），行高够装下整个字，
   只在横向裁（overflow-x: clip，不会把竖向也变成滚动框）。 */
.sq-foot .big { font: 900 clamp(40px, calc((min(100vw, var(--max)) - 2 * var(--pad)) / 5.3), 300px)/.94 var(--font); letter-spacing: -.05em; margin: 0; padding-bottom: .02em; color: var(--ink); white-space: nowrap; overflow-x: clip; overflow-y: visible; }
/* ⚠ 10-24 下午用户报「X37 黑色镂空字老被切」：字号原来按 100vw 算，但外框 .sq-wrap 最宽 --max（1440）
   ⇒ 屏幕宽过约 1500（他 4K 175% ≈ 2194）字就比框宽，X37 右边被 overflow-x:clip 切掉。改成按 min(屏宽, 框宽) 算。 */
.sq-foot .big span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.sq-foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding: 36px 0 44px; border-top: 1px solid var(--line); }
.sq-foot h4 { margin: 0 0 12px; font: 500 11px/1 var(--font); letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; }
.sq-foot a, .sq-foot p { display: block; margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.sq-foot a:hover { color: var(--ink); }
.sq-contact { display: grid; gap: 8px; }
.sq-contact .row { display: flex; gap: 10px; font-size: 14px; }
.sq-contact .row b { font-weight: 500; min-width: 4em; color: var(--ink); }
/* 2026-10-29：带二维码的那条后面的「扫码」按钮 + 点开后的二维码图（sq.js renderContacts） */
.sq-contact .qr-btn { margin-left: auto; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font: 500 12px/1.6 var(--font); cursor: pointer; }
.sq-contact .qr-btn:hover, .sq-contact .qr-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-3); }
.sq-contact .qr-box[hidden] { display: none; }
.sq-contact .qr-box img { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 10px; }
@media (max-width: 860px) { .sq-foot-in { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ 内页开头 */
.page-hero { position: relative; z-index: 2; padding: calc(var(--nav-h) + clamp(48px, 9vw, 130px)) 0 clamp(28px, 4vw, 56px); }
.page-hero .sq-meta { display: flex; gap: 16px; align-items: center; }
.page-hero .sq-meta::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.page-hero h1 { margin: 22px 0 0; font: 900 clamp(64px, 13vw, 210px)/.86 var(--font); letter-spacing: -.045em; }
.page-hero p { margin: 26px 0 0; max-width: 32em; font: 500 clamp(17px, 1.6vw, 23px)/1.6 var(--font); color: var(--ink-2); }
.page-empty { padding: 40px 0 120px; color: var(--ink-2); font: 500 20px/1.6 var(--font); }
.page-empty b { display: block; font: 900 clamp(28px, 4vw, 52px)/1.2 var(--font); color: var(--ink); margin-bottom: 8px; }

/* ------------------------------------------------------------------ 大图查看（暗场） */
.lb { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; display: none; }
.lb.is-open { display: block; }
.lb-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #0b0b0c; opacity: 0; transition: opacity .45s var(--ease); }
.lb.is-shown .lb-bg { opacity: .97; }
.lb-img { position: absolute; transform-origin: 0 0; will-change: transform; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb-img img, .lb-img .ph { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-ui { position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; color: #f1efe9; opacity: 0; transition: opacity .3s var(--ease) .15s; }
.lb.is-shown .lb-ui { opacity: 1; }
.lb-ui button { pointer-events: auto; position: absolute; border: 0; background: none; color: #f1efe9; cursor: pointer; font: 500 13px/1 var(--font); letter-spacing: .16em; padding: 14px; }
.lb-close { right: 14px; top: 10px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font: 400 34px/1 var(--font) !important; letter-spacing: 0 !important; padding: 24px !important; }
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-count { position: absolute; left: 24px; bottom: 20px; font: 500 12px/1 var(--font); letter-spacing: .2em; color: rgba(241, 239, 233, .7); }
.lb-ui button:hover { color: var(--c-works); }

/* ------------------------------------------------------------------ 作品页：灯台（无限拖动） */
.table-page { overflow: hidden; height: 100svh; }
.table-page body, body.table-page { overflow: hidden; }
/* ⚠ background 不能省：右下角 WORKS 用的是混合模式，Chrome 不拿页面底色（body 的背景）当混合底 —— 没这行，格子缝里的字整段消失 */
.table { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; cursor: grab; touch-action: none; background: var(--paper); }
.table.is-dragging { cursor: grabbing; }
.table-item { position: absolute; left: 0; top: 0; will-change: transform; }
.table-item .sq-frame { width: 100%; height: 100%; }
.table.is-dragging .sq-frame { cursor: grabbing; }
.table-hud {
  position: fixed; left: var(--pad); bottom: 22px; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
}
.table-hud b { font: 900 15px/1 var(--font); }
.table-hud .sq-meta { color: var(--ink-2); }
.table-title { position: fixed; right: var(--pad); bottom: 14px; z-index: 39; pointer-events: none; font: 900 clamp(56px, 10vw, 160px)/.8 var(--font); letter-spacing: -.05em; color: var(--ink); mix-blend-mode: difference; filter: invert(1); opacity: .9; transition: opacity .6s var(--ease); }
/* 一拖动 / 滚动就淡出，不挡片子（sq.js 的 PAGES.works 加 is-moved） */
body.is-moved .table-title { opacity: 0; }
/* 深色：字本身已经是亮的，不用再反一次（不然暗底上的字变成黑的，看不见） */
html[data-theme="dark"] .table-title { filter: none; }
.table-tools { position: fixed; right: var(--pad); top: calc(var(--nav-h) + 12px); z-index: 40; display: flex; gap: 8px; }
.table-tools button { height: 36px; padding: 0 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 500 13px/1 var(--font); cursor: pointer; }
.table-tools button:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ 暗房页（修图轮椅） */
body.is-dark .page-hero h1 .v { color: var(--c-tool); }
.tool-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.tool-badges .sq-tag { --dot: var(--c-tool); }
.chapter { position: relative; z-index: 2; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(70px, 9vw, 140px) 0; border-top: 1px solid var(--line); }
.chapter:nth-of-type(even) { grid-template-columns: 7fr 5fr; }
.chapter:nth-of-type(even) .chapter-text { order: 2; }
.chapter .k { font: 500 12px/1 var(--font); letter-spacing: .2em; color: var(--c-tool); }
.chapter h3 { margin: 16px 0 0; font: 900 clamp(36px, 5vw, 80px)/1 var(--font); letter-spacing: -.03em; }
.chapter p { margin: 22px 0 0; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); max-width: 28em; }
.chapter .facts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.chapter .facts .sq-tag { --dot: var(--c-tool); }
@media (max-width: 860px) {
  .chapter, .chapter:nth-of-type(even) { grid-template-columns: 1fr; }
  .chapter:nth-of-type(even) .chapter-text { order: 0; }
}

/* 演示窗（软件示意）—— 刻意画得像一块屏幕 */
.demo { position: relative; background: #17171b; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #1f1f24; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 11px/1 var(--font); color: #8f8d87; letter-spacing: .06em; }
.demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a40; }
.demo-bar span { margin-left: 8px; }
.demo-body { position: relative; }
.demo-note { position: absolute; right: 10px; bottom: 8px; font: 500 10px/1 var(--font); letter-spacing: .18em; color: rgba(241, 239, 233, .35); }

/* ① 贴回 */
.d-paste { aspect-ratio: 16 / 10; display: grid; grid-template-columns: 1fr 34%; }
.d-ps { position: relative; background: #2a2a2e; overflow: hidden; }
.d-ps .canvas { position: absolute; left: 10%; top: 9%; width: 80%; height: 82%; background: #f2efe6; }
.d-ps .canvas > .ph, .d-ps .canvas > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.d-ps .marquee { position: absolute; left: 34%; top: 18%; width: 34%; height: 40%; outline: 1.5px dashed #fff; outline-offset: 0; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .0); animation: ants 1s linear infinite; }
.d-ps .patch { position: absolute; left: 34%; top: 18%; width: 34%; height: 40%; overflow: hidden; opacity: 0; transform: scale(.96); }
.d-ps .patch > .ph, .d-ps .patch > img { position: absolute; width: 294%; height: 250%; left: -100%; top: -45%; object-fit: cover; }
.d-paste.is-placed .patch { animation: place .9s var(--ease-out) forwards; }
.d-panel { background: #121215; border-left: 1px solid rgba(255, 255, 255, .07); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.d-card { background: #1d1d22; border: 1px solid rgba(255, 255, 255, .06); padding: 10px; display: grid; gap: 8px; }
.d-card .thumb { aspect-ratio: 1; position: relative; overflow: hidden; }
.d-card .thumb > .ph, .d-card .thumb > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.d-row { display: flex; gap: 6px; }
.d-chip { flex: 1; height: 26px; display: grid; place-items: center; background: #26262c; font: 500 11px/1 var(--font); color: #cfcdc6; border: 1px solid transparent; }
.d-chip.is-hot { background: var(--c-tool); color: #fff; }
.d-chip.is-flash { animation: flash .6s var(--ease) 2; }
@keyframes ants { 0%, 100% { outline-color: #fff; } 50% { outline-color: #111; } }
@keyframes place { 0% { opacity: 0; transform: scale(1.06); filter: brightness(1.8); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes flash { 50% { box-shadow: 0 0 0 2px #fff; } }

/* ② 强度 */
.d-strength { aspect-ratio: 16 / 10; }
.d-strength .cmp { position: absolute; left: 0; top: 0; right: 0; bottom: 0; cursor: default; }
.d-strength .cmp .after { clip-path: none; opacity: var(--k, .6); }
/* 10-24 深夜：真实原图 / 成品（后台「强度演示」）—— 图是正方形，框改 5:4、裁的位置往上靠（脸一般在上三分之一）；上面一排预设名切换 */
.d-strength.is-real { aspect-ratio: 5 / 4; }
.d-strength.is-real .cmp > img { object-position: 50% 30%; }
.d-pairs { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.d-pair { pointer-events: auto; height: 26px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 12, 14, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #cfcdc6; font: 500 11px/1 var(--font); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.d-pair:hover { color: #fff; }
.d-pair.is-hot { background: var(--c-tool); border-color: transparent; color: #fff; }
.d-dial { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; width: min(420px, 80%); padding: 12px 16px 14px; background: rgba(12, 12, 14, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); }
.d-dial .top { display: flex; justify-content: space-between; font: 500 11px/1 var(--font); letter-spacing: .14em; color: #b9b7b0; margin-bottom: 10px; }
.d-dial .top b { color: #fff; font: 900 15px/1 var(--font); letter-spacing: 0; }
.d-dial input { width: 100%; accent-color: var(--c-tool); }

/* ③ 预设剪影 */
/* ⭐ 10-24：剪影换成黑白初音（plugin.html），演示由 sq-tool.js 的 presets() 放：光标点部位 → 预设列表 → 点进预设 → 一组滑条 → 拖滑条。
   剪影这块用浅色纸底 + 黑线（黑白漫画），点中的部位上紫色；右边列表照旧深色。 */
.d-presets { position: relative; aspect-ratio: 16 / 10; display: grid; grid-template-columns: 40% 1fr; overflow: hidden; }
.d-sil { position: relative; background: #f2f1ec; display: grid; place-items: center; overflow: hidden; }
.d-sil svg.mk { width: auto; height: 94%; max-width: 92%; }
.d-sil .part { stroke: #121214; stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transition: fill .22s var(--ease), filter .22s var(--ease); outline: none; }
.d-sil rect.part[data-part="background"] { fill: url(#mk-paper); stroke: none; }
.d-sil .k-skin { fill: #fbfaf7; }
.d-sil .k-hair { fill: url(#mk-tone); }
.d-sil .k-mid { fill: #6c6c70; }
.d-sil .k-dark { fill: #1b1b1f; }
.d-sil .part:hover, .d-sil .part:focus-visible { filter: brightness(.86); }
.d-sil rect.part[data-part="background"]:hover { filter: none; }
.d-sil .part.is-on { fill: var(--c-tool); filter: none; }
.d-sil rect.part[data-part="background"].is-on { fill: #e7dff0; }
.d-sil .ink { fill: none; stroke: #121214; stroke-width: 1.1; stroke-linecap: round; opacity: .55; pointer-events: none; }
.d-sil .ink-w { stroke: #f2f1ec; opacity: .5; }
.d-sil .ink-face { fill: none; stroke: #121214; stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.d-sil .ink-face .eye { fill: #fff; }
.d-sil .ink-face .iris { fill: #121214; stroke: none; }
.d-sil .ink-face .hl { fill: #fff; stroke: none; }
.d-sil .ink-face .blush { stroke-width: 1; opacity: .5; }
.d-icons { position: absolute; inset: 0; pointer-events: none; }
.d-ico { position: absolute; pointer-events: auto; width: 46px; padding: 6px 0 4px; display: grid; justify-items: center; gap: 3px; border: 1px solid rgba(18, 18, 20, .18); border-radius: 10px; background: rgba(255, 255, 255, .72); color: #121214; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.d-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.d-ico i { font: 500 10px/1 var(--font); font-style: normal; letter-spacing: .04em; }
.d-ico:hover { transform: translateY(-1px); background: #fff; }
.d-ico.is-on { background: var(--c-tool); color: #fff; border-color: transparent; }

.d-list { position: relative; padding: 14px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.d-list .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 11px/1 var(--font); letter-spacing: .1em; color: #8f8d87; padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.d-list .h b { color: #f1efe8; font: 900 13px/1.2 var(--font); letter-spacing: 0; }
.d-list .h .back { border: 0; background: none; color: #f1efe8; font: 900 13px/1.2 var(--font); padding: 0; cursor: pointer; }
.d-list .h .back::before { content: "‹ "; color: var(--c-tool); }
.d-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; background: #1b1b20; border: 1px solid rgba(255, 255, 255, .05); color: #e7e5de; font: 500 13px/1.3 var(--font); cursor: pointer; animation: slidein .34s var(--ease-out) both; transition: background .18s var(--ease), border-color .18s var(--ease); }
.d-row small { flex: none; color: #8f8d87; font-size: 11px; }
.d-row:hover, .d-row.is-hot { background: #26262d; border-color: rgba(164, 79, 212, .55); }
.d-row.is-press { background: rgba(164, 79, 212, .28); }
.d-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; padding: 8px 10px; background: #1b1b20; border: 1px solid rgba(255, 255, 255, .05); font: 500 13px/1.3 var(--font); color: #e7e5de; animation: slidein .34s var(--ease-out) both; transition: border-color .18s var(--ease); }
.d-item small { color: #b9b7b0; font-size: 11px; font-variant-numeric: tabular-nums; }
.d-item.is-drag { border-color: rgba(164, 79, 212, .7); }
.d-item.is-drag small { color: #fff; }
.d-item input { grid-column: 1 / -1; width: 100%; accent-color: var(--c-tool); height: 14px; margin: 0; }
.d-go { margin-top: auto; align-self: stretch; padding: 9px 10px; border: 0; background: var(--c-tool); color: #fff; font: 900 13px/1 var(--font); text-align: center; animation: slidein .34s var(--ease-out) both; }
.d-go.is-press { filter: brightness(1.2); transform: scale(.98); }
@keyframes slidein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
/* 演示光标：绝对定位在整块上，JS 改 transform 走过去 */
.d-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform .62s cubic-bezier(.65, 0, .25, 1), opacity .3s var(--ease); will-change: transform; }
.d-cursor.is-on { opacity: 1; }
.d-cursor.is-drag { transition: transform .05s linear, opacity .3s var(--ease); }
.d-cursor svg { width: 22px; height: 22px; fill: #fff; stroke: #121214; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.d-cursor i { position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; background: rgba(164, 79, 212, .55); transform: scale(0); opacity: 0; }
.d-cursor.is-click i { animation: dclick .45s var(--ease-out); }
@keyframes dclick { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ④ Agent */
.d-agent { aspect-ratio: 16 / 10; display: grid; grid-template-columns: 1fr 1fr; }
.d-chat { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid rgba(255, 255, 255, .07); overflow: hidden; }
.d-msg { max-width: 92%; padding: 10px 12px; font: 400 13px/1.55 var(--font); animation: slidein .35s var(--ease-out) both; }
.d-msg.me { align-self: flex-end; background: var(--c-tool); color: #fff; }
.d-msg.bot { align-self: flex-start; background: #23232a; color: #e7e5de; }
.d-log { padding: 16px; display: flex; flex-direction: column; gap: 8px; font: 400 12px/1.5 var(--font); color: #b9b7b0; overflow: hidden; }
.d-log .h { font: 500 11px/1 var(--font); letter-spacing: .14em; color: #8f8d87; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.d-step { display: grid; grid-template-columns: 16px 1fr; gap: 8px; animation: slidein .35s var(--ease-out) both; }
.d-step i { width: 10px; height: 10px; margin-top: 4px; border: 1.5px solid #5a5a62; }
.d-step.is-done i { background: #00b86b; border-color: #00b86b; }
.d-step.is-now i { border-color: var(--c-tool); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { background: var(--c-tool); } }
@media (max-width: 560px) {
  .d-paste, .d-presets, .d-agent { grid-template-columns: 1fr; aspect-ratio: auto; }
  .d-ps { aspect-ratio: 4 / 3; }
  .d-sil { height: 360px; }
  .d-list { min-height: 300px; }
  .d-panel, .d-list, .d-log { border: 0; }
}

/* 更多能力 */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.more-grid div { padding: 26px 22px 30px 0; border-bottom: 1px solid var(--line); }
.more-grid b { display: block; font: 900 19px/1.35 var(--font); }
.more-grid span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 14px; }
@media (max-width: 960px) { .more-grid { grid-template-columns: 1fr 1fr; } }

/* 下载区 */
.dl { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); padding: clamp(40px, 6vw, 80px); background: var(--sheet); border: 1px solid var(--line); }
.dl h3 { margin: 0; font: 900 clamp(34px, 4.6vw, 70px)/1 var(--font); letter-spacing: -.03em; }
.dl dl { margin: 28px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; }
.dl dt { color: var(--ink-3); font-size: 14px; }
.dl dd { margin: 0; font: 500 15px/1.5 var(--font); }
.dl .act { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.dl ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.dl ol li { counter-increment: s; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--line); }
.dl ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 15px; font: 900 14px/1.6 var(--font); color: var(--c-tool); }
.dl ol b { display: block; font: 900 16px/1.5 var(--font); }
.dl ol span { color: var(--ink-2); font-size: 14px; }
.notice { margin-top: 18px; padding: 18px 22px; border-left: 3px solid var(--c-tool); background: var(--sheet); color: var(--ink-2); }
.notice b { color: var(--ink); }
.changes { margin: 0; padding: 0 0 0 1.1em; color: var(--ink-2); }
.changes li { margin: 6px 0; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ 学生中心（student.html） */
/* 里面的登录 / 作业 / 课表 / 通知还是 site.css 那套组件（功能没动），这里只把它的「颜料」换成新版：
   site.css 的组件全靠 --ink-xxx / --radius / --sans 这些变量上色，在 body 上改掉，组件就跟着变。
   ⚠ 改 site.css 的变量名会让这里失效 —— 那边改名时这里要一起改。 */
body.center-page {
  --ink-000: var(--sheet);    /* 输入框聚焦时的底 */
  --ink-050: var(--paper);    /* 输入框 */
  --ink-100: var(--sheet);    /* 卡片 / 表单框：白色印样纸摊在看片台上 */
  --ink-150: #ebeae4;
  --ink-200: #e2e0d9;
  --ink-300: #cfcdc5;
  --ink-400: #a9a7a0;
  --ink-500: var(--ink-3);
  --ink-600: var(--ink-2);
  --ink-700: #2c2c2a;
  --ink-800: var(--ink);
  --ink-900: var(--ink);
  --info: var(--c-center);
  --student: var(--c-center);
  --radius-sm: 0; --radius: 0; --radius-lg: 0;   /* 新版全站直角 */
  --sans: var(--font);
  --serif: var(--font);
  --speed: 200ms;
}
/* 深色：灰阶反过来，状态色换成在暗底上读得清的亮一档，浅色底的提示框换成半透明 */
html[data-theme="dark"] body.center-page {
  --ink-150: #1c1c20;
  --ink-200: #26262b;
  --ink-300: #3a3a40;
  --ink-400: #5c5b58;
  --ink-700: #d6d4cd;
  --ok: #3ddc97; --ok-dim: rgba(61, 220, 151, .14);
  --warn: #ffb547; --warn-dim: rgba(255, 181, 71, .14);
  --danger: #ff6b7a; --danger-dim: rgba(255, 107, 122, .14);
  --info-dim: rgba(0, 184, 107, .14);
}
.center-page .wrap { position: relative; z-index: 2; max-width: var(--max); padding: calc(var(--nav-h) + clamp(40px, 7vw, 100px)) var(--pad) 40px; }
.center-page .wrap > * { max-width: 880px; }
.center-head { margin-bottom: clamp(28px, 4vw, 48px); }
.center-head .sq-meta { display: flex; gap: 16px; align-items: center; }
.center-head .sq-meta::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.center-head h1 { margin: 18px 0 0; font: 900 clamp(48px, 8vw, 120px)/.9 var(--font); letter-spacing: -.04em; }
.center-page .form-box > h3 { font: 900 22px/1.3 var(--font); }
.center-page .section > h3 { font: 500 11px/1.4 var(--font); letter-spacing: .18em; color: var(--ink-3); }
.center-page .btn { font-family: var(--font); }
.center-page .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }
.center-page .btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.center-page input:focus, .center-page select:focus, .center-page textarea:focus { border-color: var(--ink); }
.center-page .tab.active { font-weight: 900; }
.center-verse { margin: clamp(40px, 6vw, 80px) 0 0; color: var(--ink-3); font: 500 14px/1.6 var(--font); }
.captcha-row { display: grid; grid-template-columns: 1fr 168px; gap: 8px; }
.captcha-box { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border: 1px solid var(--ink-300); background: var(--sheet); color: var(--ink-3); font: 500 12px/1.3 var(--font); cursor: pointer; overflow: hidden; }
.captcha-box:hover { border-color: var(--ink); }
.captcha-box svg { display: block; max-width: 100%; height: 40px; }

/* ------------------------------------------------------------------ 进场显影 */
[data-in] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); }
[data-in].is-in { opacity: 1; transform: none; }

/* 10-24 深夜：原来这里「减少动态效果」时把所有动画清零 —— 用户自己电脑就开着，整站变硬切；用户定全站不再看这个设置（见 sq.js） */

/* ── 自助咨询（2026-10-24，V7待办/13；sq-consult.js）──────────────────────────
   一整块印样纸：上面对话记录、下面输入框。颜色全走变量（--sheet / --ink / --line），深色模式自动跟着换。
   ⚠ 宽度不超过 860：聊天一行太长读着累；手机上贴满。
   ⭐ 10-24 用户：「输入框会被往下顶，看不到发送键」—— 原来对话区随内容长高（最高 62vh），上面还有一大块标题，
     聊几轮输入框就被挤到屏幕外。现在整页做成聊天软件那样：标题压成一行，聊天框正好占满剩下的一屏，
     只有对话区自己滚，输入框和「发送」永远钉在框底；手机键盘弹出时跟着缩（interactive-widget + dvh）。 */
.sq-links a.l-consult { --dot: var(--c-cyan); }
body[data-page="consult"] main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 520px; }
.consult-hero { flex: none; padding: calc(var(--nav-h) + clamp(12px, 2.4vw, 28px)) 0 clamp(10px, 1.6vw, 18px); }
.consult-hero .sq-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; }
.consult-hero .sq-meta { display: none; }
.consult-hero h1 { margin: 0; font-size: clamp(30px, 4.2vw, 56px); line-height: 1; }
.consult-hero p { margin: 0; flex: 1 1 22em; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.5; }
.consult-section { flex: 1; min-height: 0; padding: 0 0 clamp(12px, 2vw, 22px); display: flex; }
.consult-section > .sq-wrap { display: flex; flex-direction: column; min-height: 0; }
.consult { flex: 1; min-height: 0; width: 100%; max-width: 860px; background: var(--sheet); border: 1.5px solid var(--ink); display: flex; flex-direction: column; }
.consult-log { flex: 1; min-height: 120px; overflow-y: auto; padding: 20px clamp(14px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.consult-msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.consult-who { font: 900 12px/1.9 var(--font); letter-spacing: .08em; color: var(--ink-3); }
.consult-text { font: 500 16px/1.7 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.consult-msg.is-user .consult-text { color: var(--ink-2); }
.consult-msg.is-user .consult-who { color: var(--c-cyan); }
.consult-msg.is-error .consult-text { color: var(--ink-2); }
.consult-shot { grid-column: 2; display: block; max-width: min(260px, 100%); max-height: 180px; border: 1px solid var(--line); object-fit: contain; background: var(--paper); }
.consult-handoff { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line); font: 500 14px/1.4 var(--font); color: var(--ink-2); }
.consult-handoff b { color: var(--ink); font-variant-numeric: tabular-nums; }
.consult-handoff .sq-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.consult-form { flex: none; border-top: 1.5px solid var(--ink); padding: 12px clamp(12px, 3vw, 28px) 10px; display: flex; flex-direction: column; gap: 8px; }
.consult.is-drop .consult-form { outline: 2px dashed var(--c-cyan); outline-offset: -6px; }
.consult-attach { display: flex; align-items: center; gap: 12px; font: 500 13px/1.4 var(--font); color: var(--ink-2); }
.consult-attach[hidden] { display: none; }
.consult-attach img { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--line); }
.consult-attach .sq-btn { height: 30px; padding: 0 10px; font-size: 12px; margin-left: auto; }
.consult-row { display: flex; align-items: flex-end; gap: 8px; }
.consult-pic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.consult-pic:hover { color: var(--ink); border-color: var(--ink); }
.consult-pic[hidden] { display: none; }
.consult-form textarea { flex: 1; min-width: 0; box-sizing: border-box; resize: none; height: 46px; min-height: 46px; max-height: 160px; padding: 11px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 500 15px/1.5 var(--font); }
.consult-form textarea:focus { outline: 2px solid var(--c-cyan); outline-offset: -1px; }
.consult-send { flex: none; height: 46px; padding: 0 20px; }
.consult-send[disabled] { opacity: .5; cursor: wait; }
.consult-bar { display: flex; align-items: center; gap: 12px; }
.consult-warn { margin: 0; margin-right: auto; font: 500 12px/1.4 var(--font); color: var(--ink-3); }
.consult-count { font: 500 12px/1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.consult-clear { border: 0; background: none; padding: 0; font: 500 12px/1 var(--font); color: var(--ink-3); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.consult-clear:hover { color: var(--ink); }
.consult-note { flex: none; max-width: 860px; margin: 0; padding: 0 clamp(14px, 3vw, 28px) 10px; font: 500 12px/1.5 var(--font); color: var(--ink-3); }
@media (max-width: 560px) {
  .consult-hero p { display: none; }
  .consult-msg { grid-template-columns: minmax(0, 1fr); }
  .consult-handoff, .consult-shot { grid-column: 1; }
  .consult-send { padding: 0 14px; }
  .consult-warn { font-size: 11px; }
  .consult-key { display: none; }
  .consult-note { display: none; }
}

/* ⭐ 2026-10-27（docs/298）：导航里的「直播投稿」—— 开播收稿时才出现（sq.js boot），带个红点表示正在直播。⚠ 红点是链接里的 <i class="l-live-dot">，不用 ::after（那个被导航的悬停下划线占了） */
.sq-links a.l-live { --dot: #e5484d; }
.sq-links a.l-live .l-live-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #e5484d; vertical-align: middle; }

/* ------------------------------------------------------------------ 学生中心 v2（student.html，2026-10-30 重排） */
/* 全部 .sc-* 自成一套，只吃本文件的变量（--paper / --sheet / --ink / --line），深浅色自动跟着走；不再借 site.css。
   ⚠ 上面 body.center-page 那节还给注册页 / 直播投稿页用，别删。
   排版思路：上面一行大字 + 三个数（待交 / 新消息 / 下节课），下面一条钉在顶栏下面的标签：今天 / 课程 / 课表 / 私教 / 消息。
   每块用「小号英文标签 + 细线」分开，跟课程页的课表板一个路数；能直接操作的东西（交作业、回批注、约私教）都就地做，不弹框。 */
body.sc-page {
  --accent: var(--c-center);
  --sc: var(--c-center);
  --ok: #00a35e; --warn: #d97a00; --bad: #e5484d;
  --ok-dim: rgba(0, 163, 94, .1); --warn-dim: rgba(217, 122, 0, .1); --bad-dim: rgba(229, 72, 77, .1);
}
html[data-theme="dark"] body.sc-page {
  --ok: #3ddc97; --warn: #ffb547; --bad: #ff6b7a;
  --ok-dim: rgba(61, 220, 151, .12); --warn-dim: rgba(255, 181, 71, .12); --bad-dim: rgba(255, 107, 122, .12);
}
.sc-main { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + clamp(36px, 6vw, 88px)); }
.sc-main [hidden] { display: none !important; }

/* 开头：大字 + 三个数 */
.sc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding-bottom: clamp(24px, 3vw, 40px); }
.sc-hero .sq-meta { display: flex; gap: 16px; align-items: center; }
.sc-hero .sq-meta::before { content: ""; width: 26px; height: 2px; background: var(--sc); }
.sc-hero h1 { margin: 18px 0 0; font: 900 clamp(44px, 7vw, 112px)/.92 var(--font); letter-spacing: -.04em; overflow-wrap: anywhere; }
.sc-who { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--ink-2); font: 500 14px/1.4 var(--font); }
.sc-link { border: 0; padding: 0; background: none; color: var(--ink-2); font: 500 14px/1.4 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sc-link:hover { color: var(--ink); }
.sc-stats { display: flex; gap: 0; border-top: 2px solid var(--ink); }
.sc-stat { min-width: 128px; padding: 14px 22px 4px 0; text-align: left; border: 0; background: none; color: inherit; cursor: pointer; }
.sc-stat + .sc-stat { padding-left: 22px; border-left: 1px solid var(--line); }
.sc-stat b { display: block; font: 900 clamp(30px, 3.4vw, 48px)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sc-stat b.is-hot { color: var(--bad); }
.sc-stat b small { font: 500 14px/1 var(--font); margin-left: 2px; }
.sc-stat span { display: block; margin-top: 8px; font: 500 11px/1.3 var(--font); letter-spacing: .14em; color: var(--ink-3); }
.sc-stat:hover span { color: var(--ink); }
@media (max-width: 860px) {
  .sc-hero { grid-template-columns: 1fr; }
  .sc-stat { min-width: 0; flex: 1; }
}
@media (max-width: 480px) {
  .sc-stat, .sc-stat + .sc-stat { padding-right: 10px; }
  .sc-stat + .sc-stat { padding-left: 12px; }
  .sc-stat b { font-size: 26px; white-space: nowrap; }
  .sc-stat b small { font-size: 12px; }
}

/* 标签条：钉在顶栏下面 */
.sc-tabs { position: sticky; top: var(--nav-h); z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.sc-tabs .sq-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sc-tabs .sq-wrap::-webkit-scrollbar { display: none; }
.sc-tab { position: relative; flex: none; height: 54px; padding: 0 16px; border: 0; background: none; color: var(--ink-2); font: 500 16px/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sc-tab:first-child { padding-left: 0; }
.sc-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--sc); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.sc-tab:first-child::after { left: 0; }
.sc-tab:hover { color: var(--ink); }
.sc-tab.is-on { color: var(--ink); font-weight: 900; }
.sc-tab.is-on::after { transform: scaleX(1); }
.sc-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--bad); color: #fff; font: 900 11px/1 var(--font); font-variant-numeric: tabular-nums; }

/* 面板 + 分块 */
.sc-panel { padding-top: clamp(32px, 4vw, 56px); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
.sc-block + .sc-block { margin-top: clamp(40px, 5vw, 64px); }
.sc-grid > .sc-block { margin-top: 0; }          /* 左右两栏并排时别吃上面那条间距，不然右栏比左栏低一截 */
.sc-card + .sc-block { margin-top: clamp(32px, 4vw, 48px); }
.sc-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 11px/1.4 var(--font); letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; }
.sc-label::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--dot, var(--sc)); }
.sc-label .r { margin-left: auto; letter-spacing: 0; text-transform: none; }
.sc-title { margin: 0 0 16px; font: 900 clamp(22px, 2.2vw, 30px)/1.25 var(--font); letter-spacing: -.01em; }
.sc-note-text { margin: 0; color: var(--ink-2); font-size: 15px; }
.sc-empty { padding: 22px 0; border-top: 1px solid var(--line); color: var(--ink-3); font: 500 15px/1.6 var(--font); }
.sc-empty b { display: block; color: var(--ink); font: 900 20px/1.4 var(--font); margin-bottom: 2px; }

/* 一行一条（课、待办、资料、通知都用它） */
.sc-list { border-bottom: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.sc-row .t { font: 900 18px/1.3 var(--font); font-variant-numeric: tabular-nums; }
.sc-row .t small { display: block; font: 500 12px/1.4 var(--font); color: var(--ink-3); }
.sc-row .m { min-width: 0; }
.sc-row .m b { font: 500 16px/1.5 var(--font); }
.sc-row .m span { display: block; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.sc-row .m span.sc-pill { display: inline-flex; margin-top: 4px; }
.sc-row.is-gone .t, .sc-row.is-gone .m b { text-decoration: line-through; color: var(--ink-3); }
@media (max-width: 560px) { .sc-row { grid-template-columns: minmax(0, 1fr) auto; } .sc-row .t { grid-column: 1 / -1; } }

.sc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px; border: 1px solid var(--line); font: 500 12px/1 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.sc-chip::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--dot, var(--sc)); }
.sc-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font: 500 12px/1 var(--font); white-space: nowrap; border: 1px solid currentColor; }
.sc-pill.ok { color: var(--ok); } .sc-pill.warn { color: var(--warn); } .sc-pill.bad { color: var(--bad); } .sc-pill.mute { color: var(--ink-3); }
.sc-when { font: 900 12px/1 var(--font); color: var(--bad); margin-left: 6px; }

/* 待办：整行能点 */
.sc-todo { width: 100%; display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: padding .3s var(--ease-out), background .2s var(--ease); }
.sc-todo::before { content: ""; align-self: stretch; background: var(--line); }
.sc-todo.is-urgent::before { background: var(--bad); }
.sc-todo.is-info { cursor: default; }
.sc-todo:not(.is-info):hover { padding-left: 10px; padding-right: 10px; background: var(--sheet); }
.sc-todo b { display: block; font: 500 16px/1.5 var(--font); }
.sc-todo span { display: block; color: var(--ink-3); font-size: 13.5px; }
.sc-todo i { font-style: normal; font: 500 13px/1 var(--font); white-space: nowrap; }
.sc-todo:not(.is-info):hover i { color: var(--sc); }

/* 表单 */
.sc-card { background: var(--sheet); border: 1px solid var(--line); padding: clamp(18px, 2.4vw, 28px); }
.sc-card.is-strong { border: 1.5px solid var(--ink); }
.sc-card + .sc-card { margin-top: 14px; }
.sc-card h3 { margin: 0 0 6px; font: 900 22px/1.3 var(--font); }
.sc-field { display: block; margin-top: 14px; }
.sc-field > span { display: block; margin-bottom: 6px; font: 500 13px/1.4 var(--font); color: var(--ink-2); }
.sc-input { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 15px/1.5 var(--font); }
textarea.sc-input { min-height: 92px; resize: vertical; }
select.sc-input { appearance: auto; }
.sc-input:focus { outline: 2px solid var(--sc); outline-offset: -1px; border-color: transparent; }
.sc-inline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-top: 12px; }
.sc-inline .sc-input { flex: 1 1 220px; width: auto; }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 15px/1 var(--font); cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.sc-btn:hover { background: var(--sc); border-color: var(--sc); color: #fff; }
.sc-btn.is-ghost { background: transparent; color: var(--ink); }
.sc-btn.is-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sc-btn.is-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-width: 1px; }
.sc-btn.is-block { width: 100%; margin-top: 18px; }
.sc-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sc-btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sc-btn.is-ghost[disabled]:hover { background: transparent; color: var(--ink); }
.sc-msg { min-height: 1.5em; margin: 10px 0 0; font: 500 13.5px/1.5 var(--font); }
.sc-msg.ok { color: var(--ok); } .sc-msg.bad { color: var(--bad); }

/* 登录前 */
.sc-gate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sc-gate .steps { margin-top: 6px; }
.sc-gate .step .n { color: var(--sc); }
@media (max-width: 860px) { .sc-gate { grid-template-columns: minmax(0, 1fr); } }

/* 课程：切换条 + 课头 */
.sc-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-cbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: 500 15px/1 var(--font); cursor: pointer; }
.sc-cbtn::before { content: ""; width: 9px; height: 9px; background: var(--dot, var(--sc)); }
.sc-cbtn:hover { border-color: var(--ink); }
.sc-cbtn.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sc-cbtn[disabled] { cursor: default; color: var(--ink-3); border-style: dashed; }
.sc-cbtn small { font-size: 12px; color: inherit; opacity: .75; }
.sc-chead { margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--ink); position: relative; }
.sc-chead::before { content: ""; position: absolute; left: 0; top: -2px; width: 120px; height: 6px; background: var(--dot, var(--sc)); }
.sc-chead h2 { margin: 6px 0 0; font: 900 clamp(34px, 5vw, 72px)/1 var(--font); letter-spacing: -.03em; }
.sc-chead p { margin: 14px 0 0; max-width: 46em; color: var(--ink-2); white-space: pre-line; }
.sc-anchor { scroll-margin-top: calc(var(--nav-h) + 70px); }

/* 作业卡 */
.sc-asg { padding: 22px 0 24px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 70px); }
.sc-asg.is-flash { animation: scflash 1.6s var(--ease); }
@keyframes scflash { 0%, 40% { background: var(--warn-dim); } 100% { background: transparent; } }
.sc-asg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sc-asg-head h3 { margin: 0; font: 900 21px/1.35 var(--font); }
.sc-asg-meta { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }
.sc-asg-desc { margin: 12px 0 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-mine { margin-top: 14px; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.sc-mine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sc-thread { margin-top: 14px; border-left: 2px solid var(--line); padding-left: 14px; }
.sc-say { margin: 0 0 12px; }
.sc-say .who { font: 500 11px/1.4 var(--font); letter-spacing: .14em; color: var(--ink-3); }
.sc-say.is-teacher .who { color: var(--sc); }
.sc-say p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-more { margin-top: 10px; }
.sc-more summary { cursor: pointer; color: var(--ink-3); font: 500 13px/1.6 var(--font); }

/* 公告 / 资料 */
.sc-ann { padding: 18px 0; border-top: 1px solid var(--line); }
.sc-ann h4 { margin: 0; font: 900 18px/1.4 var(--font); }
.sc-ann .d { margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.sc-ann .b { margin: 10px 0 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-ann .b a, .sc-ann-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sc); }
.sc-res-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* 评分星星：方块，不用圆的 */
.sc-stars { display: flex; gap: 6px; margin-top: 6px; }
.sc-star { width: 44px; height: 44px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-3); font: 900 20px/1 var(--font); cursor: pointer; }
.sc-star:hover { border-color: var(--ink); }
.sc-star.is-on { background: var(--c-yellow); border-color: var(--c-yellow); color: #111; }

/* 月历 */
.sc-calbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.sc-calbar h3 { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 5.6em; }
.sc-calbar .sp { flex: 1; }
.sc-check { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font); color: var(--ink-2); cursor: pointer; }
.sc-check input { width: 16px; height: 16px; accent-color: var(--sc); }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sc-week, .sc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-week span { padding: 0 8px 8px; font: 500 11px/1 var(--font); letter-spacing: .14em; color: var(--ink-3); }
.sc-cal { border-top: 2px solid var(--ink); border-left: 1px solid var(--line); }
.sc-cell { position: relative; min-height: 104px; padding: 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s var(--ease), opacity .2s var(--ease); }
.sc-cell:hover { background: var(--sheet); }
.sc-cell.is-blank { cursor: default; background: transparent; }
.sc-cell .n { font: 500 13px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sc-cell.is-today .n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 0 -4px; background: var(--ink); color: var(--paper); font-weight: 900; }
.sc-cell.is-past .n { color: var(--ink-3); }
.sc-cell.is-pick { box-shadow: inset 0 0 0 2px var(--sc); }
.sc-cal.only-ev .sc-cell:not(.has-ev):not(.is-blank) { opacity: .3; }
.sc-ev { display: block; padding: 3px 6px; border-left: 3px solid var(--dot, var(--sc)); background: color-mix(in srgb, var(--dot, var(--sc)) 12%, transparent); font: 500 12px/1.35 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ev.is-gone { text-decoration: line-through; opacity: .5; }
.sc-dots { display: none; gap: 3px; }
.sc-dots i { width: 6px; height: 6px; background: var(--dot, var(--sc)); }
.sc-cell.is-disabled { cursor: not-allowed; opacity: .35; }
.sc-cell.is-disabled:hover { background: transparent; }
@media (max-width: 640px) {
  .sc-cell { min-height: 54px; padding: 6px 4px; align-items: center; }
  .sc-ev { display: none; }
  .sc-dots { display: flex; }
  .sc-week span { padding: 0 0 8px; text-align: center; }
  .sc-cell.is-today .n { margin: -3px 0 0; }
}
.sc-day { margin-top: 22px; }

/* 私教：时段格 */
.sc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin-top: 12px; }
.sc-slot { height: 46px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: 500 15px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.sc-slot:hover { border-color: var(--ink); }
.sc-slot[disabled] { background: transparent; color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; border-style: dashed; }
.sc-slot[disabled]:hover { border-color: var(--line); }
.sc-slot.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sc-quota { display: flex; gap: 4px; margin-top: 8px; }
.sc-quota i { width: 28px; height: 8px; background: var(--line); }
.sc-quota i.is-used { background: var(--sc); }

/* 通知 */
.sc-ngroup + .sc-ngroup { margin-top: 28px; }
.sc-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0 14px 14px; border-top: 1px solid var(--line); position: relative; }
.sc-note::before { content: ""; position: absolute; left: 0; top: 20px; width: 6px; height: 6px; background: transparent; }
.sc-note.is-unread::before { background: var(--bad); }
.sc-note.is-keep { background: var(--warn-dim); padding-right: 12px; }
.sc-note .c { font: 500 15px/1.55 var(--font); overflow-wrap: anywhere; }
.sc-note.is-read .c { color: var(--ink-2); }
.sc-note .d { grid-column: 1; color: var(--ink-3); font-size: 12.5px; }
.sc-note a.c:hover { color: var(--sc); }
.sc-note .act { grid-column: 2; grid-row: 1 / span 2; }

/* 提问 */
.sc-qa { padding: 18px 0; border-top: 1px solid var(--line); }
.sc-qa .q { white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-qa .d { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
.sc-qa .a { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--sc); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-qa .a .who { display: block; font: 500 11px/1.4 var(--font); letter-spacing: .14em; color: var(--sc); }

/* 小提示条 */
.sc-toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; max-width: calc(100vw - 32px); padding: 12px 18px; background: var(--ink); color: var(--paper); font: 500 14px/1.5 var(--font); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
.sc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sc-toast.is-bad { background: var(--bad); color: #fff; }
.sc-verse { margin: clamp(48px, 7vw, 96px) 0 0; color: var(--ink-3); font: 500 14px/1.6 var(--font); }

/* ═══ 学生中心 · 模板提问（sq-ask.js，2026-10-31，docs/318）═══ */
#qaApp .qa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font: 600 14px/1.4 var(--font); }
#qaApp .qa-status span { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
#qaApp .qa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
#qaApp .qa-online { background: var(--ok); }
#qaApp .qa-busy, #qaApp .qa-class { background: var(--warn); }
#qaApp .qa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
#qaApp .qa-stats div { padding: 10px 12px; border: 1px solid var(--line); background: var(--sheet); }
#qaApp .qa-stats b { display: block; font: 900 22px/1.2 var(--font); font-variant-numeric: tabular-nums; }
#qaApp .qa-stats span { font-size: 12px; color: var(--ink-3); }
#qaApp .qa-note { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
/* 10-31：模板 v2「像这样写」示例（sq-ask.js fieldHtml） */
#qaApp .qa-eg { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
#qaApp .qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#qaApp .qa-chip { height: 30px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: 500 13px/1 var(--font); cursor: pointer; }
#qaApp .qa-chip.sel { border-color: var(--sc); color: var(--ink); outline: 1px solid var(--sc); }
#qaApp .sc-field em { font-style: normal; font-size: 12px; }
#qaApp .sc-field em.bad { color: var(--warn); } #qaApp .sc-field em.ok { color: var(--ink-3); }
#qaApp .qa-imgs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#qaApp .qa-img { position: relative; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--line); background: var(--sheet); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); }
#qaApp .qa-img img { width: 100%; height: 100%; object-fit: cover; }
#qaApp .qa-img i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 11px; text-align: center; background: var(--paper); color: var(--ink); }
#qaApp .qa-img button { position: absolute; top: 0; right: 2px; border: 0; background: none; color: var(--ink); cursor: pointer; }
#qaApp .qa-err { outline: 1px solid var(--bad); }
#qaApp .qa-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0; font-size: 14px; line-height: 1.5; }
#qaApp .qa-row { display: block; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; cursor: pointer; }
#qaApp .qa-row.sel .q { color: var(--sc); }
#qaApp .qa-new { color: var(--ok); font-size: 12px; }
#qaApp .qa-thread { margin-top: 20px; }
#qaApp .qa-fields dt { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
#qaApp .qa-fields dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#qaApp .qa-msg { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
#qaApp .qa-msg.qa-teacher { border-left-color: var(--sc); }
#qaApp .qa-msg .who { display: block; font: 500 11px/1.4 var(--font); letter-spacing: .1em; color: var(--ink-3); }
#qaApp .qa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }