/* ============================================================
   theming.cn · 个人主页  ·  华丽玻璃拟态版
   零依赖 · 自适应深浅色 · 移动端优先
   ============================================================ */

/* 流光边框用的旋转角度（现代浏览器生效，旧浏览器优雅降级） */
@property --ang{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root{
  /* —— 浅色 —— */
  --bg:        #eef1fb;
  --bg-deep:   #e3e8f8;
  --surface:   rgba(255,255,255,.66);
  --surface-2: rgba(255,255,255,.82);
  --ink:       #0c1430;
  --ink-2:     #46527c;
  --ink-3:     #7d89a8;
  --line:      rgba(18,30,64,.12);
  --line-2:    rgba(18,30,64,.07);
  --brand:     #3b5bff;
  --brand-2:   #8b3bff;   /* 紫，让渐变更丰富 */
  --brand-soft:rgba(59,91,255,.12);
  --accent:    #00b6a6;
  --accent-soft:rgba(0,182,166,.12);
  --glass-brd: rgba(255,255,255,.55);
  --grid-line: rgba(20,30,70,.05);
  --shadow-sm: 0 1px 2px rgba(15,25,55,.06);
  --shadow:    0 12px 34px -20px rgba(20,35,80,.45), inset 0 1px 0 rgba(255,255,255,.35);
  --shadow-lg: 0 28px 60px -28px rgba(30,45,110,.55), inset 0 1px 0 rgba(255,255,255,.4);
  --r:         22px;
  --maxw:      1120px;
  --glow-brand: rgba(59,91,255,.50);
  --glow-purple:rgba(139,59,255,.40);
  --glow-accent:rgba(0,182,166,.42);
  --blob-op:.42;
  --blob-blend:normal;
  --card-sheen:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 28%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #05070f;
    --bg-deep:   #070b18;
    --surface:   rgba(22,30,52,.55);
    --surface-2: rgba(28,38,64,.62);
    --ink:       #eef2ff;
    --ink-2:     #aab6da;
    --ink-3:     #6c799c;
    --line:      rgba(140,160,215,.16);
    --line-2:    rgba(140,160,215,.09);
    --brand:     #6f8bff;
    --brand-2:   #b07bff;
    --brand-soft:rgba(111,139,255,.18);
    --accent:    #34e3d2;
    --accent-soft:rgba(52,227,210,.16);
    --glass-brd: rgba(150,170,220,.20);
    --grid-line: rgba(150,170,220,.07);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 14px 40px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.10);
    --shadow-lg: 0 32px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12);
    --glow-brand: rgba(111,139,255,.55);
    --glow-purple:rgba(176,123,255,.50);
    --glow-accent:rgba(52,227,210,.50);
    --blob-op:.60;
    --blob-blend:screen;
    --card-sheen:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 26%);
  }
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.72 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
       "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   流动渐变光晕背景
   ============================================================ */
.bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-deep), transparent 60%);
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:var(--blob-op); mix-blend-mode:var(--blob-blend);
}
@supports not (mix-blend-mode: screen){ .blob{ opacity:.4; } }
.b1{
  width:48vw; height:48vw; left:-10vw; top:-14vw;
  background:radial-gradient(circle at 50% 50%, var(--glow-brand), transparent 68%);
  animation:float1 19s ease-in-out infinite;
}
.b2{
  width:42vw; height:42vw; right:-12vw; top:2vh;
  background:radial-gradient(circle at 50% 50%, var(--glow-purple), transparent 68%);
  animation:float2 23s ease-in-out infinite;
}
.b3{
  width:40vw; height:40vw; left:26vw; top:46vh;
  background:radial-gradient(circle at 50% 50%, var(--glow-accent), transparent 68%);
  animation:float3 21s ease-in-out infinite;
}
.grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(125% 85% at 50% 0%, #000, transparent 76%);
          mask:radial-gradient(125% 85% at 50% 0%, #000, transparent 76%);
  opacity:.7;
}
@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vw,4vh) scale(1.12); }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vw,6vh) scale(1.08); }
}
@keyframes float3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4vw,-5vh) scale(1.15); }
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:1; }
a{ color:inherit; text-decoration:none; }

/* ============================================================
   顶部导航 · 玻璃
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(190%) blur(18px);
  -webkit-backdrop-filter:saturate(190%) blur(18px);
  background:color-mix(in srgb, var(--bg) 66%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.stuck{
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(10,20,60,.6);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:16.5px; }
.brand-dot{
  width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow:0 0 0 4px var(--brand-soft), 0 0 14px var(--glow-brand);
}
.brand-tld{ color:var(--ink-3); font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:6px; font-size:14.5px; }
.nav-links > a{
  padding:8px 14px; border-radius:11px; color:var(--ink-2);
  transition:color .18s, background .18s, border-color .18s;
}
.nav-links > a:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-cta{
  color:var(--brand) !important;
  border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  background:var(--brand-soft);
  font-weight:650;
}
.nav-cta:hover{ background:color-mix(in srgb, var(--brand) 18%, transparent) !important; }

/* 右上角「软件下载」—— 唯一的实心渐变按钮 */
.nav-dl{
  display:inline-flex; align-items:center; gap:6px;
  color:#fff !important; font-weight:700;
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--brand), var(--brand-2) 55%, var(--accent));
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--brand) 90%, transparent);
  transition:transform .16s, box-shadow .2s, filter .18s;
}
.nav-dl:hover{ filter:brightness(1.08) saturate(1.1); box-shadow:0 16px 30px -14px color-mix(in srgb, var(--brand) 95%, transparent); }
.nav-dl:active{ transform:translateY(1px); }
.nav-dl svg{ width:14px; height:14px; flex:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:84px 26px 44px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 24px; padding:7px 15px 7px 11px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13px; font-weight:650; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--glow-accent);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--glow-accent); }
  70%{ box-shadow:0 0 0 12px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

.hero-title{
  margin:0 0 24px;
  font-size:clamp(32px, min(5vw, 6.4vh), 60px);
  line-height:1.18; letter-spacing:-.035em; font-weight:850;
}
.hero-title em{
  font-style:normal;
  white-space:nowrap; /* 渐变强调半句不拆行，避免窄屏只剩一个字掉到下一行 */
  background:linear-gradient(100deg, var(--brand), var(--brand-2) 45%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 18px color-mix(in srgb, var(--brand) 35%, transparent));
}

.hero-sub{
  margin:0 0 34px; max-width:660px;
  font-size:clamp(15px, 1.15vw, 17.5px); color:var(--ink-2);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:54px; }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 24px; border-radius:13px;
  font-size:15px; font-weight:700; cursor:pointer;
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:transform .16s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2) 60%, var(--accent));
  box-shadow:0 14px 30px -14px color-mix(in srgb, var(--brand) 90%, transparent);
}
.btn-primary:hover{ box-shadow:0 20px 40px -16px color-mix(in srgb, var(--brand) 95%, transparent); transform:translateY(-1px); }
.btn-ghost{
  border-color:var(--line); background:var(--surface); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ border-color:color-mix(in srgb, var(--brand) 50%, transparent); color:var(--brand); }

/* 主按钮流光描边 */
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from var(--ang), transparent 0deg, #fff 70deg, transparent 150deg, transparent 210deg, var(--accent) 300deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s; animation:spin 5s linear infinite;
}
.btn-primary:hover::before{ opacity:.9; }
@keyframes spin{ to{ --ang:360deg; } }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.hero-stats li{
  flex:1 1 180px; padding:24px 28px 0 0;
  display:flex; align-items:baseline; gap:10px;
}
.hero-stats b{
  font-size:clamp(26px, 2.6vw, 34px); font-weight:850; letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 12px color-mix(in srgb, var(--brand) 28%, transparent));
}
.hero-stats span{ font-size:13.5px; color:var(--ink-3); }

/* ============================================================
   作品区
   ============================================================ */
.works{ padding:48px 26px 20px; }

.sec-head{ margin-bottom:30px; }
.sec-head h2{
  position:relative; display:inline-block;
  margin:0 0 10px;
  font-size:clamp(22px, 2.2vw, 28px); font-weight:820; letter-spacing:-.03em;
}
.sec-head h2::after{
  content:""; position:absolute; left:0; bottom:-9px; width:54px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow:0 2px 10px color-mix(in srgb, var(--brand) 40%, transparent);
}
.sec-head p{ margin:14px 0 0; color:var(--ink-2); font-size:14.5px; }

.card{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:74px minmax(0,1fr) 92px; gap:26px; align-items:start;
  margin-bottom:18px; padding:30px 32px;
  border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface);
  background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
/* 鼠标跟随光斑 */
.card::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--brand) 38%, var(--line)); }
.card:hover::after{ opacity:1; }

/* 流光边框（已上线卡常驻弱光，所有卡 hover 出强光） */
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ang), transparent 0deg, var(--brand) 70deg, var(--brand-2) 130deg, var(--accent) 200deg, transparent 290deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s; animation:spin 7s linear infinite;
}
.card:hover::before{ opacity:1; }
.card-live{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card-live::before{ opacity:.55; }
.card-live:hover{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.card-clickable{ cursor:pointer; }

.card-left{ display:flex; flex-direction:column; gap:13px; }
.card-no{
  font-size:13px; font-weight:850; letter-spacing:.12em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:3px;
}
.card-tags{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; }

.tag{
  display:inline-block; padding:4px 10px; border-radius:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.tag-live{
  background:var(--accent-soft); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 38%, transparent);
}
.tag-live::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:5px; vertical-align:1px;
  box-shadow:0 0 8px var(--glow-accent);
}

.card-body h3{
  margin:0 0 9px;
  font-size:clamp(18px, 1.75vw, 22px); font-weight:800; letter-spacing:-.025em;
}
.card-lead{
  margin:0 0 13px; font-size:15px; font-weight:700; color:var(--brand);
}
.card-desc{ margin:0 0 18px; color:var(--ink-2); font-size:14.5px; max-width:680px; }

.feat{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 26px; margin:0 0 4px; padding:0; list-style:none;
}
.feat li{
  position:relative; padding-left:20px;
  font-size:13.5px; color:var(--ink-2);
}
.feat li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:3px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow:0 0 8px color-mix(in srgb, var(--brand) 40%, transparent);
}
.card-live .feat li::before{ background:linear-gradient(135deg, var(--accent), var(--brand-2)); }
.feat-muted li::before{ background:var(--line) !important; }

.card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px; padding:9px 0;
  font-size:14px; font-weight:700; color:var(--brand);
}
.card-live .card-link{ color:var(--accent); }
.card-link svg{ transition:transform .18s; }
.card-link:hover svg{ transform:translateX(4px); }

.card-icon{
  color:var(--brand); justify-self:end;
  filter:drop-shadow(0 8px 18px color-mix(in srgb, var(--brand) 35%, transparent));
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.card-icon svg{ width:78px; height:78px; }
.card-live .card-icon{ color:var(--accent); filter:drop-shadow(0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent)); }
.card:hover .card-icon{ transform:scale(1.08) rotate(-4deg); }

/* ============================================================
   免费开班
   ============================================================ */
.newclass{ padding:36px 26px 0; }
.nc-box{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px;
  padding:30px 36px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background:
    radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%),
    var(--surface);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.nc-box::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ang), transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.6; animation:spin 9s linear infinite;
}
.nc-box h2{ margin:0 0 8px; font-size:clamp(18px, 1.8vw, 23px); font-weight:820; letter-spacing:-.03em; }
.nc-box p{ margin:0; color:var(--ink-2); font-size:14.5px; max-width:640px; }
.nc-btn{ flex:none; }

/* 定制服务横条：把本地 --accent 换成暖橙，边框/光晕跟着变，按钮用 ghost 不抢主 CTA */
.newclass--cs{ padding:20px 26px 0; }
.nc-box--cs{ --accent:#ee6a4d; }

/* ============================================================
   关于
   ============================================================ */
.about{ padding:64px 26px 20px; }
.about-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; }
.about h2{ margin:0 0 18px; font-size:clamp(22px, 2.2vw, 28px); font-weight:820; letter-spacing:-.03em; }
.about p{ margin:0 0 16px; color:var(--ink-2); font-size:14.8px; }
.about b{ color:var(--ink); font-weight:750; }

.about-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.about-points li{ display:flex; gap:15px; }
.about-points b{ display:block; font-size:15px; font-weight:750; margin-bottom:2px; }
.about-points p{ margin:0; font-size:13.8px; color:var(--ink-3); }
.dot{
  flex:none; width:11px; height:11px; margin-top:7px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow:0 0 10px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* ============================================================
   CTA
   ============================================================ */
.cta{ padding:60px 26px 80px; }
.cta-box{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  padding:40px 44px; border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
    radial-gradient(130% 170% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.cta-box::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ang), transparent, color-mix(in srgb, var(--brand) 50%, transparent), transparent 50%, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; animation:spin 11s linear infinite;
}
.cta-box h2{ margin:0 0 8px; font-size:clamp(19px, 1.9vw, 25px); font-weight:820; letter-spacing:-.03em; }
.cta-box p{ margin:0; color:var(--ink-2); font-size:14.5px; }

.contact{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:11px; }
.contact li{
  display:flex; align-items:baseline; gap:9px;
  padding:11px 17px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface-2);
  backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
  font-size:14px; transition:transform .18s, border-color .18s;
}
.contact li:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--brand) 40%, transparent); }
.contact b{ font-weight:750; color:var(--ink); white-space:nowrap; }
.contact span{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
@media (max-width: 520px){
  .contact{ width:100%; }
  .contact li{ flex:1 1 100%; justify-content:space-between; }
}

/* ============================================================
   页脚
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:28px 0; }
.foot-in{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); }
.foot-sep{ opacity:.5; }

/* ============================================================
   滚动出现（华丽版：位移 + 缩放 + 去模糊）
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px) scale(.985); filter:blur(6px); }
.reveal.in{
  opacity:1; transform:none; filter:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1), filter .7s cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 860px){
  .hero{ padding:54px 22px 28px; }
  .wrap{ padding:0 22px; }
  .about-grid{ grid-template-columns:1fr; gap:34px; }
  .cta-box{ padding:30px 26px; }
  .card{ grid-template-columns:64px minmax(0,1fr); gap:18px; padding:24px 22px; }
  .card-icon{ display:none; }
  .feat{ grid-template-columns:1fr; }
  .nav-links > a:not(.nav-cta):not(.nav-dl){ display:none; }
}

@media (max-width: 620px){
  .hero{ padding:46px 22px 22px; }
  .hero-title{ font-size:clamp(26px, 7.6vw, 34px); line-height:1.28; letter-spacing:-.026em; }
  .hero-title .brk{ display:none; }
  .hero-sub{ font-size:15px; }
  .hero-actions{ margin-bottom:42px; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
  .nav-links > .nav-cta{ display:none; }
  .nav-dl{ padding:8px 13px; }
}

@media (max-width: 520px){
  .brand{ font-size:15px; gap:7px; }
  .brand-dot{ width:9px; height:9px; box-shadow:0 0 0 3px var(--brand-soft), 0 0 12px var(--glow-brand); }
  .hero-stats li{ flex:1 1 0; min-width:0; flex-direction:column; align-items:flex-start; gap:2px; padding:18px 10px 0 0; }
  .hero-stats b{ font-size:25px; }
  .hero-stats span{ font-size:12.5px; line-height:1.45; }
  .card{ grid-template-columns:1fr; gap:10px; }
  .card-left{ flex-direction:row; align-items:center; gap:12px; }
  .card-tags{ flex-direction:row; flex-wrap:wrap; }
  .card-no{ padding-top:0; }
  .cta-box{ justify-content:flex-start; }
  .newclass{ padding:22px 22px 0; }
  .newclass--cs{ padding:16px 22px 0; }
  .nc-box{ padding:24px 22px; }
  .nc-btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; }
  html{ scroll-behavior:auto; }
  .pulse{ animation:none; }
  .blob{ animation:none; }
  .card::before, .btn-primary::before, .nc-box::before, .cta-box::before{ animation:none; opacity:.4; }
}

/* ============================================================
   门户首屏 HERO：压成「一行标题 + 一行摘要」，把版面让给三个板块
   ============================================================ */
.hero-portal{ padding:34px 26px 8px; }
.hero-portal .eyebrow{ margin-bottom:14px; }
.hero-portal .hero-title{
  margin-bottom:12px;
  font-size:clamp(29px, 4.1vw, 50px); line-height:1.16; letter-spacing:-.035em;
}
.hero-portal .hero-sub{ margin-bottom:0; font-size:clamp(15px, 1.1vw, 17px); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  margin:16px 0 0; padding:0; list-style:none;
  font-size:13.5px; color:var(--ink-3);
}
.hero-meta li{ display:flex; align-items:baseline; gap:6px; }
.hero-meta b{
  font-size:18px; font-weight:850; letter-spacing:-.02em;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   门户 · 板块入口面板
   扩展方法：复制一个 .panel 放进去，再把 --cols 数字 +1
   ============================================================ */
.portal-sec{ padding:12px 26px 6px; }
.portal{
  display:grid; gap:22px; align-items:stretch;
  grid-template-columns:repeat(var(--cols,3), minmax(0,1fr));
}
.panel{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
a.panel:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--brand) 38%, var(--line));
}

/* —— 标识区：渐变带 + 点阵底 + 渐变徽标（想放真实截图就加 <img>） —— */
.panel-mark{
  position:relative; height:138px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(88% 118% at 50% 0%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%),
    linear-gradient(160deg, var(--bg-deep), var(--surface-2));
}
.panel-mark::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--grid-line) 1.2px, transparent 1.2px);
  background-size:16px 16px;
}
.panel-mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mark-tile{
  position:relative; z-index:1;
  width:68px; height:68px; border-radius:19px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--brand) 80%, transparent),
             inset 0 1px 0 rgba(255,255,255,.38);
}
.mark-tile svg{ width:38px; height:38px; }
.panel-kicker{
  position:absolute; top:13px; left:14px; z-index:1;
  padding:3px 9px; border-radius:7px;
  font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--ink-3); background:var(--surface-2); border:1px solid var(--line);
}

/* —— 规划中板块：虚线 + 斜纹 + 低饱和 —— */
.panel-soon{ border-style:dashed; background-image:none; }
.panel-soon .panel-mark{
  background:
    repeating-linear-gradient(45deg, transparent 0 13px, var(--grid-line) 13px 14px),
    linear-gradient(160deg, var(--bg-deep), var(--surface-2));
}
.panel-soon .mark-tile{
  background:linear-gradient(135deg, var(--ink-3), color-mix(in srgb, var(--ink-3) 62%, var(--brand)));
  opacity:.8; box-shadow:none;
}
.panel-soon h2{ color:var(--ink-2); }
.panel-soon .panel-tags li{ opacity:.75; }
.soon-badge{
  position:absolute; top:13px; right:14px; z-index:1;
  padding:3px 9px; border-radius:7px;
  font-size:11px; font-weight:800; letter-spacing:.04em;
  color:var(--ink-2); background:var(--surface-2); border:1px dashed var(--line);
}

/* —— 课件板块：青绿系标识，和软件板块的蓝紫区分开 —— */
.panel-cw .panel-mark{
  background:
    radial-gradient(88% 118% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%),
    linear-gradient(160deg, var(--bg-deep), var(--surface-2));
}
.panel-cw .mark-tile{
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 42%, var(--brand)));
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent),
             inset 0 1px 0 rgba(255,255,255,.38);
}
.panel-cw .panel-cta{ color:var(--accent); }

/* —— 定制板块：暖橙系标识，和 01 蓝紫、02 青绿区分开 —— */
.panel-cs .panel-mark{
  background:
    radial-gradient(88% 118% at 50% 0%, rgba(246,160,45,.24), transparent 66%),
    linear-gradient(160deg, var(--bg-deep), var(--surface-2));
}
.panel-cs .mark-tile{
  background:linear-gradient(135deg, #f7a63a, #ee6a4d);
  box-shadow:0 14px 28px -12px rgba(238,106,77,.6),
             inset 0 1px 0 rgba(255,255,255,.38);
}
.panel-cs .panel-cta{ color:#dd7048; }
@media (prefers-color-scheme: dark){
  .panel-cs .panel-cta{ color:#f3a184; }
  .panel-cs .panel-mark{
    background:
      radial-gradient(88% 118% at 50% 0%, rgba(246,160,45,.20), transparent 66%),
      linear-gradient(160deg, var(--bg-deep), var(--surface-2));
  }
}

.panel-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.panel h2{ margin:0 0 10px; font-size:clamp(18px,1.7vw,21px); font-weight:820; letter-spacing:-.028em; }
.panel p{ margin:0 0 15px; color:var(--ink-2); font-size:14px; }
.panel-tags{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
.panel-tags li{
  padding:4px 8px; border-radius:8px; font-size:11.5px; font-weight:700;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
}
.panel-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:750; color:var(--brand);
}
.panel-cta svg{ transition:transform .18s; }
a.panel:hover .panel-cta svg{ transform:translateX(4px); }
.panel-soon .panel-cta{ color:var(--ink-3); }
.panel-soon .panel-cta:hover{ color:var(--brand); }

/* —— 路线图提示条（未来待加入） —— */
.roadmap{ padding:24px 26px 6px; }
.rm-box{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px;
  padding:16px 22px; border-radius:16px;
  border:1px dashed var(--line); background:var(--surface);
  font-size:14px; color:var(--ink-2);
}
.rm-txt{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.rm-txt b{ color:var(--ink); font-weight:750; }
.rm-link{ color:var(--brand); font-weight:700; white-space:nowrap; }
.rm-link:hover{ text-decoration:underline; }

/* —— 子页「返回首页」面包屑 —— */
.back-home{
  display:inline-flex; align-items:center; gap:5px;
  margin:0 0 22px; font-size:13.5px; font-weight:650; color:var(--ink-3);
  transition:color .18s;
}
.back-home:hover{ color:var(--brand); }

/* ============================================================
   教学资源页 · 课件列表 / 获取方式
   ============================================================ */
.cw{ padding:44px 26px 10px; }
.cw-list{ display:flex; flex-direction:column; gap:16px; }
.cw-item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
  padding:26px 28px; border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.cw-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.cw-item h3{ margin:0 0 8px; font-size:19px; font-weight:800; letter-spacing:-.025em; }
.cw-item p{ margin:0 0 12px; color:var(--ink-2); font-size:14.2px; max-width:640px; }
.cw-meta{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.cw-meta li{
  padding:3px 9px; border-radius:7px; font-size:11.5px; font-weight:700;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
}
.cw-act{ display:flex; flex-wrap:wrap; gap:10px; }
.cw-act .btn{ padding:10px 18px; font-size:14px; }
.cw-soon{ border-style:dashed; }
.cw-soon:hover{ transform:none; }
.cw-soon h3{ color:var(--ink-2); }
.cw-note{ margin:14px 0 0; font-size:12.8px; color:var(--ink-3); }

.tracks{ padding:36px 26px 6px; }
.track-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.track{
  padding:26px 28px; border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
}
.track h3{ margin:0 0 10px; font-size:17.5px; font-weight:800; letter-spacing:-.025em; }
.track p{ margin:0 0 12px; color:var(--ink-2); font-size:14px; }
.track ul{ margin:0; padding-left:18px; color:var(--ink-2); font-size:13.6px; }
.track li{ margin-bottom:6px; }
.track-k{
  display:inline-block; margin-bottom:12px; padding:4px 10px; border-radius:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.04em;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ============================================================
   响应式（门户 / 课件列表）
   ============================================================ */
@media (max-width: 1080px){
  .portal{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .hero-portal{ padding:26px 22px 6px; }
  .portal-sec{ padding:10px 22px 6px; }
  .roadmap{ padding:20px 22px 6px; }
  .cw{ padding:36px 22px 8px; }
  .tracks{ padding:30px 22px 6px; }
  .track-grid{ grid-template-columns:1fr; }
  .cw-item{ grid-template-columns:1fr; gap:16px; }
  .cw-act{ width:100%; }
  .cw-act .btn{ flex:1 1 auto; justify-content:center; }
}
@media (max-width: 680px){
  .portal{ grid-template-columns:1fr; }
  .panel-mark{ height:116px; }
  .mark-tile{ width:60px; height:60px; border-radius:17px; }
  .mark-tile svg{ width:34px; height:34px; }
}

/* ============================================================
   班务大屏介绍页（/banwu/） —— 重点讲「云端壁纸版」
   ============================================================ */
.bw-sec{ padding:52px 26px 8px; }
.bw-hero{ padding:64px 26px 26px; }
.bw-hero .hero-actions{ margin-bottom:44px; }

/* —— 对比：全屏置顶 vs 桌面壁纸层 —— */
.bw-cmp{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.bw-cmp-item{ margin:0; }
.mock{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  display:flex; gap:12px; padding:16px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(160deg, var(--bg-deep), var(--surface-2));
}
.mock::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(72% 94% at 84% -6%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(64% 84% at -4% 104%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
}
/* 桌面图标（3 列） */
.mock-icons{
  position:relative; z-index:1; flex:none; width:84px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:min-content; align-content:start; gap:9px;
}
.mock-icons i{
  display:block; aspect-ratio:1; border-radius:5px;
  background:var(--ink); opacity:.2;
}
.mock-icons i:nth-child(3n+1){ opacity:.32; }

/* 大屏面板（两张图共用） */
.ms{
  position:relative; z-index:1; flex:1; min-width:0;
  display:flex; flex-direction:column; gap:8px;
  padding:11px 12px 12px; border-radius:11px;
  border:1px solid rgba(140,170,255,.16);
  background:linear-gradient(160deg, #131e3b, #0a1122);
  box-shadow:0 18px 36px -20px rgba(6,12,32,.75);
}
.ms-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ms-class{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:16px; padding:0 6px; border-radius:5px;
  font-size:10px; font-weight:800; letter-spacing:.03em;
  color:#0b1730; background:linear-gradient(135deg,#7fa8ff,#4d7bff);
}
.ms-clock{
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  color:#8ea0c8; font-variant-numeric:tabular-nums;
}
.ms-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:7px; flex:1; min-height:0; }
.ms-big{
  border-radius:7px;
  border:1px solid rgba(255,255,255,.06);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 22px),
    rgba(255,255,255,.045);
}
.ms-side{ display:flex; flex-direction:column; gap:7px; min-height:0; }
.ms-side span{
  flex:1; border-radius:7px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.05);
}
/* 全屏版：面板直接盖在图标上面 */
.mock-cover{ position:absolute; inset:16px; z-index:2; }

.mock-tag{
  position:absolute; z-index:3; left:50%; bottom:13px; transform:translateX(-50%);
  padding:4px 11px; border-radius:8px; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.02em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tag-warn{ color:#ffd9d9; background:rgba(196,62,62,.72); }
.tag-good{ color:#d6fff6; background:rgba(0,140,128,.78); }

.bw-cmp figcaption{ margin-top:13px; }
.bw-cmp figcaption b{ display:block; font-size:15px; font-weight:800; margin-bottom:3px; }
.bw-cmp figcaption span{ font-size:13.2px; color:var(--ink-3); }
.is-old figcaption b{ color:var(--ink-2); }

/* —— 壁纸版优点卡 —— */
.bw-feat{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.bw-f{
  padding:24px 24px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.bw-f:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--brand) 34%, var(--line));
}
.bw-ic{
  width:40px; height:40px; margin-bottom:14px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--brand) 85%, transparent);
}
.bw-ic svg{ width:21px; height:21px; }
.bw-f h3{ margin:0 0 8px; font-size:16.5px; font-weight:800; letter-spacing:-.02em; }
.bw-f p{ margin:0; font-size:13.6px; color:var(--ink-2); }

kbd{
  display:inline-block; padding:1px 6px; margin:0 1px;
  border-radius:6px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink);
  font:inherit; font-size:12px; font-weight:750;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* —— 断网兜底三步 —— */
.bw-flow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
/* 定制页变体：服务卡 2×2、流程 4 列（窄屏由下方 media 接管） */
.bw-feat--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.bw-flow--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.bw-step{
  padding:20px 22px; border-radius:16px;
  border:1px dashed var(--line); background:var(--surface);
  font-size:13.4px; color:var(--ink-2);
}
.bw-step b{ display:block; margin-bottom:6px; font-size:14.5px; color:var(--ink); font-weight:800; }
.bw-note{
  margin:16px 0 0; padding:16px 20px; border-radius:14px;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  font-size:13.2px; color:var(--ink-2);
}
.bw-note b{ color:var(--ink); font-weight:750; }

/* —— 三个视图 —— */
.bw-views{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.bw-v{
  padding:22px 22px 24px;
  border:1px solid var(--line); border-radius:16px;
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.bw-v:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.bw-vk{
  display:inline-block; padding:3px 9px; border-radius:7px;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  background:var(--brand-soft); color:var(--brand);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.bw-v h3{ margin:10px 0 10px; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.bw-v ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.bw-v li{
  position:relative; padding-left:15px;
  font-size:13.2px; color:var(--ink-2);
}
.bw-v li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--accent));
}

.bw-extras{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:16px; }
.bw-ex{
  padding:22px 24px; border-radius:16px;
  border:1px solid var(--line); background:var(--surface);
}
.bw-ex b{ display:block; margin-bottom:7px; font-size:15.5px; font-weight:800; }
.bw-ex p{ margin:0; font-size:13.4px; color:var(--ink-2); }
.bw-skins{ display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.bw-skin{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:9px;
  font-size:12.4px; font-weight:700; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
}
.bw-skin i{ display:block; width:10px; height:10px; border-radius:50%; flex:none; }

/* —— 三步开始 —— */
.bw-start{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.bw-s{
  display:flex; flex-direction:column;
  padding:22px 22px 24px;
  border:1px solid var(--line); border-radius:16px;
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
}
.bw-s .bw-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; margin-bottom:13px; border-radius:9px;
  font-size:13px; font-weight:850; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--brand) 85%, transparent);
}
.bw-s h3{ margin:0 0 8px; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.bw-s p{ margin:0 0 14px; font-size:13.4px; color:var(--ink-2); }
.bw-link{
  margin-top:auto; font-size:13.6px; font-weight:750; color:var(--brand);
}
.bw-link:hover{ text-decoration:underline; }

/* —— 四个版本（优点 / 要注意） —— */
.bw-vers{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.bw-ver{
  padding:24px 24px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.bw-ver:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--brand) 34%, var(--line));
}
.bw-ver.is-new{ border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); }
.bw-ver.is-new::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from var(--ang), transparent 0deg, var(--brand) 70deg, var(--accent) 160deg, transparent 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45; animation:spin 9s linear infinite;
}
.bw-ver{ position:relative; isolation:isolate; }
.bw-ver-top{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:11px; }
.bw-ver-k{ font-size:11.5px; font-weight:850; letter-spacing:.1em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.bw-ver-file{
  padding:2px 8px; border-radius:7px;
  border:1px solid var(--line); background:var(--surface-2);
  font:11.8px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--ink-3); overflow-wrap:anywhere;
}
.bw-ver-badge{
  margin-left:auto; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:800;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
}
.bw-ver h3{ margin:0 0 7px; font-size:19px; font-weight:820; letter-spacing:-.028em; }
.bw-ver-lead{ margin:0 0 16px; font-size:13.6px; color:var(--ink-2); }
.bw-lb{
  display:inline-block; margin-bottom:8px; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:800; letter-spacing:.05em;
}
.bw-lb.plus{ color:var(--accent); background:var(--accent-soft); }
.bw-lb.min{ color:#b47612; background:rgba(226,155,50,.14); }
@media (prefers-color-scheme: dark){ .bw-lb.min{ color:#f0b464; } }
.bw-plus, .bw-minus{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; }
.bw-plus li, .bw-minus li{
  position:relative; padding-left:18px;
  font-size:13.2px; color:var(--ink-2); line-height:1.62;
}
.bw-plus li::before{
  content:"✓"; position:absolute; left:1px; top:-1px;
  font-size:12.5px; font-weight:900; color:var(--accent);
}
.bw-minus li::before{
  content:"!"; position:absolute; left:5px; top:-1px;
  font-size:13px; font-weight:900; color:#d78c1f;
}
.bw-pick{
  margin:16px 0 0; padding:18px 22px; border-radius:14px;
  border:1px dashed var(--line); background:var(--surface);
  font-size:13.6px; color:var(--ink-2);
}
.bw-pick b{ color:var(--ink); font-weight:750; }
.bw-pick-act{ margin:14px 0 0; }
.bw-pick-act .btn{ padding:11px 20px; font-size:14.5px; }

/* —— 更新日志（时间线） —— */
.bw-sub{
  margin:0 0 16px; font-size:14.5px; font-weight:820; letter-spacing:-.01em;
  color:var(--ink-2);
  display:flex; align-items:center; gap:12px;
}
.bw-sub::after{ content:""; flex:1; height:1px; background:var(--line); }
.bw-log{ list-style:none; margin:0; padding:0; }
.bw-log-i{
  position:relative;
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 26px;
  padding-bottom:24px;
}
.bw-log-i:last-child{ padding-bottom:0; }
/* 竖线：串起各版本节点（走左列中线） */
.bw-log-i::before{
  content:""; position:absolute; left:95px; top:34px; bottom:-4px;
  width:2px; border-radius:2px; background:var(--line);
}
.bw-log-i:last-child::before{ display:none; }
/* 节点圆点（贴在左列右缘，跨在两列间隙上，避开版本号文字） */
.bw-log-i::after{
  content:""; position:absolute; left:87px; top:7px; z-index:1;
  width:16px; height:16px; border-radius:50%;
  background:var(--bg-deep); border:2px solid var(--brand);
  box-shadow:0 0 0 4px var(--bg);
}
.bw-log-side{ display:flex; flex-direction:column; gap:3px; padding-top:1px; }
.bw-log-ver{
  font-size:19px; font-weight:850; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bw-log-date{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.bw-log-body h3{
  margin:0 0 9px; font-size:16.5px; font-weight:800; letter-spacing:-.02em;
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
}
.bw-log-body ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.bw-log-body li{
  position:relative; padding-left:15px;
  font-size:13.8px; line-height:1.62; color:var(--ink-2);
}
.bw-log-body li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:color-mix(in srgb, var(--brand) 55%, transparent);
}
.bw-log-body li b{ color:var(--ink); font-weight:750; }
.bw-log-body p{ margin:0; font-size:13.8px; line-height:1.62; color:var(--ink-2); }
.bw-log-chip{
  padding:2px 9px 3px; border-radius:7px;
  font-size:11px; font-weight:800; letter-spacing:.04em; color:#fff;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 58%, var(--brand)));
}
.chip-key{
  color:var(--brand);
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
/* 最新一条：浅色高亮卡 */
.bw-log-i.is-new .bw-log-body{
  margin:-6px -14px 0; padding:12px 14px 14px;
  border-radius:14px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.bw-log-i.is-new::after{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* 大版本：实心节点 + 光晕 */
.bw-log-i.is-key::after{
  background:var(--brand); border-color:var(--brand);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 7px color-mix(in srgb, var(--brand) 18%, transparent);
}
/* 老版本：淡出 */
.bw-log-i.is-old{ opacity:.72; }
.bw-log-note{
  margin:18px 0 0; font-size:12.5px; color:var(--ink-3);
  padding:9px 14px; border-radius:10px;
  background:var(--surface); border:1px dashed var(--line);
}

/* —— 四代演进总览 —— */
.bw-evo{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:0 8px; align-items:stretch;
  margin:0 0 30px;
}
.bw-evo-c{
  position:relative;
  padding:16px 16px 14px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.bw-evo-no{
  align-self:flex-start;
  padding:3px 10px 4px; border-radius:7px;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  color:var(--brand);
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.bw-evo-c h3{ margin:0; font-size:17px; font-weight:850; letter-spacing:-.02em; }
.bw-evo-t{ margin:0; font-size:13.2px; line-height:1.6; color:var(--ink-2); }
.bw-evo-b{
  margin:auto 0 0; padding-top:9px;
  border-top:1px dashed var(--line);
  font-size:12px; line-height:1.5; color:var(--ink-3);
}
.bw-evo-b b{ font-weight:800; margin-right:1px; }
.bw-evo-c.is-now{
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%),
    var(--surface);
  box-shadow:0 18px 36px -24px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bw-evo-c.is-now .bw-evo-no{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 58%, var(--brand)));
}
.bw-evo-c.is-now .bw-evo-b{
  color:var(--accent); font-weight:700;
  border-top-color:color-mix(in srgb, var(--accent) 35%, transparent);
}
.bw-evo-ar{
  align-self:center; flex:none;
  display:flex; align-items:center; justify-content:center;
  width:20px; color:var(--ink-3);
}
.bw-evo-ar svg{ width:19px; height:19px; }

/* —— 带量食谱介绍页：换算示意 —— */
.calc{
  display:flex; flex-direction:column; gap:12px;
  padding:22px 24px 20px; border:1px solid var(--line); border-radius:18px;
  background-color:var(--surface); background-image:var(--card-sheen);
  backdrop-filter:blur(15px) saturate(165%);
  -webkit-backdrop-filter:blur(15px) saturate(165%);
  box-shadow:var(--shadow);
}
.calc-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  padding:14px 16px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface-2);
}
.calc-k{ font-size:12.5px; font-weight:650; color:var(--ink-3); }
.calc-row b{
  font-size:clamp(20px, 2.4vw, 26px); font-weight:850; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.calc-u{ font-size:12.5px; color:var(--ink-3); }
.calc-op{ padding:0 2px; font-size:17px; font-weight:700; color:var(--ink-3); }
.calc-out{
  margin-left:auto;
  display:inline-flex; align-items:baseline; gap:7px;
  padding:6px 14px 7px; border-radius:11px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.calc-out b{
  font-size:clamp(22px, 2.8vw, 31px);
  background:linear-gradient(135deg, var(--accent), var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc-out span{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.calc-note{ margin:0; font-size:13px; color:var(--ink-3); }

/* ============================================================
   电子课本下载（/ebook/）—— 软件界面示意 + 说明列表
   界面示意的颜色取自软件本体（白底 + 绿系），在深色模式下按
   「一张亮着的软件窗口」呈现，所以内部文字全部硬编码，
   不跟主题变量走（否则深色下会白底白字看不见）。
   ============================================================ */
.eb-mock{
  padding:22px; border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 130% at 8% 0%, color-mix(in srgb, #1fc98a 15%, transparent), transparent 55%),
    var(--surface-2);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:13px;
}

/* —— 窗口顶栏 —— */
.eb-bar{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:14px;
  background:#fff; border:1px solid #e1eee7;
  box-shadow:0 10px 24px -18px rgba(15,36,25,.5);
}
.eb-logo{
  flex:none; width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:linear-gradient(140deg,#1fc98a,#0f9d63 62%,#0a8a58);
  box-shadow:0 10px 18px -10px rgba(15,157,99,.9);
}
.eb-logo svg{ width:21px; height:21px; }
.eb-name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.eb-name b{ font-size:13px; font-weight:800; color:#0f2419; letter-spacing:-.01em; }
.eb-name i{ font-size:10.5px; font-style:normal; color:#93a89d; }
.eb-state{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:750; color:#0f9d63;
  background:#e8f7f0; border:1px solid #c7ebdb;
}
.eb-state em{ width:6px; height:6px; border-radius:50%; background:#0f9d63; }

/* —— 三步进度 —— */
.eb-steps{
  display:flex; align-items:center;
  padding:14px 18px; border-radius:14px;
  background:#fff; border:1px solid #e1eee7;
}
.eb-st{
  flex:1 1 0; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.eb-st i{
  position:relative; z-index:1;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; font-style:normal;
  color:#93a89d; background:#f4f9f6; border:1.5px solid #dbe8e2;
}
.eb-st b{ font-size:11px; font-weight:750; color:#93a89d; }
.eb-st.is-done i{ color:#fff; background:#1fc98a; border-color:#1fc98a; }
.eb-st.is-done b{ color:#0f9d63; }
.eb-st.is-now i{ color:#fff; background:#0f9d63; border-color:#0f9d63; box-shadow:0 0 0 4px rgba(15,157,99,.14); }
.eb-st.is-now b{ color:#0f9d63; }
/* 节点之间的连接线 */
.eb-st::before{
  content:""; position:absolute; top:13px; left:-50%; right:50%; height:1px;
  background:repeating-linear-gradient(90deg,#dbe8e2 0 4px,transparent 4px 8px);
}
.eb-st:first-child::before{ display:none; }
/* 通往当前步的那一段算「走过的路」，画成绿色实线 */
.eb-st.is-now::before{ background:#1fc98a; opacity:.55; }

/* —— 主卡片 —— */
.eb-card{
  padding:16px 18px 18px; border-radius:14px;
  background:#fff; border:1px solid #e1eee7;
  box-shadow:0 10px 24px -20px rgba(15,36,25,.5);
}
.eb-h{ display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.eb-h b{ font-size:13.5px; font-weight:800; color:#0f2419; }
.eb-h span{ font-size:11px; color:#93a89d; }
.eb-tabs{ display:flex; gap:8px; margin-bottom:11px; }
.eb-tabs span{
  padding:6px 13px; border-radius:9px;
  font-size:11.5px; font-weight:700; color:#5c7a6c;
  background:#f4f9f6; border:1px solid #e1eee7;
}
.eb-tabs span.on{
  color:#0f9d63; background:#fff; border-color:#0f9d63;
  box-shadow:0 4px 10px -8px rgba(15,157,99,.9);
}
.eb-tip{
  margin:0 0 12px; padding:8px 12px; border-radius:9px;
  font-size:11px; line-height:1.7; color:#3f6b57;
  background:#eaf7f1; border:1px solid #d3ecdf;
}
.eb-tip b{ color:#0a7a4d; font-weight:750; }
.eb-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px; }
.eb-filters span{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 10px 6px 12px; border-radius:9px;
  font-size:11.5px; font-weight:650; color:#0f2419;
  background:#fff; border:1px solid #dbe8e2;
}
.eb-filters em{ font-style:normal; font-size:8px; color:#93a89d; }
.eb-list{ display:flex; flex-direction:column; gap:8px; }
.eb-row{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:11px;
  background:#fafdfb; border:1px solid #e6f1eb;
}
.eb-row > i{
  flex:none; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#2f6fed; background:#eaf1ff; border:1px solid #dbe7ff;
}
.eb-row > i svg{ width:17px; height:17px; }
.eb-row > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.eb-row b{ font-size:11.8px; font-weight:750; color:#0f2419; line-height:1.45; }
.eb-row span{ font-size:10px; color:#93a89d; }
.eb-row > em{
  flex:none; margin-left:auto; font-style:normal;
  padding:6px 12px; border-radius:8px;
  font-size:10.5px; font-weight:750; color:#fff;
  background:linear-gradient(140deg,#1fc98a,#0f9d63);
  box-shadow:0 8px 16px -10px rgba(15,157,99,1);
}
.eb-back{ margin:13px 0 0; font-size:11px; color:#93a89d; }

/* —— 运行日志 —— */
.eb-card-log .eb-h{ margin-bottom:10px; }
.eb-log{
  margin:0; padding:13px 15px; border-radius:10px;
  font:11px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#8fe3bd; background:#0d1f18;
  overflow-x:auto; white-space:pre;
}

/* —— 说明列表（边界那节） —— */
.eb-rules{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
}
.eb-rules li{
  padding:18px 20px 19px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.eb-rules b{ display:block; margin-bottom:6px; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.eb-rules span{ display:block; font-size:13.4px; color:var(--ink-2); line-height:1.78; }

/* —— .bw-ex 里的代码片段 —— */
.bw-ex code{
  padding:1px 6px; border-radius:5px;
  font:12.4px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
}

/* —— 演示 CTA —— */
.bw-demo{ margin-bottom:0; }
.bw-demo-act{ display:flex; flex-wrap:wrap; gap:12px; flex:none; }

/* —— 响应式 —— */
@media (max-width: 980px){
  .bw-cmp{ grid-template-columns:1fr; }
  .bw-feat{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bw-vers{ grid-template-columns:1fr; }
  .bw-views{ grid-template-columns:1fr; }
  .bw-extras{ grid-template-columns:1fr; }
  .bw-flow{ grid-template-columns:1fr; }
  .bw-start{ grid-template-columns:1fr; }
  .bw-evo{ grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
  .bw-evo-ar{ display:none; }
  .eb-rules{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .bw-sec{ padding:42px 22px 6px; }
  .bw-hero{ padding:52px 22px 22px; }
  .bw-hero .hero-actions{ margin-bottom:34px; }
}
@media (max-width: 620px){
  .bw-feat{ grid-template-columns:1fr; }
  .mock{ padding:12px; gap:9px; }
  .mock-cover{ inset:12px; }
  .mock-icons{ width:66px; gap:7px; }
  .bw-demo-act{ width:100%; }
  .bw-demo-act .btn{ flex:1 1 auto; justify-content:center; }
  .calc{ padding:16px 14px 14px; }
  .calc-row{ padding:11px 12px; gap:6px 9px; }
  .bw-evo{ grid-template-columns:1fr; gap:10px; }
  .bw-log-i{ grid-template-columns:1fr; gap:0; padding-bottom:20px; }
  .bw-log-i::before, .bw-log-i::after{ display:none; }
  .bw-log-side{ flex-direction:row; align-items:baseline; gap:9px; margin-bottom:7px; }
  .bw-log-i.is-new .bw-log-body{ margin:0; padding:12px 12px 13px; }
  .calc-out{ margin-left:0; width:100%; justify-content:center; }
  .calc-op{ display:none; }
  /* 电子课本界面示意：窄屏整体收一号，保证四级筛选项与课本行不挤成一团 */
  .eb-mock{ padding:13px; gap:10px; border-radius:16px; }
  .eb-bar{ padding:10px 12px; gap:9px; border-radius:12px; }
  .eb-logo{ width:31px; height:31px; border-radius:10px; }
  .eb-logo svg{ width:18px; height:18px; }
  .eb-name b{ font-size:11.5px; }
  .eb-name i{ display:none; }
  .eb-state{ padding:4px 9px; font-size:10px; }
  .eb-steps{ padding:11px 8px; border-radius:12px; }
  .eb-st i{ width:22px; height:22px; font-size:10.5px; }
  .eb-st b{ font-size:9.5px; }
  .eb-st::before{ top:11px; }
  .eb-card{ padding:13px 13px 15px; border-radius:12px; }
  .eb-h b{ font-size:12.5px; }
  .eb-h span{ font-size:10px; }
  .eb-tabs span{ padding:5px 10px; font-size:10.5px; }
  .eb-tip{ font-size:10px; padding:7px 10px; }
  .eb-filters{ gap:6px; }
  .eb-filters span{ padding:5px 8px 5px 10px; font-size:10.5px; gap:7px; }
  .eb-row{ gap:9px; padding:9px 10px; }
  .eb-row > i{ width:26px; height:26px; border-radius:7px; }
  .eb-row > i svg{ width:15px; height:15px; }
  .eb-row b{ font-size:10.6px; }
  .eb-row span{ font-size:9.4px; }
  .eb-row > em{ padding:5px 9px; font-size:9.4px; }
  .eb-log{ font-size:9.8px; padding:11px 12px; white-space:pre-wrap; }
  .eb-rules li{ padding:16px 17px 17px; }
}

/* ============================================================
   电子营养师（/nutrition/）—— 软件界面示意
   和 .eb-* 一样：示意的颜色硬编码成软件本体的白底绿系，
   深浅色模式下都当成「一张亮着的窗口」来看，不跟主题变量走。
   ============================================================ */
.nt-win{
  max-width:820px; margin:0 auto;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 130% at 10% 0%, color-mix(in srgb, #1fc98a 14%, transparent), transparent 55%),
    var(--surface-2);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:11px;
}
.nt-cap{
  max-width:820px; margin:13px auto 0;
  font-size:12.6px; line-height:1.7; color:var(--ink-3); text-align:center;
}
.nt-cap b{ color:var(--ink-2); font-weight:700; }

/* —— 窗口顶栏 —— */
.nt-bar{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:13px;
  background:#fff; border:1px solid #e1eee7;
}
.nt-logo{
  flex:none; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:linear-gradient(140deg,#1fc98a,#0f9d63 62%,#0a8a58);
  box-shadow:0 10px 18px -10px rgba(15,157,99,.9);
}
.nt-logo svg{ width:19px; height:19px; }
.nt-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.nt-name b{ font-size:12.5px; font-weight:800; color:#0f2419; letter-spacing:-.01em; }
.nt-name i{ font-size:10px; font-style:normal; color:#93a89d; }
.nt-btns{ margin-left:auto; display:flex; gap:6px; flex:none; }
.nt-btns span{
  padding:5px 10px; border-radius:7px;
  font-size:10px; font-weight:750; color:#0f9d63;
  background:#e8f7f0; border:1px solid #c7ebdb;
}
.nt-btns span.ghost{ color:#5c7a6c; background:#f4f9f6; border-color:#e1eee7; }

/* —— 出库单表格 —— */
.nt-tbl{ background:#fff; border:1px solid #e1eee7; border-radius:13px; overflow:hidden; }
.nt-th, .nt-tr{
  display:grid; grid-template-columns:1fr 56px 40px 92px 88px;
  align-items:center; gap:8px; padding:8px 14px;
}
.nt-th{
  font-size:10px; font-weight:750; color:#93a89d;
  background:#f7fbf9; border-bottom:1px solid #e6f1eb;
}
.nt-th span:nth-child(n+2){ text-align:right; }
.nt-tr{ font-size:11.6px; color:#0f2419; border-bottom:1px solid #f1f8f4; }
.nt-tr:last-child{ border-bottom:0; }
.nt-tr span{ text-align:right; font-variant-numeric:tabular-nums; }
.nt-tr span:first-child{ text-align:left; font-weight:700; }
.nt-tr em{ font-style:normal; font-size:10.4px; color:#93a89d; }
.nt-tr .ok{ color:#0f9d63; font-weight:700; }
/* 字段/值 两列小表（填报窗口下半部分），不跟出库单的五列走 */
.nt-kv .nt-th, .nt-kv .nt-tr{ grid-template-columns:1.05fr 1fr; }
.nt-kv .nt-tr span{ text-align:left; }
.nt-kv .nt-tr span:first-child{ font-weight:650; }

/* —— 填报日历 —— */
.nt-days{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.nt-d{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 3px 8px; border-radius:9px;
  font-size:10.5px; font-weight:750; color:#5c7a6c;
  background:#fff; border:1px solid #e1eee7;
  font-variant-numeric:tabular-nums;
}
.nt-d i{ font-style:normal; font-size:8.4px; font-weight:600; color:#93a89d; }
.nt-d.on{
  color:#fff; border-color:transparent;
  background:linear-gradient(140deg,#1fc98a,#0f9d63);
  box-shadow:0 8px 16px -12px rgba(15,157,99,.95);
}
.nt-d.on i{ color:rgba(255,255,255,.85); }
.nt-d.done{ color:#0f9d63; background:#eaf7f1; border-color:#c7ebdb; }

/* —— 自检提示卡（暖黄，放在深色页面上像一张便签） —— */
.nt-warn{
  padding:15px 17px 16px; border-radius:14px;
  background:#fff8ec; border:1px solid #f3d6a4;
  box-shadow:0 14px 30px -26px rgba(120,74,0,.7);
}
.nt-warn b{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:#8a5a06; }
.nt-warn b svg{ width:15px; height:15px; flex:none; }
.nt-warn p{ margin:9px 0 0; font-size:12.6px; line-height:1.85; color:#6b4a12; }
.nt-warn em{ font-style:normal; font-weight:800; }

/* —— 算式条（复用 .calc 的骨架，这里只加单位说明） —— */
.calc-note .nt-u{ font-weight:750; color:var(--ink-2); }
/* 窄屏下 site.css 会隐藏运算符号；营养师这页算式跨了「斤→块→克」三道，
   符号一去掉就读成连写，所以这里把 × ÷ = 留成小号 */
@media (max-width: 620px){
  .nt-calc .calc-op{ display:inline; font-size:14px; padding:0; }
}

@media (max-width: 620px){
  .nt-win{ padding:12px; gap:9px; border-radius:16px; }
  .nt-bar{ padding:9px 11px; gap:8px; }
  .nt-logo{ width:28px; height:28px; border-radius:9px; }
  .nt-logo svg{ width:16px; height:16px; }
  .nt-name b{ font-size:11px; }
  .nt-name i{ display:none; }
  .nt-btns span{ padding:4px 8px; font-size:9px; }
  .nt-th, .nt-tr{ grid-template-columns:1fr 44px 30px 74px 62px; gap:5px; padding:7px 10px; }
  .nt-th{ font-size:9px; }
  .nt-tr{ font-size:10.2px; }
  .nt-tr em{ font-size:9.2px; }
  .nt-days{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .nt-warn{ padding:13px 14px 14px; }
  .nt-warn p{ font-size:11.6px; }
  .nt-cap{ font-size:11.8px; text-align:left; }
}

/* ============================================================
   打铃系统（/daling/）专用：桌面窗口示意 + 手机遥控示意
   颜色硬编码软件本体「浅色皮肤」（bg #eef1f5 / card #fff / accent #2f7fe0 /
   夏季 #e0902f + 行底 #fdf1e3 / 冬季 #4a82d4 + 行底 #e9f1fb），
   深浅色模式下都按「一张亮着的窗口」呈现，不改主题变量。
   ============================================================ */
.dl-win{
  max-width:1000px; margin:0 auto;
  padding:14px; border-radius:18px;
  background:#eef1f5; border:1px solid #d7dee8;
  box-shadow:0 26px 60px -34px rgba(12,30,60,.5);
  color:#1c2333;
}
.dl-bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:11px; background:#fff;
  border:1px solid #dfe4ec;
}
.dl-logo{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(140deg,#4c93ec,#2f7fe0);
}
.dl-logo svg{ width:17px; height:17px; }
.dl-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dl-name b{ font-size:11.6px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.dl-name i{ font-style:normal; font-size:9.2px; color:#77828f; }
.dl-chips{ display:flex; gap:7px; margin-left:auto; }
.dl-chips > span{
  display:flex; flex-direction:column; gap:1px;
  padding:4px 9px; border-radius:8px; background:#f5f7fa; border:1px solid #e4e9f1;
}
.dl-chips em{ font-style:normal; font-size:8.6px; color:#77828f; letter-spacing:.02em; }
.dl-chips b{ font-size:10.6px; font-weight:800; color:#1c2333; white-space:nowrap; }
.dl-chips b.w{ color:#4a82d4; }
.dl-chips b.s{ color:#e0902f; }
.dl-wbtns{ display:flex; gap:6px; margin-left:6px; }
.dl-wbtns i{ width:10px; height:10px; border-radius:3px; background:#e6eaf1; }

.dl-body{ margin-top:11px; display:flex; flex-direction:column; gap:9px; }
.dl-toolbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dl-f{
  padding:4px 11px; border-radius:7px; font-size:10px; font-weight:700;
  color:#3d4a5c; background:#fff; border:1px solid #dfe4ec;
}
.dl-f.on{ color:#fff; background:#2f7fe0; border-color:#2f7fe0; }
.dl-tools{ display:flex; gap:5px; margin-left:auto; }
.dl-tools em{
  font-style:normal; padding:4px 10px; border-radius:7px;
  font-size:10px; font-weight:700; color:#1d5fae;
  background:#e3eefa; border:1px solid #cfe0f7;
}
.dl-tools em.red{ color:#c0392b; background:#fdecec; border-color:#f7d8d5; }

.dl-tbl{ border-radius:10px; overflow:hidden; background:#fff; border:1px solid #dfe4ec; }
.dl-tr{
  display:grid;
  grid-template-columns:26px minmax(90px,1.1fr) 54px minmax(150px,1.2fr) 84px minmax(110px,1.1fr) 84px 32px;
  gap:9px; align-items:center; padding:6px 10px;
  font-size:10.4px; color:#3d4a5c; border-top:1px solid #eef1f6;
}
.dl-tr:first-child{ border-top:0; }
.dl-th{
  background:#eef1f6; color:#5d6a7c; font-weight:800; font-size:9.4px;
  letter-spacing:.02em;
}
.dl-tr > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-tr .t{ font-weight:800; color:#1c2333; font-variant-numeric:tabular-nums; }
.dl-tr .ok{ color:#1f8f63; font-weight:800; text-align:center; }
.dl-tr .off{ color:#a9b2bf; text-align:center; }
.dl-tr.s{ background:#fdf1e3; }
.dl-tr.w{ background:#e9f1fb; }
.dl-note{ display:flex; gap:6px; align-items:center; font-size:9.4px; color:#77828f; }
.dl-note em{ font-style:normal; padding:1px 7px; border-radius:6px; background:#fdf1e3; color:#b4791f; }
.dl-note em.w{ background:#e9f1fb; color:#3a6bb4; }

/* 月份划分：12 个月一格，橙=夏季 / 蓝=冬季 */
.dl-months{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:5px; }
.dl-months span{
  padding:7px 0; border-radius:7px; text-align:center;
  font-size:10px; font-weight:800; color:#fff;
}
.dl-months .s{ background:#e0902f; }
.dl-months .w{ background:#4a82d4; }
.dl-mlegend{ display:flex; gap:14px; margin-top:10px; font-size:11px; color:#77828f; }
.dl-mlegend i{
  display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px;
}
.dl-mlegend i.s{ background:#e0902f; }
.dl-mlegend i.w{ background:#4a82d4; }

/* 手机遥控示意 */
.dl-remote{ display:grid; grid-template-columns:minmax(0,1.05fr) 268px; gap:34px; align-items:center; }
.dl-phone{
  border-radius:26px; padding:12px 11px 14px;
  background:#eef1f5; border:1px solid #d7dee8;
  box-shadow:0 22px 50px -30px rgba(12,30,60,.55);
}
.dl-pbar{
  display:flex; align-items:center; gap:6px;
  padding:7px 9px; border-radius:10px; background:#fff; border:1px solid #dfe4ec;
  font-size:9.4px; font-weight:800; color:#1c2333;
}
.dl-pbar .dot{ width:6px; height:6px; border-radius:50%; background:#1f8f63; }
.dl-pbar em{ margin-left:auto; font-style:normal; font-weight:700; color:#1f8f63; }
.dl-pcard{
  margin-top:9px; padding:11px 12px; border-radius:11px;
  background:#fff; border:1px solid #dfe4ec;
}
.dl-pcard em{ font-style:normal; font-size:8.8px; color:#77828f; }
.dl-pcard b{ display:block; margin-top:2px; font-size:15px; font-weight:850; color:#1c2333; }
.dl-pcard p{ margin:4px 0 0; font-size:9.6px; color:#5d6a7c; }
.dl-pctrl{ display:flex; gap:6px; margin-top:9px; }
.dl-pctrl span{
  flex:1; padding:8px 0; border-radius:9px; text-align:center;
  font-size:10px; font-weight:800; color:#1d5fae; background:#e3eefa; border:1px solid #cfe0f7;
}
.dl-pctrl span.p{ color:#fff; background:#2f7fe0; border-color:#2f7fe0; }
.dl-pprog{ height:5px; margin-top:9px; border-radius:4px; background:#e3e8f0; overflow:hidden; }
.dl-pprog i{ display:block; height:100%; width:38%; border-radius:4px; background:#2f7fe0; }
.dl-prow{
  margin-top:8px; display:flex; gap:8px; align-items:center;
  padding:7px 9px; border-radius:9px; background:#fff; border:1px solid #eceff4;
  font-size:9.4px; color:#3d4a5c;
}
.dl-prow b{ font-weight:800; color:#1c2333; font-variant-numeric:tabular-nums; }
.dl-prow span{ margin-left:auto; color:#77828f; }
.dl-qr{
  width:78px; height:78px; border-radius:10px; flex:none;
  background:
    repeating-linear-gradient(90deg,#1c2333 0 4px,#fff 4px 8px),
    repeating-linear-gradient(0deg,#1c2333 0 4px,#fff 4px 8px);
  background-blend-mode:multiply;
  border:5px solid #fff; box-shadow:0 0 0 1px #dfe4ec;
}

@media (max-width: 980px){
  .dl-remote{ grid-template-columns:1fr; gap:24px; }
  .dl-phone{ max-width:268px; margin:0 auto; }
}
@media (max-width: 760px){
  .dl-win{ padding:11px; border-radius:15px; }
  .dl-chips{ display:none; }
  .dl-tr{ grid-template-columns:22px minmax(0,1fr) 50px minmax(0,1fr) 28px; gap:6px; font-size:10px; }
  .dl-tr > span:nth-child(5),
  .dl-tr > span:nth-child(6),
  .dl-tr > span:nth-child(7){ display:none; }
  .dl-months{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}