/* ============================================================
   PurEditor 官网 —— 浅蓝玻璃拟态主题 (Glassmorphism / Light Blue)
   ------------------------------------------------------------
   · 只改这一份样式表，19 种语言首页 + 隐私页全部同步生效
   · 结构（class 名）与 site-build.js 保持完全一致，可直接重新生成
   · 保留亮/暗色自适应，保留全部原有组件类名
   · 玻璃效果只作用于卡片 / 顶栏 / 按钮 / 弹层，正文保持高可读
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- 基础色 ---- */
  --bg: #e6f2fd;
  --fg: #0e2136;
  --fg2: #47647f;
  --line: rgba(255, 255, 255, .72);

  /* ---- 品牌浅蓝 ---- */
  --accent1: #3a9bf5;
  --accent2: #7ecbff;
  --accent-deep: #1f7ae0;
  --glow: rgba(58, 155, 245, .20);

  /* ---- 玻璃材质 ---- */
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .70);
  --glass-tint: rgba(240, 248, 255, .58);
  --card: rgba(255, 255, 255, .58);
  --glass-line: rgba(255, 255, 255, .78);
  --glass-edge: rgba(122, 170, 224, .26);
  --glass-blur: 18px;
  --sheen: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .26));

  /* ---- 阴影 ---- */
  --shadow: 0 18px 44px -16px rgba(30, 95, 170, .28);
  --shadow-hover: 0 26px 64px -18px rgba(30, 95, 170, .38);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(120, 170, 225, .14);

  --chipbg: rgba(255, 255, 255, .46);
  --menu-bg: rgba(255, 255, 255, .94);
  --menu-solid: #fbfdff;
  --tint: linear-gradient(170deg, #f4fbff 0%, #e6f2fd 42%, #dbecfb 100%);
  --radius: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1420;
    --fg: #e8f2fb;
    --fg2: #93b2d0;
    --line: rgba(255, 255, 255, .14);

    --accent1: #5cb0ff;
    --accent2: #9ad6ff;
    --accent-deep: #8ecbff;
    --glow: rgba(92, 176, 255, .26);

    --glass: rgba(22, 36, 53, .55);
    --glass-strong: rgba(30, 47, 67, .72);
    --glass-tint: rgba(18, 32, 48, .55);
    --card: rgba(22, 36, 53, .58);
    --glass-line: rgba(255, 255, 255, .16);
    --glass-edge: rgba(120, 170, 225, .22);
    --sheen: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .06));

    --shadow: 0 18px 44px -16px rgba(0, 0, 0, .62);
    --shadow-hover: 0 26px 64px -18px rgba(0, 0, 0, .72);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .10);

    --chipbg: rgba(30, 47, 67, .55);
    --menu-bg: rgba(20, 33, 48, .95);
    --menu-solid: #16232f;
    --tint: linear-gradient(170deg, #0c1a2a 0%, #091320 60%, #070f1a 100%);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* html 必须有不透明底色：否则 body 背景会“传播”到画布，渐变就变成固定视口、不再随页面高度变化 */
html { scroll-behavior: smooth; overflow-x: hidden; background-color: #ffffff; }
@media (prefers-color-scheme: dark) { html { background-color: #070f1a; } }

body {
  min-height: 100vh;
  color: var(--fg);
  /* 上浓下浅 + 顶部不规则网状光斑：左右深浅拉平，只留轻微不规整 */
  background-color: #ffffff;
  background-image:
    radial-gradient(940px 380px at 58% -28px, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(720px 880px at 0% 300px, #9bc8f6 0%, rgba(155, 200, 246, 0) 62%),
    radial-gradient(720px 880px at 100% 300px, #a4cef8 0%, rgba(164, 206, 248, 0) 62%),
    radial-gradient(680px 620px at 4% 800px, #a2cdf6 0%, rgba(162, 205, 246, 0) 58%),
    radial-gradient(680px 620px at 96% 760px, #aed3f8 0%, rgba(174, 211, 248, 0) 58%),
    radial-gradient(460px 400px at 46% 620px, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg,
      #d9eeff 0%,
      #e4f4ff 20%,
      #f0faff 36%,
      #f9fdff 52%,
      #ffffff 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;   /* 渐变铺满整个页面高度，随滚动自然由蓝转白 */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #070f1a;
    background-image:
      radial-gradient(940px 380px at 58% -28px, rgba(60, 120, 180, .34) 0%, rgba(60, 120, 180, 0) 68%),
      radial-gradient(720px 880px at 0% 300px, #1d4d78 0%, rgba(29, 77, 120, 0) 62%),
      radial-gradient(720px 880px at 100% 300px, #194668 0%, rgba(25, 70, 104, 0) 62%),
      radial-gradient(680px 620px at 4% 800px, #1a446a 0%, rgba(26, 68, 106, 0) 58%),
      radial-gradient(680px 620px at 96% 760px, #16405f 0%, rgba(22, 64, 95, 0) 58%),
      linear-gradient(180deg, #123a5e 0%, #0e2942 30%, #0a1b2c 58%, #070f1a 100%);
  }
}

/* ---------- 手机端首屏：窄屏下重新排布光斑，避免整块均匀一片蓝 ---------- */
@media (max-width: 760px) {
  body {
    background-image:
      radial-gradient(320px 260px at -8% 20px, rgba(140, 190, 240, .42) 0%, rgba(140, 190, 240, 0) 72%),
      radial-gradient(340px 280px at 106% 130px, rgba(150, 198, 244, .38) 0%, rgba(150, 198, 244, 0) 72%),
      radial-gradient(460px 440px at 50% 560px, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg,
        #cce9ff 0px,
        #dcf1ff 240px,
        #ebf8ff 560px,
        #f8fdff 900px,
        #ffffff 1240px);
  }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(320px 260px at -8% 20px, rgba(20, 62, 100, .55) 0%, rgba(20, 62, 100, 0) 72%),
      radial-gradient(340px 280px at 106% 130px, rgba(18, 56, 90, .45) 0%, rgba(18, 56, 90, 0) 72%),
      linear-gradient(180deg, #113a5c 0px, #0d2740 320px, #0a1a2b 700px, #070f1a 1100px);
  }
}

a { color: var(--accent1); text-decoration: none; }
::selection { background: var(--glow); }
img { display: block; max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶栏：悬浮玻璃条 ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 8px 28px -20px rgba(30, 95, 170, .55);
}
@media (prefers-color-scheme: dark) {
  header { background: rgba(16, 28, 42, .62); }
}
.nav { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--fg); }
.brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 4px 14px -6px rgba(30, 95, 170, .6); }
.nav .links { display: flex; gap: 22px; margin-left: 12px; }
.nav .links a { color: var(--fg2); font-size: 14.5px; transition: color .16s; }
.nav .links a:hover { color: var(--fg); }
.nav .spacer { flex: 1; }
#langSel {
  appearance: none; background: var(--chipbg); color: var(--fg);
  border: 1px solid var(--glass-line); border-radius: 10px;
  padding: 6px 30px 6px 12px; font-size: 13.5px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
@media (max-width:760px) { .nav .links { display: none; } }

/* ---------- Hero：不套玻璃面板，内容直接落在背景上 ---------- */
.hero {
  position: relative;
  margin: 34px auto 0;
  padding-top: clamp(38px, 5.2vw, 66px);
  padding-bottom: clamp(30px, 4vw, 46px);
  text-align: center;
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  letter-spacing: -.6px; line-height: 1.12;
  font-weight: 750;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(58, 155, 245, .45));
}
.hero .tagline { margin-top: 14px; font-size: clamp(17px, 2.4vw, 22px); color: var(--fg2); font-weight: 600; }
.hero .pitch { margin: 14px auto 0; max-width: 660px; font-size: 16.5px; color: var(--fg2); }

/* ---------- 按钮：玻璃胶囊 ---------- */
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 14px; padding: 13px 26px;
  font-size: 16px; font-weight: 600;
  color: var(--fg);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 24px -14px rgba(30, 95, 170, .65), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
  color: var(--accent-deep);
  box-shadow: 0 16px 32px -16px rgba(30, 95, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.btn.primary {
  background: linear-gradient(135deg, #4aa5f7, #7cc8ff);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(58, 155, 245, .70), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.primary:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 20px 40px -14px rgba(58, 155, 245, .82), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn .apple { width: 18px; height: 18px; fill: #fff; }
.btn .winlogo { width: 17px; height: 17px; }
.btn .winlogo path { fill: var(--accent1); }
.hero .free { margin-top: 16px; font-size: 13.5px; color: var(--fg2); }
.hero-shot { margin: 40px auto 0; max-width: 100%; }

/* ---------- 红绿灯窗口框（与应用原生坐标一致：left 16 / top 14） ---------- */
.win {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  box-shadow: 0 26px 60px -26px rgba(24, 82, 150, .55), 0 2px 8px rgba(24, 82, 150, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.win img { width: 100%; height: auto; }
.win:hover { transform: translateY(-2px); box-shadow: 0 34px 74px -28px rgba(24, 82, 150, .62), 0 2px 10px rgba(24, 82, 150, .12); }
.win .lights { position: absolute; left: 16px; top: 14px; display: flex; gap: 8px; z-index: 5; }
.win .lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.win .lights i:nth-child(1) { background: #ff5f57; }
.win .lights i:nth-child(2) { background: #febc2e; }
.win .lights i:nth-child(3) { background: #28c840; }

/* ---------- 区块通用 ---------- */
section { padding: 74px 0; }
.sec-title {
  text-align: center;
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -.4px;
  position: relative;
  padding-bottom: 16px;
  font-weight: 700;
}
.sec-title::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 58px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 18px rgba(58, 155, 245, .55);
}
.sec-sub { text-align: center; color: var(--fg2); margin-top: 10px; font-size: 16px; }

/* ---------- 三大特点：玻璃卡 ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
@media (max-width:860px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  box-shadow: var(--shadow), var(--shadow-inset), 0 0 0 1px rgba(122, 170, 224, .10);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pillar::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), transparent 78%);
  opacity: .85;
}
.pillar:hover {
  transform: translateY(-5px);
  border-color: rgba(126, 203, 255, .9);
  box-shadow: var(--shadow-hover), var(--shadow-inset);
}
.pillar .ico {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: linear-gradient(135deg, rgba(126, 203, 255, .40), rgba(255, 255, 255, .66));
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px -12px rgba(58, 155, 245, .7);
}
.pillar h3 { margin-top: 14px; font-size: 20px; }
.pillar p { margin-top: 8px; color: var(--fg2); font-size: 15px; flex: 1; }
.pillar .mini { margin-top: 18px; border-radius: 12px; }
.pillar .mini::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, .35);
  pointer-events: none;
}

/* ---------- 三模式：玻璃卡左右排版 ---------- */
.mode {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
  margin-top: 28px;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid var(--glass-line);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 14px 40px -22px rgba(30, 95, 170, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: box-shadow .22s ease, transform .22s ease;
}
.mode:hover { box-shadow: 0 24px 56px -24px rgba(30, 95, 170, .55), inset 0 1px 0 rgba(255, 255, 255, .8); }
.mode:nth-child(even) .mimg { order: 2; }
@media (max-width:860px) {
  .mode { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .mode:nth-child(even) .mimg { order: 0; }
}
.mode h3 { font-size: 24px; }
.mode ul { margin-top: 14px; list-style: none; }
.mode li { padding: 7px 0 7px 28px; position: relative; color: var(--fg2); font-size: 15.5px; }
.mode li::before {
  content: "✓";
  position: absolute; left: 0; top: 8px;
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(120deg, var(--accent1), var(--accent2));
  color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(58, 155, 245, .8);
}

/* ---------- 特性 chips：玻璃胶囊 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.chip {
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14.5px;
  color: var(--fg);
  border: 1px solid rgba(122, 170, 224, .30);
  background: rgba(238, 247, 255, .78);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 20px -16px rgba(30, 95, 170, .8), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
  background: var(--glass-strong);
}

/* ---------- 下载：整幅玻璃带 ---------- */
.dl {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
  background: linear-gradient(135deg, rgba(223, 241, 255, .42), rgba(255, 255, 255, .30));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 40px -28px rgba(30, 95, 170, .6);
}
@media (prefers-color-scheme: dark) {
  .dl { background: linear-gradient(135deg, rgba(22, 48, 78, .30), rgba(16, 28, 44, .22)); }
  .dl::before { background: radial-gradient(60% 100% at 50% 0%, rgba(90, 160, 230, .26), transparent 70%); }
  .chip { border-color: rgba(120, 170, 220, .28); background: rgba(30, 47, 67, .68); box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .10); }
}
.dl .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.dl .note { margin-top: 16px; font-size: 13px; color: var(--fg2); }
.dl .wrap { position: relative; }
.dl::before {
  content: '';
  position: absolute; left: 50%; top: 0;
  width: min(680px, 86%); height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 0%, rgba(122, 192, 255, .45), transparent 70%);
  pointer-events: none;
}

/* ---------- 设为默认：玻璃步骤卡 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; counter-reset: step; }
@media (max-width:860px) { .steps { grid-template-columns: 1fr 1fr; } }
.step {
  position: relative;
  padding: 24px 20px;
  border-radius: 18px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 34px -20px rgba(30, 95, 170, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step:hover {
  transform: translateY(-3px);
  border-color: var(--accent2);
  box-shadow: 0 20px 44px -20px rgba(30, 95, 170, .62), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.step .n {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(120deg, var(--accent1), var(--accent2));
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: 0 8px 18px -8px rgba(58, 155, 245, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.step p { margin-top: 12px; font-size: 14.5px; color: var(--fg2); }
.defnote {
  max-width: 680px; margin: 26px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--fg2);
  border-radius: 14px;
  padding: 12px 18px;
  background: var(--glass-tint);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* ---------- 页脚：浅玻璃 ---------- */
footer {
  border-top: 1px solid var(--glass-line);
  padding: 34px 0 44px;
  color: var(--fg2);
  font-size: 13.5px;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
@media (prefers-color-scheme: dark) {
  footer { background: rgba(14, 26, 40, .42); }
}
.foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 0 24px 6px; }
.foot .spacer { flex: 1; }
/* 窄屏/长语言：链接一行、版权一行，整体居中（19 种语言表现一致） */
@media (max-width: 900px) {
  .foot { justify-content: center; column-gap: 20px; row-gap: 8px; padding: 0 24px 10px; }
  .foot .spacer { display: none; }
  .foot > span { flex-basis: 100%; text-align: center; }
}

/* ---------- 隐私页 ---------- */
.pv-body {
  max-width: 780px;
  margin: 36px auto 48px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 24px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--shadow), var(--shadow-inset);
}
.pv-body h1 {
  font-size: clamp(22px, 4.4vw, 32px);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.pv-updated { color: var(--fg2); margin-top: 8px; font-size: 14px; }
.pv-sec { margin-top: 30px; }
.pv-sec h2 { font-size: 19px; line-height: 1.35; overflow-wrap: break-word; }
.pv-sec p { margin-top: 8px; color: var(--fg2); font-size: 15.5px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* ---------- 语言切换（纯 <a>，<details> 折叠） ---------- */
.langmenu { position: relative; }
.langmenu summary {
  list-style: none; cursor: pointer; user-select: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--fg);
  border: 1px solid var(--glass-line);
  background: var(--chipbg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .16s ease, background .16s ease;
}
.langmenu summary:hover { border-color: var(--accent2); }
.langmenu summary::-webkit-details-marker { display: none; }
/* 关闭时必须真正隐藏：否则 display:grid 会覆盖 <details> 的默认隐藏规则，造成页面横向溢出 */
.langmenu:not([open]) .langlist { display: none; }
.langmenu[open] summary { border-radius: 10px 10px 0 0; }
.langmenu .langlist {
  position: absolute; right: 0; top: 100%; z-index: 200;
  padding: 10px;
  border: 1px solid var(--glass-line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 48px -22px rgba(30, 95, 170, .65);
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 2px 10px;
}
.langmenu .langlist a { display: block; padding: 6px 16px; border-radius: 8px; font-size: 13.5px; color: var(--fg2); }
.langmenu .langlist a:hover { background: var(--chipbg); color: var(--fg); }
.langmenu .langlist a.cur { color: var(--accent1); font-weight: 600; }

.foot-langs {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
  padding-bottom: 22px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
}
.foot-langs a { font-size: 13px; color: var(--fg2); padding: 4px 10px; border-radius: 8px; transition: color .15s, background .15s; }
.foot-langs a:hover { color: var(--accent1); background: var(--chipbg); }
.foot-langs a.cur { color: var(--accent1); background: var(--chipbg); font-weight: 600; }

/* ---------- 移动端语言菜单（≤760px）：全宽固定弹层（不透明，保证可读） ---------- */
@media (max-width:760px) {
  .langmenu { position: static; }
  .langmenu .langlist {
    position: fixed; left: 10px; right: 10px; top: 60px; width: auto;
    grid-template-columns: repeat(3, 1fr); gap: 2px 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: var(--menu-solid);
    box-shadow: 0 26px 64px -18px rgba(12, 45, 85, .55), 0 2px 6px rgba(12, 45, 85, .12);
  }
  .langmenu .langlist a { font-size: 12.5px; padding: 8px 4px; text-align: center; color: var(--fg); }
  .langmenu .langlist a:hover { background: var(--chipbg); }
  .nav { gap: 12px; }
  section { padding: 56px 0; }
}

/* ---------- 不支持 backdrop-filter 的浏览器：退化为高不透明玻璃 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(255, 255, 255, .86);
    --glass-strong: rgba(255, 255, 255, .92);
    --glass-tint: rgba(246, 251, 255, .88);
    --card: rgba(255, 255, 255, .92);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --glass: rgba(24, 38, 56, .90);
      --glass-strong: rgba(28, 44, 62, .94);
      --glass-tint: rgba(22, 36, 52, .90);
      --card: rgba(24, 38, 56, .94);
    }
  }
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 特性小图:裁剪放大到功能区 ---------- */
/* 全窗截图(2560×1300)直接缩进卡片文字根本看不清;按特性把视口对准
   各自的功能区域放大 2.2 倍(卡片约 16:9.5,像素充足依旧锐利) */
.pillar .mini { aspect-ratio: 16 / 9.5; overflow: hidden; }
.pillar .mini img { position: absolute; max-width: none; height: auto; }
/* object-position 只影响盒子内内容适配,管不住盒子自身溢出方向——溢出裁剪
   始终从左上角开始(之前三张卡全都显示图左上角即此因)。改用绝对定位直接
   摆放图片,精确控制可见区:
   ① 一键排版:右下对齐 → 可见右下角三大操作按钮(窗口 x 698-1280, y 306-650)
   ② 默认替换:left -68% → 可见 x 400-987, y 0-344 → 规则气泡(410-870)完整居中
   ③ 永不丢稿:left -60% → 可见 x 333-889, y 0-329 → 工具栏在上+「已恢复」提示条 */
.pillars .pillar:nth-child(1) .mini img { right: 0; bottom: 0; width: 220%; }
.pillars .pillar:nth-child(2) .mini img { left: -68%; top: 0; width: 220%; }
.pillars .pillar:nth-child(3) .mini img { left: -60%; top: 0; width: 230%; }