/* ==========================================================================
   数智伴学 · 设计系统 v2「数学手账」
   坐标纸底 · 黑板侧栏 · 刻度尺 · 衬线数学字 · 几何构图动效
   流体排版：1366 → 13px / 1920 → 15.6px / 2560 → 18.6px / 3840 → 24.6px
   ========================================================================== */
:root {
  --paper: #F6F5F0;
  --paper-2: #FBFAF6;
  --bg: var(--paper);
  --surface: #FFFFFF;
  --surface-2: #F8F8F4;
  --surface-3: #EEEEE7;
  --border: rgba(23, 38, 46, .09);
  --border-2: rgba(23, 38, 46, .17);
  --ink: #16252D;
  --text: #16252D;
  --text-2: #48585F;
  --text-3: #8B979C;
  --grid: rgba(18, 124, 113, .07);
  --grid-major: rgba(18, 124, 113, .12);

  --primary: #127C71;
  --primary-2: #0F9584;
  --primary-soft: #E3F1EE;
  --primary-ink: #0B5F57;
  --blue: #2F6FDE;
  --teal: #127C71;
  --emerald: #3BA55C;
  --amber: #F2A93B;
  --orange: #F08A3C;
  --coral: #E5604D;
  --rose: #D9485F;
  --gold: #E0B341;
  --sky: #2D9CDB;
  --cyan: #1AA3B8;
  --ochre: #B07D2B;
  --slate: #5B7083;

  /* 黑板 */
  --board: #1C3A34;
  --board-2: #234840;
  --board-3: #2B5249;
  --chalk: #EEF3EA;
  --chalk-2: rgba(238, 243, 234, .62);
  --chalk-y: #F7D774;
  --chalk-b: #9ED0F5;
  --chalk-r: #F6A48F;
  --chalk-g: #A8E0B4;
  --wood: #8A6440;

  /* 纯色为主（沿用旧变量名，模板无需改动） */
  --g-primary: #127C71;
  --g-deep: #1C3A34;
  --g-warm: #F08A3C;
  --g-coral: #E5604D;
  --g-mint: #3BA55C;
  --g-sky: #2F6FDE;
  --g-rose: #E5604D;
  --g-amber: #F2A93B;
  --g-slate: #5B7083;

  --shadow-xs: 0 1px 1px rgba(22, 37, 45, .04);
  --shadow-sm: 0 1px 2px rgba(22, 37, 45, .05), 0 3px 10px -6px rgba(22, 37, 45, .1);
  --shadow: 0 2px 4px rgba(22, 37, 45, .04), 0 16px 32px -18px rgba(22, 37, 45, .28);
  --shadow-lg: 0 30px 70px -28px rgba(22, 37, 45, .45);
  --shadow-primary: 0 6px 16px -10px rgba(18, 124, 113, .8);

  --r-xs: .3rem;
  --r-sm: .45rem;
  --r: .65rem;
  --r-lg: .8rem;
  --side-w: 14rem;
  --top-h: 3.9rem;
  --gap: .95rem;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --math: "KaTeX_Main", "Latin Modern Roman", "Cambria Math", "Times New Roman", serif;
  --num: "KaTeX_Main", "Cambria", "Times New Roman", "PingFang SC", serif;
  --mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "BiauKai", serif;
  --ease: cubic-bezier(.22, .9, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --chalk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { font-size: clamp(13px, calc(0.47vw + 6.6px), 25px); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--paper);
  font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* 坐标纸：细格 + 粗格 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 6rem 6rem, 6rem 6rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, rgba(0, 0, 0, .35) 100%);
  mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, rgba(0, 0, 0, .35) 100%);
}
#fxbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; transition: opacity .6s; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(240, 138, 60, .25); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(23, 38, 46, .18); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(23, 38, 46, .32); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); }
.kai { font-family: var(--kai); }
.ic { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.ic.fill { fill: currentColor; stroke: none; }
.muted { color: var(--text-3); }
.sub { color: var(--text-2); }
.hidden { display: none !important; }
.grad-text { color: var(--primary); }
.katex { font-size: 1.08em; }

/* ============================== 应用骨架 ============================== */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

/* ---- 黑板侧栏 ---- */
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 0 .9rem .8rem; z-index: 30; color: var(--chalk);
  background: var(--chalk-noise), radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 255, .05), transparent 70%), radial-gradient(70% 50% at 80% 90%, rgba(255, 255, 255, .04), transparent 70%), var(--board);
  box-shadow: inset -.32rem 0 0 var(--wood), inset -.42rem 0 0 #6B4B2E, 4px 0 18px -8px rgba(0, 0, 0, .35);
}
.side::after {
  content: "a² + b² = c²     S = πr²     V = abh     C = 2πr"; position: absolute; left: .9rem; right: 1rem; bottom: 9.6rem;
  font-family: var(--kai); font-size: .82rem; line-height: 1.9; color: rgba(238, 243, 234, .1); word-spacing: .2rem; white-space: pre-line;
  transform: rotate(-4deg); pointer-events: none;
}
.brand { display: flex; align-items: center; gap: .65rem; padding: .2rem .9rem .9rem .3rem; position: relative; }
.brand-logo { width: 2.45rem; height: 2.45rem; border-radius: .55rem; display: grid; place-items: center; flex: none; position: relative; color: var(--board); background: var(--chalk-y); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 3px 3px 0 rgba(0, 0, 0, .25); }
.brand-logo svg { width: 1.45rem; height: 1.45rem; position: relative; z-index: 1; stroke-width: 2.2; }
.brand-logo::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: 1px dashed rgba(247, 215, 116, .55); animation: spin 18s linear infinite; }
.brand-name { font-weight: 800; font-size: 1.14rem; letter-spacing: .08em; line-height: 1.2; color: #fff; }
.brand-sub { font-size: .68rem; color: var(--chalk-2); letter-spacing: .08em; }
.nav { overflow-y: auto; overflow-x: hidden; margin-right: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-group { font-size: .7rem; color: var(--chalk-y); letter-spacing: .18em; padding: .85rem .7rem .3rem; opacity: .85; font-family: var(--kai); display: flex; align-items: center; gap: .35rem; }
.nav-group::before { content: "§"; font-family: var(--math); font-size: .9rem; opacity: .8; }
.nav-group::after { content: ""; flex: 1; height: 1px; margin-right: 1rem; background: repeating-linear-gradient(90deg, rgba(238, 243, 234, .28) 0 3px, transparent 3px 7px); }
.nav a {
  position: relative; display: flex; align-items: center; gap: .7rem; padding: .56rem .8rem; margin: .1rem 0;
  border-radius: .55rem 0 0 .55rem; color: rgba(238, 243, 234, .82); font-weight: 500; transition: color .25s, background .25s var(--ease), padding .25s var(--ease);
}
.nav a .ic { font-size: 1.1rem; }
.nav a .nx { margin-left: auto; margin-right: .5rem; font-family: var(--mono); font-size: .66rem; opacity: .4; letter-spacing: .02em; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); padding-left: 1rem; }
.nav a:hover .nx { opacity: .8; }
/* 选中项：像从黑板里抽出来的一张纸页签 */
.nav a.on { background: var(--paper); color: var(--ink); font-weight: 700; z-index: 1; margin-right: 0; box-shadow: -3px 3px 0 rgba(0, 0, 0, .18); }
.nav a.on .ic { color: var(--primary); }
.nav a.on .nx { opacity: .55; color: var(--orange); }
.nav a.on::before, .nav a.on::after { content: ""; position: absolute; right: 0; width: .9rem; height: .9rem; background: transparent; pointer-events: none; }
.nav a.on::before { top: -.9rem; border-bottom-right-radius: .55rem; box-shadow: .3rem .3rem 0 .3rem var(--paper); }
.nav a.on::after { bottom: -.9rem; border-top-right-radius: .55rem; box-shadow: .3rem -.3rem 0 .3rem var(--paper); }
.nav a .dot { margin-left: auto; min-width: 1.2rem; height: 1.2rem; padding: 0 .35rem; border-radius: 1rem; background: var(--coral); color: #fff; font-size: .68rem; display: grid; place-items: center; }
.nav a .new { margin-left: auto; margin-right: .5rem; font-size: .6rem; font-weight: 800; padding: 0 .3rem; border-radius: .25rem; background: var(--chalk-y); color: var(--board); letter-spacing: .04em; }
.nav a.on .new { background: var(--orange); color: #fff; }
.side-foot { margin-top: auto; display: grid; gap: .55rem; padding-right: .95rem; position: relative; z-index: 1; }
.model-card { position: relative; overflow: hidden; border-radius: .6rem; padding: .7rem .8rem; color: var(--chalk); border: 1px dashed rgba(238, 243, 234, .28); background: rgba(0, 0, 0, .12); }
.model-card .t { font-size: .68rem; color: var(--chalk-y); letter-spacing: .1em; font-family: var(--kai); }
.model-card .m { font-weight: 700; font-size: .86rem; margin-top: .1rem; color: #fff; }
.model-card .s { display: flex; align-items: center; gap: .4rem; font-size: .7rem; margin-top: .35rem; color: var(--chalk-2); }
.model-card .quota { margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed rgba(238, 243, 234, .2); cursor: pointer; display: grid; gap: .1rem; }
.model-card .quota .qr { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; font-size: .7rem; color: var(--chalk-2); }
.model-card .quota b { font-family: var(--num); font-size: 1.02rem; color: var(--chalk-g); letter-spacing: .02em; }
.model-card .quota .qu { font-size: .64rem; color: var(--chalk-2); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-card .quota:hover b { color: #fff; }
.model-card .quota.low b { color: var(--chalk-y); } .model-card .quota.low .qu { color: var(--chalk-y); opacity: 1; }
.model-card .quota.err b { color: var(--chalk-r); font-size: .8rem; }
.qchip { cursor: pointer; background: #EAF5F2; color: var(--primary-ink, #0E5F57); border: 1px solid rgba(18, 124, 113, .2); }
.qchip b { font-family: var(--num); margin-left: .2rem; }
.qchip.low { background: #FFF4E8; color: #B4561A; border-color: rgba(240, 138, 60, .35); }
.model-card::after { content: "∑"; position: absolute; right: .55rem; top: .2rem; font-family: var(--math); font-size: 2.2rem; color: rgba(255, 255, 255, .08); }
.pulse { width: .5rem; height: .5rem; border-radius: 50%; background: #6EE7A0; box-shadow: 0 0 0 0 rgba(110, 231, 160, .7); animation: pulse 2s infinite; }
.me { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: .6rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.me .n { font-weight: 600; font-size: .86rem; line-height: 1.2; color: #fff; }
.me .r { font-size: .68rem; color: var(--chalk-2); }
.me a { margin-left: auto; color: var(--chalk-2); padding: .3rem; border-radius: .4rem; }
.me a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ---- 顶栏 + 刻度尺 ---- */
.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: .9rem;
  padding: 0 1.5rem; background: rgba(246, 245, 240, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.top::after {
  /* 刻度尺：mm / 5mm / cm */
  content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem; height: .55rem; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(22, 37, 45, .32) 0 1px, transparent 1px 3rem) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(22, 37, 45, .2) 0 1px, transparent 1px 1.5rem) 0 0 / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, rgba(22, 37, 45, .12) 0 1px, transparent 1px .3rem) 0 0 / 100% 35% no-repeat;
  border-top: 1px solid rgba(22, 37, 45, .22);
  opacity: 0; transition: opacity .3s;
}
.top.scrolled::after { opacity: 1; }
.top.scrolled { background: rgba(251, 250, 246, .92); }
.ruler-ptr { position: fixed; top: calc(var(--top-h) - .05rem); left: var(--side-w); width: 0; height: 0; z-index: 21; pointer-events: none;
  border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-top: .5rem solid var(--orange); transform: translateX(-50%); opacity: 0; transition: opacity .3s; }
.ruler-ptr.on { opacity: 1; }
.ruler-ptr span { position: absolute; top: .45rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .6rem; color: var(--orange); white-space: nowrap; font-weight: 700; }
.top h1 { margin: 0; font-size: 1.32rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2; display: flex; align-items: baseline; gap: .5rem; }
.top h1 .sec { font-family: var(--math); font-style: italic; color: var(--orange); font-weight: 700; font-size: 1.1rem; }
.top .crumb { font-size: .74rem; color: var(--text-3); font-family: var(--mono); letter-spacing: .02em; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: .55rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top-r::-webkit-scrollbar { display: none; }
.top-r > * { flex-shrink: 0; }
/* 标题不被右侧班级切换挤成竖排：标题保持一行，右侧区域放不下时横向滚动 */
.top-t { flex: 0 1 auto; min-width: 0; }
.top-t h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .top h1 > .muted, #clock { display: none; } }
.icon-btn { position: relative; width: 2.3rem; height: 2.3rem; border-radius: .55rem; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; transition: all .2s; }
.icon-btn:hover { color: var(--primary); border-color: rgba(18, 124, 113, .4); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn .badge-dot { position: absolute; top: .35rem; right: .4rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px #fff; }
.menu-btn { display: none; }
.content { padding: .7rem 1.5rem 2.4rem; display: grid; gap: var(--gap); align-content: start; counter-reset: sec; }

/* ============================== 栅格 ============================== */
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.g-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
/* 版面平衡：短的一侧吸顶跟随滚动（不会出现“一边很长、另一边空一大块”）；高度超过一屏时内部滚动 */
.side-sticky { position: sticky; top: calc(var(--top-h) + 1rem); align-self: start; max-height: calc(100vh - var(--top-h) - 2rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-sticky::-webkit-scrollbar { width: 6px; }
/* 等高卡片：卡片拉伸到同排最高，内部 .fill 区域吃掉剩余高度（可滚动） */
.eq { align-items: stretch !important; }
.eq > .card, .card.flexcol { display: flex; flex-direction: column; min-height: 0; }
.eq > .card > div:has(> .empty:only-child) { justify-content: center; }
.eq > .card > .fill, .card.flexcol > .fill { flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-width: thin; }
.g-1-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.row { display: flex; align-items: center; gap: .55rem; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: .55rem; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt { margin-top: var(--gap); }
.gap-s { gap: .4rem; }

/* ============================== 卡片 ============================== */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; min-width: 0; transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
/* 工程制图式角标：悬停时出现。
   角标画在卡片外侧，用 border-image-outset 实现——它只算“墨水溢出”，不计入滚动范围。
   （以前用负 inset 伸出卡片，会给可滚动的卡片 / 列表多撑出 5px 滚动范围：平时多一条滚动条，
   鼠标移入移出时 inset 动画让滚动范围来回变，滚动条和内容跟着闪。） */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s, border-image-outset .35s var(--ease);
  border: .7rem solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23F08A3C' stroke-width='1.6'%3E%3Cpath d='M0 .8H12M.8 0V12M12 .8H24M23.2 0V12M0 23.2H12M.8 12V24M12 23.2H24M23.2 12V24'/%3E%3C/svg%3E") 12 / .7rem / .3rem stretch;
}
.card:hover::after { opacity: 1; border-image-outset: .42rem; }
.card.hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; min-height: 1.9rem; flex-wrap: wrap; row-gap: .4rem; }
.card-h h3 { margin: 0; font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: .5rem; letter-spacing: .01em; }
/* 自动章节编号：01 02 03 … */
.card-h h3::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); font-family: var(--mono); font-size: .66rem; font-weight: 600; color: var(--text-3); letter-spacing: .02em; padding: .05rem .3rem; border: 1px solid var(--border-2); border-radius: .25rem; order: -2; }
.card-h h3 .hic { order: -1; width: 1.75rem; height: 1.75rem; border-radius: .42rem; display: grid; place-items: center; color: #fff; font-size: .9rem; background: var(--primary); position: relative; flex: none; }
.card-h h3 .hic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translate(2.5px, 2.5px); border: 1.5px solid currentColor; color: var(--ink); opacity: .14; z-index: -1; }
.card-h .tip { font-size: .76rem; color: var(--text-3); font-weight: 400; }
.card-h .r { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.card.glass { background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); }
.card.flat { box-shadow: none; }
.card.tint { background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 1.6rem, var(--paper-2); }
.card.tint .card-h h3::before { display: none; }
.chart { width: 100%; height: 16rem; }
.chart.sm { height: 11.5rem; }
.chart.md { height: 13.5rem; }
.chart.lg { height: 19.5rem; }
.chart.xl { height: 23rem; }

/* 入场动画：上浮 + 顶部发丝线绘出 */
.reveal > * { animation: rise .7s var(--ease) both; }
.reveal > *:nth-child(1) { animation-delay: .02s; } .reveal > *:nth-child(2) { animation-delay: .07s; }
.reveal > *:nth-child(3) { animation-delay: .12s; } .reveal > *:nth-child(4) { animation-delay: .17s; }
.reveal > *:nth-child(5) { animation-delay: .22s; } .reveal > *:nth-child(6) { animation-delay: .27s; }
.reveal > *:nth-child(7) { animation-delay: .32s; } .reveal > *:nth-child(8) { animation-delay: .37s; }
.reveal > *:nth-child(n+9) { animation-delay: .42s; }
.content > .card, .content > .grid > .card, .content > .grid > .col > .card { animation: rise .75s var(--ease) both; }
.content > .grid:nth-child(2) > .card, .content > .grid:nth-child(2) > .col > .card { animation-delay: .08s; }
.content > .grid:nth-child(3) > .card, .content > .grid:nth-child(3) > .col > .card { animation-delay: .16s; }
.content > .grid:nth-child(n+4) > .card, .content > .grid:nth-child(n+4) > .col > .card { animation-delay: .24s; }
.pop { animation: popIn .5s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 12% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes popIn { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 160, .6); } 70% { box-shadow: 0 0 0 .5rem rgba(110, 231, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); } }
@keyframes shimmer { from { background-position: -40rem 0; } to { background-position: 40rem 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dash { to { stroke-dashoffset: -40; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================== KPI ============================== */
.kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem .85rem; }
.kpi::before {
  /* 每张卡片一条不同的函数曲线水印 */
  content: ""; position: absolute; right: -.4rem; bottom: -.3rem; width: 58%; height: 70%; pointer-events: none; opacity: .5;
  background: no-repeat right bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 40 Q15 10 30 40 T60 40 T90 40 T120 40' fill='none' stroke='%23127C71' stroke-opacity='.16' stroke-width='1.6'/%3E%3Cpath d='M0 59.5H120M60 0V60' stroke='%23127C71' stroke-opacity='.08'/%3E%3C/svg%3E");
}
.kpi:nth-child(6n+2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M20 58 Q60 -50 100 58' fill='none' stroke='%232F6FDE' stroke-opacity='.16' stroke-width='1.6'/%3E%3Cpath d='M0 58H120M60 0V60' stroke='%232F6FDE' stroke-opacity='.08'/%3E%3C/svg%3E"); }
.kpi:nth-child(6n+3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ccircle cx='86' cy='40' r='30' fill='none' stroke='%23F08A3C' stroke-opacity='.18' stroke-width='1.6'/%3E%3Cpath d='M86 40 L114 30' stroke='%23F08A3C' stroke-opacity='.25' stroke-width='1.4'/%3E%3Ccircle cx='86' cy='40' r='2' fill='%23F08A3C' fill-opacity='.3'/%3E%3C/svg%3E"); }
.kpi:nth-child(6n+4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M50 58 L115 58 L70 8 Z' fill='none' stroke='%23E5604D' stroke-opacity='.18' stroke-width='1.6'/%3E%3Cpath d='M70 8 V58' stroke='%23E5604D' stroke-opacity='.18' stroke-dasharray='3 3'/%3E%3Cpath d='M70 52 h6 v6' fill='none' stroke='%23E5604D' stroke-opacity='.22'/%3E%3C/svg%3E"); }
.kpi:nth-child(6n+5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 58 C40 58 60 50 80 30 S110 2 120 2' fill='none' stroke='%233BA55C' stroke-opacity='.18' stroke-width='1.6'/%3E%3Cpath d='M0 58H120' stroke='%233BA55C' stroke-opacity='.1'/%3E%3C/svg%3E"); }
.kpi:nth-child(6n)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Crect x='56' y='30' width='10' height='28' fill='%23E0B341' fill-opacity='.16'/%3E%3Crect x='72' y='18' width='10' height='40' fill='%23E0B341' fill-opacity='.2'/%3E%3Crect x='88' y='6' width='10' height='52' fill='%23E0B341' fill-opacity='.26'/%3E%3Crect x='104' y='24' width='10' height='34' fill='%23E0B341' fill-opacity='.16'/%3E%3C/svg%3E"); }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 2.4rem; background: var(--kc, var(--primary)); transition: width .6s var(--ease); }
.kpi:hover::after { width: 100%; }
.kpi .k-top { display: flex; align-items: center; gap: .55rem; color: var(--text-2); font-size: .84rem; font-weight: 600; position: relative; }
.kpi .k-ic { width: 2rem; height: 2rem; border-radius: .45rem; display: grid; place-items: center; color: #fff; background: var(--kg, var(--primary)); flex: none; }
.kpi .k-val { font-family: var(--num); font-size: 2.1rem; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; margin-top: .2rem; position: relative; }
.kpi .k-val small { font-family: var(--font); font-size: .82rem; color: var(--text-3); font-weight: 500; margin-left: .25rem; }
.kpi .k-foot { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--text-3); position: relative; }
.kpi .k-spark { position: absolute; right: .7rem; bottom: .6rem; width: 42%; height: 2.4rem; }
.kpi .k-ring { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); }
.delta { display: inline-flex; align-items: center; gap: .15rem; padding: .02rem .4rem; border-radius: .3rem; font-weight: 700; font-size: .74rem; font-family: var(--num); }
.delta.up { color: #237A45; background: #E5F4EA; }
.delta.down { color: #C2412F; background: #FCEAE6; }
.delta.flat { color: var(--text-2); background: var(--surface-3); }

/* 环形进度：量角器刻度外圈 */
.ring { --p: 50; --c: var(--primary); --s: 4.4rem; --t: .5rem; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); transition: --p 1.2s var(--ease); }
.ring::before { content: ""; position: absolute; inset: var(--t); border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(22, 37, 45, .05); }
.ring::after { content: ""; position: absolute; inset: calc(var(--t) + 2px); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(22, 37, 45, .16) 0 .6deg, transparent .6deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(circle, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.ring span { position: relative; font-family: var(--num); font-weight: 700; font-size: calc(var(--s) * .26); z-index: 1; }
.ring span small { font-size: .55em; color: var(--text-3); }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

/* 进度条：直尺刻度底纹 */
.bar { height: .5rem; border-radius: .2rem; overflow: hidden; position: relative;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(22, 37, 45, .1) calc(10% - 1px) 10%), var(--surface-3); }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--bc, var(--primary)); width: 0; transition: width 1.2s var(--ease); position: relative; }
.bar > i::after { content: ""; position: absolute; right: 0; top: -1px; bottom: -1px; width: 2px; background: rgba(0, 0, 0, .25); }
.bar.lg { height: .7rem; }
.row > .bar { flex: 1; min-width: 3rem; }
.bar.shine > i { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%); background-color: var(--bc, var(--primary)); background-size: 10rem 100%; background-repeat: no-repeat; animation: shimmer 2.4s linear infinite; }

/* ============================== 按钮 ============================== */
.btn {
  --h: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; height: var(--h); padding: 0 .95rem;
  border-radius: .5rem; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-weight: 650; font-size: .88rem;
  cursor: pointer; white-space: nowrap; transition: all .22s var(--ease); position: relative; overflow: hidden; user-select: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: rgba(18, 124, 113, .45); color: var(--primary-ink); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.primary { background: var(--primary); color: #fff; border: 1px solid #0D6359; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), var(--shadow-primary); }
.btn.primary:hover { color: #fff; background: #0F6E64; }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-20deg); transition: left .7s; }
.btn.primary:hover::after { left: 130%; }
.btn.soft { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.btn.soft:hover { background: #D5EBE6; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); box-shadow: none; }
.btn.teal { background: var(--emerald); color: #fff; border-color: #2F8A4B; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.rose { background: var(--coral); color: #fff; border-color: #C64C3B; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.amber { background: var(--orange); color: #fff; border-color: #D4732B; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.blue { background: var(--blue); color: #fff; border-color: #2459BA; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.teal:hover, .btn.rose:hover, .btn.amber:hover, .btn.blue:hover { color: #fff; filter: brightness(1.06); }
.btn.sm { --h: 1.95rem; padding: 0 .7rem; font-size: .8rem; border-radius: .42rem; }
.btn.xs { --h: 1.65rem; padding: 0 .55rem; font-size: .74rem; border-radius: .36rem; }
.btn.lg { --h: 2.9rem; padding: 0 1.45rem; font-size: .98rem; border-radius: .6rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn.loading { opacity: .7; pointer-events: none; }
.btn.loading::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ============================== 标签 / 徽标 ============================== */
.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .48rem; border-radius: .3rem; font-size: .74rem; font-weight: 550; line-height: 1.5; white-space: nowrap;
  background: var(--tb, var(--surface-3)); color: var(--tc, var(--text-2)); }
.tag.primary { --tb: #E3F1EE; --tc: #0B6B61; } .tag.teal { --tb: #E3F1EE; --tc: #0B6B61; }
.tag.amber { --tb: #FCEFD9; --tc: #A1600F; } .tag.rose { --tb: #FCE8E4; --tc: #C23B29; }
.tag.sky { --tb: #E3F1FA; --tc: #1D6FA8; } .tag.blue { --tb: #E6EEFC; --tc: #2456B8; }
.tag.ochre { --tb: #F5ECD8; --tc: #8C6420; } .tag.coral { --tb: #FCE9E2; --tc: #C2502F; }
.tag.emerald { --tb: #E5F4EA; --tc: #2B7D47; } .tag.gray { --tb: #EEEEE8; --tc: #56656C; }
.tag.solid { color: #fff; background: var(--primary); }
.tag.lg { font-size: .82rem; padding: .18rem .62rem; }
.lv { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: .3rem; font-size: .72rem; font-weight: 700; }
.lv::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.lv.高 { color: #C23B29; background: #FCE8E4; } .lv.中 { color: #A1600F; background: #FCEFD9; } .lv.低 { color: #2B7D47; background: #E5F4EA; }
.ai-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: .3rem; font-size: .7rem; font-weight: 700; color: #0B6B61; background: #E3F1EE; border: 1px dashed rgba(18, 124, 113, .45); letter-spacing: .04em; }
.ai-tag.rule { background: #EEEEE8; color: var(--text-2); border-color: var(--border-2); }
.stars { color: #F2A93B; letter-spacing: .05em; font-size: .82rem; }
.stars i { color: #E2E2DA; font-style: normal; }

/* ============================== 头像 ============================== */
.av { --s: 2.2rem; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none;
  background: var(--ac, var(--primary)); font-size: calc(var(--s) * .42); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ac, var(--primary)); }
.av.lg { --s: 4.4rem; } .av.md { --s: 2.8rem; } .av.sm { --s: 1.7rem; box-shadow: none; }

/* ============================== 表单 ============================== */
.input, .select, .textarea {
  width: 100%; height: 2.45rem; padding: 0 .85rem; border-radius: .5rem; border: 1px solid var(--border-2); background: var(--surface);
  outline: none; transition: border-color .2s, box-shadow .2s; font-size: .92rem;
}
.textarea { height: auto; min-height: 6rem; padding: .65rem .85rem; resize: vertical; line-height: 1.65;
  background: linear-gradient(transparent calc(1.65em - 1px), rgba(18, 124, 113, .08) 0) 0 .65rem / 100% 1.65em local, var(--surface); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(18, 124, 113, .13); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B979C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem; padding-right: 2.2rem; }
.field { display: grid; gap: .32rem; }
.field > label { font-size: .8rem; color: var(--text-2); font-weight: 650; }
.input-ic { position: relative; }
.input-ic .ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.input-ic .input { padding-left: 2.4rem; }

/* 分段控件 */
.seg { display: inline-flex; padding: .2rem; gap: .12rem; background: var(--surface-3); border-radius: .55rem; position: relative; border: 1px solid var(--border); }
.seg button { border: none; background: transparent; padding: .32rem .78rem; border-radius: .4rem; cursor: pointer; color: var(--text-2); font-weight: 650; font-size: .82rem; transition: all .25s var(--ease); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--primary-ink); box-shadow: 0 1px 2px rgba(22, 37, 45, .12), inset 0 -2px 0 var(--orange); }

/* 选择芯片 */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .3rem .72rem; border-radius: .4rem; border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; font-size: .82rem; color: var(--text-2); transition: all .2s var(--ease); user-select: none; display: inline-flex; align-items: center; gap: .35rem; }
.chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.chip.on { background: var(--primary); color: #fff; border-color: #0D6359; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.chip .m { font-size: .7rem; opacity: .8; }

/* ============================== 表格 ============================== */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.tbl th { text-align: left; font-weight: 650; color: var(--text-3); font-size: .74rem; padding: .5rem .65rem; border-bottom: 1.5px solid var(--ink); white-space: nowrap; letter-spacing: .04em; }
.tbl td { padding: .55rem .65rem; border-bottom: 1px dashed var(--border-2); vertical-align: middle; }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: #F4F8F6; }
.tbl tr:last-child td { border-bottom: none; }
.tbl-wrap { overflow: auto; }

/* ============================== 列表项 ============================== */
.list { display: grid; gap: .5rem; }
.list > * { min-width: 0; }
.li { display: flex; align-items: center; gap: .7rem; padding: .62rem .75rem; border-radius: .55rem; background: var(--surface-2); border: 1px solid transparent; transition: all .25s var(--ease); }
.li:hover { background: #fff; border-color: var(--border-2); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.li .t { font-weight: 650; }
.li .d { font-size: .78rem; color: var(--text-3); }
.li.click { cursor: pointer; }

/* ============================== 模态 / 抽屉 / Toast ============================== */
.mask { position: fixed; inset: 0; z-index: 100; background: rgba(16, 32, 30, .36); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 1.2rem; animation: fadeIn .25s both; }
.mask.closing { animation: fadeOut .2s both; }
.modal { width: min(var(--mw, 40rem), 100%); max-height: min(88vh, 60rem); display: flex; flex-direction: column; background: var(--surface); border-radius: .9rem; box-shadow: var(--shadow-lg); animation: modalIn .38s var(--spring) both; overflow: hidden; }
.modal-h { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--border); position: relative;
  background: linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 1.2rem 100%, var(--paper-2); }
.modal-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }
.modal-h h3 { margin: 0; font-size: 1.06rem; display: flex; align-items: center; gap: .45rem; }
.modal-h .x { margin-left: auto; }
.modal-b { padding: 1.1rem 1.2rem; overflow: auto; }
.modal-f { padding: .8rem 1.2rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .55rem; background: var(--surface-2); }
.drawer-mask { place-items: stretch end; padding: 0; }
.drawer { width: min(var(--dw, 46rem), 100vw); height: 100vh; background: var(--paper); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: drawerIn .45s var(--ease) both; }
.drawer .modal-h { background: var(--surface); }
.drawer .modal-b { flex: 1; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes drawerIn { from { transform: translateX(100%); } }
.toasts { position: fixed; top: 1rem; right: 1rem; z-index: 400; display: grid; gap: .5rem; }
.toast { min-width: 15rem; max-width: 26rem; display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem; border-radius: .55rem; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-lg); border: 1px solid var(--border); border-left: 3px solid var(--emerald); animation: slideIn .4s var(--spring) both; font-size: .88rem; }
.toast .ti { width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; background: var(--emerald); }
.toast.err { border-left-color: var(--coral); } .toast.err .ti { background: var(--coral); }
.toast.warn { border-left-color: var(--orange); } .toast.warn .ti { background: var(--orange); }
.toast.info { border-left-color: var(--primary); } .toast.info .ti { background: var(--primary); }
.toast.out { animation: fadeOut .3s both; }

/* ============================== 骨架 / 空状态 ============================== */
.skel { border-radius: .5rem; background: linear-gradient(90deg, #EEEEE7 0, #F8F8F3 40%, #EEEEE7 80%); background-size: 80rem 100%; animation: shimmer 1.4s linear infinite; min-height: 1rem; }
.empty { display: grid; place-items: center; gap: .5rem; text-align: center; padding: 2.2rem 1rem; color: var(--text-3); }
.empty .ei { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.5rem; position: relative; animation: floaty 3s ease-in-out infinite; }
.empty .ei::after { content: ""; position: absolute; inset: -.4rem; border-radius: 50%; border: 1px dashed rgba(18, 124, 113, .4); animation: spin 14s linear infinite; }

/* ============================== AI 工作流：圆规作图式加载 ============================== */
.ai-flow { display: grid; gap: .9rem; padding: 1.2rem; border-radius: var(--r-lg); border: 1px dashed rgba(18, 124, 113, .45);
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem, var(--paper-2); }
.ai-flow .af-head { display: flex; align-items: center; gap: .8rem; }
.ai-orb { width: 2.8rem; height: 2.8rem; border-radius: 50%; position: relative; flex: none; display: grid; place-items: center; color: var(--primary); }
.ai-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); animation: compass 1.8s linear infinite; }
.ai-orb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; background: var(--orange); transform-origin: 0 50%; animation: spin 1.8s linear infinite; border-radius: 2px; box-shadow: 0 0 0 1px rgba(240, 138, 60, .2); }
@keyframes compass { 0% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); } 25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 0 50%); } 100% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } }
.af-steps { display: grid; gap: .45rem; }
.af-step { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; border-radius: .5rem; background: rgba(255, 255, 255, .75); color: var(--text-3); transition: all .4s var(--ease); font-size: .9rem; border: 1px solid transparent; }
.af-step .n { width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: .74rem; font-weight: 700; flex: none; transition: all .3s; font-family: var(--num); }
.af-step.on { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); border-color: rgba(18, 124, 113, .25); }
.af-step.on .n { background: var(--primary); color: #fff; animation: pulseRing 1.2s infinite; }
.af-step.done { color: var(--text-2); }
.af-step.done .n { background: var(--emerald); color: #fff; }
.af-step .agent { margin-left: auto; font-size: .72rem; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(18, 124, 113, .45); } 100% { box-shadow: 0 0 0 .55rem rgba(18, 124, 113, 0); } }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--orange); margin-left: 1px; }

/* AI 内容块 */
.ai-box { position: relative; padding: .95rem 1.05rem; border-radius: .6rem; background: var(--paper-2); border: 1px solid rgba(18, 124, 113, .16); }
.ai-box h4 { margin: 0 0 .5rem; font-size: .95rem; display: flex; align-items: center; gap: .45rem; }
.ai-box ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .32rem; }
.ai-box p { margin: 0; }
.md { line-height: 1.75; }
.mx { white-space: nowrap; } .mx .katex { font-size: 1.07em; } .formula .mx .katex { font-size: 1.15em; }
.md p { margin: .35rem 0; } .md ul, .md ol { padding-left: 1.3rem; margin: .35rem 0; }
.md code { background: var(--surface-3); padding: .05rem .35rem; border-radius: .3rem; font-size: .9em; }
.md strong { color: var(--primary-ink); }
.md table { border-collapse: collapse; margin: .5rem 0; } .md td, .md th { border: 1px solid var(--border-2); padding: .3rem .6rem; }
.md .katex-display { margin: .5rem 0; }

/* 知识点选择器 */
.kpp { display: grid; gap: .75rem; }
.kpp-units { display: grid; gap: .6rem; max-height: 22rem; overflow: auto; padding-right: .3rem; }
.kpp-unit { padding: .65rem .75rem; border-radius: .55rem; background: var(--surface-2); border: 1px solid var(--border); }
.kpp-unit .u { font-size: .8rem; font-weight: 700; color: var(--text-2); margin-bottom: .42rem; display: flex; align-items: center; gap: .4rem; }
.kpp-unit .u b { width: 1.35rem; height: 1.35rem; border-radius: .3rem; display: grid; place-items: center; background: var(--board); color: var(--chalk-y); font-size: .7rem; font-family: var(--num); }

/* 上传区 */
.drop { position: relative; border: 2px dashed rgba(18, 124, 113, .4); border-radius: .75rem; padding: 1.5rem; display: grid; place-items: center; text-align: center; gap: .5rem; cursor: pointer; transition: all .25s var(--ease); min-height: 12rem; overflow: hidden;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem, var(--paper-2); }
.drop:hover, .drop.over { border-color: var(--primary); background-color: #EEF6F3; }
.drop .di { width: 3.7rem; height: 3.7rem; border-radius: .7rem; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 1.6rem; box-shadow: 4px 4px 0 rgba(22, 37, 45, .12); animation: floaty 3s ease-in-out infinite; }
.drop img { max-width: 100%; max-height: 22rem; border-radius: .5rem; box-shadow: var(--shadow); }
.drop .scan { position: absolute; left: 0; right: 0; height: 3px; top: 0; background: linear-gradient(90deg, transparent, #F08A3C, #127C71, transparent); box-shadow: 0 0 16px 3px rgba(240, 138, 60, .45); animation: scan 1.8s ease-in-out infinite; display: none; }
.drop.scanning .scan { display: block; }
@keyframes scan { 0% { top: 4%; } 50% { top: 94%; } 100% { top: 4%; } }

/* 题目卡片：作业纸样式 */
.qcard { padding: .95rem 1.05rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--surface); transition: all .25s var(--ease); position: relative; }
.qcard:hover { box-shadow: var(--shadow-sm); border-color: rgba(18, 124, 113, .3); }
.qcard .qn { width: 1.8rem; height: 1.8rem; border-radius: .4rem; display: grid; place-items: center; font-weight: 700; color: var(--chalk-y); background: var(--board); font-family: var(--num); flex: none; }
.qcard .stem { font-size: 1rem; line-height: 1.75; font-weight: 500; }
.qcard .ans { margin-top: .5rem; padding: .5rem .7rem; border-radius: .45rem; background: #ECF6F2; color: #0B5F57; font-size: .88rem; border-left: 3px solid var(--primary); }
.qcard.right { border-color: rgba(59, 165, 92, .45); background: linear-gradient(180deg, #F2FAF4, #fff); }
.qcard.wrong { border-color: rgba(229, 96, 77, .4); background: linear-gradient(180deg, #FEF5F3, #fff); }
.mark { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.mark.ok { background: var(--emerald); } .mark.no { background: var(--coral); }
.strike { text-decoration: line-through; color: var(--coral); }

/* 时间线 */
.tl { position: relative; display: grid; gap: .85rem; padding-left: 1.6rem; }
.tl::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 0; border-left: 2px dashed rgba(18, 124, 113, .4); }
.tl-i { position: relative; }
.tl-i::before { content: ""; position: absolute; left: -1.38rem; top: .38rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 0 0 3px rgba(18, 124, 113, .13); }
.tl-i .tt { font-weight: 700; }
.tl-i .td { color: var(--text-2); font-size: .9rem; }

/* 闭环流程条 */
.loop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; position: relative; }
.loop-i { position: relative; padding: .65rem .75rem; border-radius: .6rem; background: rgba(255, 255, 255, .85); border: 1px solid var(--border); display: flex; align-items: center; gap: .55rem; transition: all .3s var(--ease); }
.loop-i:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); background: #fff; }
.loop-i .li-ic { width: 2.05rem; height: 2.05rem; border-radius: .45rem; display: grid; place-items: center; color: #fff; flex: none; }
.loop-i .lt { font-size: .74rem; color: var(--text-3); line-height: 1.2; }
.loop-i .lv2 { font-weight: 700; font-family: var(--num); font-size: 1.12rem; line-height: 1.2; }
.loop-i:not(:last-child)::after { content: "→"; position: absolute; right: -.62rem; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--orange); font-family: var(--math); font-weight: 700; font-size: .95rem; animation: glow 1.6s infinite; }
.loop.l5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ============================== Hero：黑板 ============================== */
.hero { position: relative; overflow: hidden; border-radius: .9rem; padding: 1.25rem 1.4rem; color: var(--chalk);
  background: var(--chalk-noise), radial-gradient(55% 80% at 15% 10%, rgba(255, 255, 255, .06), transparent 70%), radial-gradient(40% 60% at 85% 80%, rgba(255, 255, 255, .04), transparent 70%), var(--board);
  box-shadow: inset 0 0 0 .32rem var(--wood), inset 0 0 0 .42rem #6B4B2E, inset 0 0 50px rgba(0, 0, 0, .35), 0 18px 36px -22px rgba(22, 37, 45, .7); }
.hero .grid-bg { position: absolute; inset: .42rem; border-radius: .5rem; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 1.6rem 1.6rem; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%); mask-image: linear-gradient(90deg, transparent 10%, #000 70%); pointer-events: none; }
.hero::before { content: ""; position: absolute; left: 1.2rem; bottom: .42rem; width: 2.6rem; height: .38rem; border-radius: .15rem .15rem 0 0; background: #F4F1E6; box-shadow: 3.2rem 0 0 var(--chalk-r), 6.4rem 0 0 var(--chalk-b), 9.6rem 0 0 var(--chalk-y); opacity: .9; z-index: 1; }
.hero::after { display: none; }
.hero .glyph { position: absolute; font-weight: 400; color: rgba(238, 243, 234, .1); font-size: 3.2rem; animation: floaty 5s ease-in-out infinite; pointer-events: none; font-family: var(--math); font-style: italic; }
.hero h2 { margin: 0; font-size: 1.5rem; letter-spacing: .04em; position: relative; z-index: 2; color: #fff; font-family: var(--kai); font-weight: 700; }
.hero p { margin: .3rem 0 0; color: var(--chalk-2); position: relative; z-index: 2; }
.hero .seg { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .12); }
.hero .seg button { color: rgba(238, 243, 234, .8); }
.hero .seg button.on { background: var(--chalk); color: var(--board); box-shadow: inset 0 -2px 0 var(--orange); }
.hero .btn { position: relative; z-index: 2; }
.hero .btn.glass { background: transparent; color: var(--chalk); border: 1.5px dashed rgba(238, 243, 234, .45); }
.hero .btn.glass:hover { background: rgba(255, 255, 255, .08); border-style: solid; color: #fff; }
.hero .tag { position: relative; z-index: 2; }
.hero > *:not(.grid-bg):not(.glyph):not(.fx-chalk):not(.fx-cross) { position: relative; z-index: 2; }
.insight { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .85rem; margin-top: .85rem; border-radius: .45rem; background: rgba(0, 0, 0, .16); border: 1px dashed rgba(247, 215, 116, .4); position: relative; z-index: 2; font-size: .9rem; color: var(--chalk); }
.insight b { color: var(--chalk-y); }
.insight .ic { color: var(--chalk-y); }
/* JS 注入的粉笔几何构图 */
.fx-chalk { position: absolute; right: 1.2rem; top: 0; bottom: 0; width: min(46%, 30rem); pointer-events: none; z-index: 1; opacity: .9; }
.fx-chalk .s { fill: none; stroke: var(--chalk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .38; }
.fx-chalk .y { stroke: var(--chalk-y); opacity: .7; }
.fx-chalk .b { stroke: var(--chalk-b); opacity: .6; }
.fx-chalk .r { stroke: var(--chalk-r); opacity: .6; }
.fx-chalk .d { stroke-dasharray: 4 5; }
.fx-chalk text { fill: var(--chalk); opacity: .5; font-family: var(--math); font-style: italic; font-size: 13px; }
.fx-chalk .draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: draw 2.4s var(--ease) forwards; }
.fx-cross { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; }
.hero:hover .fx-cross { opacity: 1; }
.fx-cross i { position: absolute; background: rgba(247, 215, 116, .35); }
.fx-cross .h { left: 0; right: 0; height: 1px; }
.fx-cross .v { top: 0; bottom: 0; width: 1px; }
.fx-cross b { position: absolute; font: 600 .7rem var(--mono); color: var(--chalk-y); background: rgba(0, 0, 0, .25); padding: .05rem .35rem; border-radius: .25rem; transform: translate(.5rem, -1.5rem); white-space: nowrap; }

/* 看板 */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.kb-col { background: rgba(255, 255, 255, .6); border: 1px dashed var(--border-2); border-radius: .8rem; padding: .75rem; display: grid; gap: .65rem; min-height: 14rem; }
.kb-col .kb-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; padding: .2rem .3rem; }
.kb-col .kb-h .cnt { margin-left: auto; font-family: var(--num); font-size: .82rem; padding: .02rem .5rem; border-radius: .3rem; background: var(--surface-3); color: var(--text-2); }
.kb-card { background: #fff; border-radius: .6rem; padding: .85rem; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: all .25s var(--ease); display: grid; gap: .5rem; }
.kb-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kb-card .d { font-size: .76rem; color: var(--text-3); }

/* 消息 / 聊天 */
.chat-wrap { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--gap); height: calc(100vh - var(--top-h) - 2.6rem); min-height: 34rem; }
.chat-main { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-list { flex: 1; overflow: auto; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .95rem; scroll-behavior: smooth;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 1.8rem; }
.msg { display: flex; gap: .65rem; max-width: 86%; animation: rise .4s var(--ease) both; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble { padding: .7rem .95rem; border-radius: .7rem; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.7; min-width: 3rem; }
.msg.me .bubble { background: var(--primary); color: #fff; border: none; border-top-right-radius: .2rem; }
.msg.bot .bubble { border-top-left-radius: .2rem; background: #fff; box-shadow: var(--shadow-xs); }
.chat-input { display: flex; gap: .55rem; padding: .85rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); align-items: flex-end; }
.chat-input .textarea { min-height: 2.7rem; max-height: 9rem; height: 2.7rem; resize: none; background: var(--surface); }

/* 徽章 */
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bdg { display: grid; justify-items: center; gap: .3rem; padding: .75rem .5rem; border-radius: .6rem; background: var(--surface-2); text-align: center; transition: all .3s var(--ease); border: 1px solid transparent; }
.bdg:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--shadow-sm); border-color: var(--border); }
.bdg .bi { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; color: #fff; font-size: 1.25rem; background: #C3CACC; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.bdg.got .bi { background: var(--orange); animation: floaty 3s ease-in-out infinite; }
.bdg .bn { font-weight: 700; font-size: .84rem; } .bdg .bd { font-size: .7rem; color: var(--text-3); }

/* 提示卡（分层提示） */
.hint { position: relative; border-radius: .6rem; padding: .85rem .95rem; border: 1px solid var(--border); background: var(--surface-2); transition: all .4s var(--ease); }
.hint.locked { cursor: pointer; background: repeating-linear-gradient(135deg, #F6F6F1 0 10px, #EEEEE7 10px 20px); color: var(--text-3); }
.hint.locked:hover { border-color: var(--primary); color: var(--primary-ink); }
.hint.open { background: #fff; box-shadow: var(--shadow-sm); border-color: rgba(18, 124, 113, .3); animation: popIn .45s var(--spring); }
.hint .hl { font-weight: 700; font-size: .82rem; color: var(--primary-ink); margin-bottom: .2rem; display: flex; gap: .4rem; align-items: center; }

/* ============================== 黑板组件（课堂 / 实验室通用） ============================== */
.cb { position: relative; border-radius: .8rem; color: var(--chalk); overflow: hidden;
  background: var(--chalk-noise), radial-gradient(60% 70% at 25% 20%, rgba(255, 255, 255, .06), transparent 70%), radial-gradient(50% 60% at 80% 85%, rgba(255, 255, 255, .035), transparent 70%), var(--board);
  box-shadow: inset 0 0 0 .5rem var(--wood), inset 0 0 0 .62rem #6B4B2E, inset 0 0 60px rgba(0, 0, 0, .4), 0 20px 40px -24px rgba(22, 37, 45, .75); }
.cb-ledge { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: .62rem; display: flex; align-items: flex-end; gap: .7rem; pointer-events: none; }
.cb-ledge i { width: 2.4rem; height: .36rem; border-radius: .15rem .15rem 0 0; background: #F4F1E6; }
.cb-ledge i:nth-child(2) { background: var(--chalk-y); width: 1.6rem; } .cb-ledge i:nth-child(3) { background: var(--chalk-r); width: 1.9rem; }
.cb-ledge u { margin-left: auto; width: 3.6rem; height: .5rem; border-radius: .15rem; background: linear-gradient(#5B4632 0 45%, #D9D3C2 45%); }
.chalk-t { font-family: var(--kai); color: #fff; text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 6px rgba(255, 255, 255, .12); }
.chalk-y { color: var(--chalk-y); } .chalk-b { color: var(--chalk-b); } .chalk-r { color: var(--chalk-r); } .chalk-g { color: var(--chalk-g); }

/* ============================== 数字老师（Live2D 浮窗） ============================== */
.tutor-dock { position: fixed; right: 1.1rem; bottom: 0; z-index: 90; width: 15rem; height: 19rem; pointer-events: none; transition: transform .5s var(--ease), opacity .4s; }
.tutor-dock.min { transform: translateY(calc(100% - 4.4rem)); }
.tutor-dock .td-stage { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
.tutor-dock .td-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.tutor-dock .td-plate { position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%); display: flex; align-items: center; gap: .35rem; padding: .25rem .3rem .25rem .7rem; border-radius: 2rem; background: var(--board); color: var(--chalk); font-size: .76rem; white-space: nowrap; pointer-events: auto; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1); z-index: 3; }
.tutor-dock .td-plate b { font-family: var(--math); font-style: italic; color: var(--chalk-y); font-size: .95rem; }
.tutor-dock .td-plate button { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, .1); color: var(--chalk); display: grid; place-items: center; cursor: pointer; font-size: .8rem; }
.tutor-dock .td-plate button:hover { background: var(--orange); color: #fff; }
.tutor-dock .td-plate button.off { opacity: .45; }
.tutor-dock .td-bubble { position: absolute; right: calc(100% - 2.2rem); bottom: 11.5rem; width: max-content; max-width: 19rem; padding: .65rem .85rem; border-radius: .7rem .7rem .2rem .7rem; background: #fff; color: var(--ink); font-size: .86rem; line-height: 1.65; box-shadow: var(--shadow-lg); border: 1px solid var(--border-2); pointer-events: auto; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: all .35s var(--spring); z-index: 2; }
.tutor-dock .td-bubble.on { opacity: 1; transform: none; }
.tutor-dock .td-bubble::after { content: ""; position: absolute; right: -.45rem; bottom: .6rem; border: .45rem solid transparent; border-left-color: #fff; border-right: 0; }
.tutor-dock .td-bubble .who { font-size: .7rem; color: var(--orange); font-weight: 700; margin-bottom: .1rem; display: flex; align-items: center; gap: .3rem; }
.tutor-dock .td-bubble .act { display: flex; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.tutor-dock .td-halo { position: absolute; left: 8%; right: 8%; bottom: 1.9rem; height: 1.4rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 37, 45, .22), transparent); }
.tutor-dock .td-fallback { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 3rem; }
.tutor-dock.min .td-bubble { opacity: 0 !important; pointer-events: none; }
.tutor-dock.hidden-dock { display: none; }
.tutor-dock .td-stage canvas { opacity: 0; transition: opacity .5s; } .tutor-dock .td-stage canvas.in { opacity: 1; }
.tutor-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 91; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: none; cursor: pointer; display: none; place-items: center;
  background: var(--board); color: var(--chalk-y); font: italic 700 1.6rem var(--math); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--orange), var(--shadow-lg); }
.tutor-fab.on { display: grid; animation: popIn .4s var(--spring); }
.tutor-fab::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 1px dashed rgba(240, 138, 60, .6); animation: spin 12s linear infinite; }

/* 打印 */
@media print {
  .side, .top, .no-print, .toasts, .tutor-dock, .tutor-fab, #fxbg, .ruler-ptr { display: none !important; }
  .app { display: block; } body::before { display: none; } body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; } .content { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================== 响应式 ============================== */
@media (min-width: 2200px) { :root { --gap: 1.1rem; } }
@media (max-width: 1500px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loop-i:nth-child(3)::after { display: none; }
  .loop.l5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-chalk { width: 40%; }
}
@media (max-width: 1200px) {
  :root { --side-w: 4.4rem; }
  .side { padding: 1rem 0 1rem .5rem; }
  .side::after { display: none; }
  .brand-name, .brand-sub, .nav-group, .nav a span, .nav a .nx, .nav a .new, .model-card, .me .n, .me .r, .nav a .dot { display: none; }
  .brand { justify-content: center; padding: .2rem .5rem .8rem 0; }
  .nav a { justify-content: center; padding: .7rem; }
  .nav a:hover { padding-left: .7rem; }
  .side-foot { padding-right: .5rem; }
  .me { justify-content: center; flex-direction: column; padding: .4rem; }
  .me a { margin: 0; }
  .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2, .g-3-2, .g-2-3, .g-1-1-2 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
  .side-sticky { position: static; max-height: none; overflow: visible; }
  .chat-wrap { grid-template-columns: minmax(0, 1fr); }
  .chat-wrap > .chat-side { display: none; }
  .fx-chalk { opacity: .45; }
  .tutor-dock { width: 12rem; height: 15rem; }
}
@media (max-width: 760px) {
  html { font-size: 15px; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 16rem; transform: translateX(-105%); transition: transform .35s var(--ease); box-shadow: var(--shadow-lg); padding: 1rem .8rem; }
  .side.open { transform: none; }
  .side .brand-name, .side .brand-sub, .side .nav-group, .side .nav a span, .side .model-card, .side .me .n, .side .me .r { display: initial; }
  .side .nav a { justify-content: flex-start; border-radius: .55rem; }
  .nav a.on::before, .nav a.on::after { display: none; }
  .menu-btn { display: grid; }
  .top { padding: 0 1rem; } .top .crumb { display: none; }
  /* 筛选标签/班级切换在手机上换到第二行整行显示，标题不再被挤成“错题:”“我的作业”半截 */
  .top:has(> .top-r > .seg, > .top-r > #classSeg) { height: auto; min-height: var(--top-h); flex-wrap: wrap; row-gap: .4rem; padding-block: .55rem; }
  .top:has(> .top-r > .seg, > .top-r > #classSeg) > .top-t { flex: 1 1 auto; }
  .top:has(> .top-r > .seg, > .top-r > #classSeg) > .top-r { flex: 1 0 100%; margin-left: 0; }
  .content { padding: .6rem 1rem 2rem; }
  .g2, .g3, .g4, .g5, .g6, .kanban, .badge-grid { grid-template-columns: minmax(0, 1fr); }
  /* 手机上 KPI 小卡片两列排，避免 4 张大卡竖排占满几屏 */
  .g3:has(> .kpi), .g4:has(> .kpi), .g5:has(> .kpi), .g6:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop, .loop.l5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop-i::after { display: none; }
  .hero h2 { font-size: 1.25rem; }
  .fx-chalk { display: none; }
  .tutor-dock { display: none; }
}

/* ============================== 板书条目（board.js） ============================== */
.b-item { margin: .15rem 0 .35rem; animation: wipe var(--wd, .8s) cubic-bezier(.4, .1, .4, 1) both; position: relative; }
.b-item.instant, .b-item.instant .bd, .b-item.instant .bf { animation-duration: .01s !important; animation-delay: 0s !important; }
.b-title { font-size: 2.1rem; letter-spacing: .08em; display: inline-block; padding-bottom: .35rem; }
.b-title .chalk-t { font-weight: 700; }
.b-title .ul { position: absolute; left: 0; bottom: 0; width: 100%; height: .5rem; }
.b-text { font-size: 1.32rem; line-height: 1.75; }
.b-step { display: flex; gap: .55rem; align-items: baseline; font-size: 1.22rem; line-height: 1.7; }
.b-step .sn { color: var(--chalk-y); font-family: var(--kai); font-size: 1.15rem; flex: none; }
.b-formula .fx { color: var(--chalk-y); font-size: 1.55rem; text-shadow: 0 0 6px rgba(247, 215, 116, .25); }
.b-formula .katex-display { margin: .25rem 0; text-align: left; }
.b-formula .katex-display > .katex { text-align: left; }
.b-visual { animation: fadeIn .4s both; }
.b-svg { width: 100%; max-width: 34rem; max-height: 17rem; display: block; overflow: visible; }
.b-svg .bt { font-family: var(--kai); }
.b-svg .bf { opacity: 0; animation: fadeIn .5s forwards; }
@keyframes bdraw { to { stroke-dashoffset: 0; } }
.b-table { border-collapse: collapse; font-family: var(--kai); font-size: 1.05rem; color: var(--chalk); margin: .3rem 0; }
.b-table th, .b-table td { border: 1.5px solid rgba(238, 243, 234, .55); padding: .3rem .9rem; text-align: center; }
.b-table th { color: var(--chalk-y); }
.cb .katex { color: inherit; }