/* =========================================================
   无人房 · 基础层
   改配色 / 圆角 / 阴影强度：改下面 :root 里的变量即可
   ========================================================= */

:root {
  color-scheme: light;

  /* 主色与尺寸（会被编辑面板实时改写） */
  --accent: #007AFF;
  --accent-soft: rgba(0, 122, 255, .10);
  --accent-soft-2: rgba(0, 122, 255, .20);
  --radius: 22px;
  --shadow: 1;
  --gap: 14px;
  --container: 1080px;
  --font-scale: 1;

  /* 阴影由这两组变量推导，换皮肤时只改颜色即可 */
  --e: calc(6px * var(--shadow));
  --e-in: calc(4px * var(--shadow));
  --sh-light: #FFFFFF;
  --sh-dark: #D1D9E6;
  --sh-out: calc(var(--e) * .5) calc(var(--e) * .5) var(--e) var(--sh-dark),
            calc(var(--e) * -.5) calc(var(--e) * -.5) var(--e) var(--sh-light);
  --sh-in: inset calc(var(--e-in) * .5) calc(var(--e-in) * .5) var(--e-in) var(--sh-dark),
           inset calc(var(--e-in) * -.5) calc(var(--e-in) * -.5) var(--e-in) var(--sh-light);

  /* 中性色 */
  --surface: #F2F4F8;
  --surface-in: #F2F4F8;
  --text: #111111;
  --text-2: #6F7280;
  --text-3: #A9ADBA;
  --success: #32BB78;
  --warning: #FFB300;
  --danger: #FF5252;
  --divider: #E7EBF3;
  --track: rgba(17, 24, 39, .08);
  --shadow-color: rgba(17, 24, 39, .16);

  /* 字号（rem 跟随 --font-scale 缩放） */
  --t-2xs: .6875rem;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .875rem;
  --t-lg: .9375rem;
  --t-xl: 1rem;
  --t-2xl: 1.125rem;
  --t-3xl: 1.375rem;

  /* 页面背景 */
  --page:
    radial-gradient(1100px 560px at 82% -12%, #F3F8FF 0%, transparent 62%),
    linear-gradient(180deg, #EAF1FF 0%, #F5F6FB 46%, #FFFFFF 100%);

  /* 玻璃态默认值 */
  --glass-border: rgba(255, 255, 255, .62);
  --glass-hi: rgba(255, 255, 255, .75);
  --glass-outer: rgba(80, 95, 130, .26);
}

/* ---------------- 深色 ---------------- */
:root[data-mode="dark"] {
  color-scheme: dark;
  --surface: #1A1B1E;
  --surface-in: #1A1B1E;
  --text: #F5F5F5;
  --text-2: #B3B3B3;
  --text-3: #7E7E7E;
  --success: #30D158;
  --warning: #FFB74D;
  --danger: #FF8A80;
  --divider: #2D2D2D;
  --track: rgba(255, 255, 255, .10);
  --sh-light: #26282C;
  --sh-dark: #0D0E11;
  --shadow-color: rgba(0, 0, 0, .55);
  --page:
    radial-gradient(1000px 600px at 80% -10%, rgba(40, 70, 120, .35) 0%, transparent 62%),
    linear-gradient(180deg, #0D1117 0%, #12161C 46%, #1A1E25 100%);
}

/* ---------------- 玻璃态（浅色） ---------------- */
:root[data-skin="glass"] {
  --surface: rgba(255, 255, 255, .46);
  --surface-in: rgba(255, 255, 255, .22);
  --text: #1A1B1E;
  --text-2: rgba(26, 27, 30, .72);
  --text-3: rgba(26, 27, 30, .50);
  --divider: rgba(26, 27, 30, .10);
  --track: rgba(26, 27, 30, .10);
  --sh-out: inset 0 1px 0 var(--glass-hi), 0 18px 40px -24px var(--glass-outer);
  --sh-in: inset 0 2px 8px rgba(0, 0, 0, .10);
  --glass-outer: rgba(80, 95, 130, .26);
  --page:
    radial-gradient(closest-side at 18% 22%, rgba(90, 160, 240, .45), transparent),
    radial-gradient(closest-side at 86% 15%, rgba(156, 138, 230, .40), transparent),
    radial-gradient(closest-side at 28% 90%, rgba(79, 184, 201, .42), transparent),
    radial-gradient(closest-side at 90% 84%, rgba(126, 134, 224, .38), transparent),
    radial-gradient(closest-side at 52% 46%, rgba(127, 192, 232, .30), transparent),
    #F3EFEA;
}

/* ---------------- 玻璃态（深色） ---------------- */
:root[data-skin="glass"][data-mode="dark"] {
  --surface: rgba(255, 255, 255, .12);
  --surface-in: rgba(0, 0, 0, .22);
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .78);
  --text-3: rgba(255, 255, 255, .55);
  --divider: rgba(255, 255, 255, .12);
  --track: rgba(255, 255, 255, .14);
  --glass-border: rgba(255, 255, 255, .22);
  --glass-hi: rgba(255, 255, 255, .32);
  --glass-outer: rgba(0, 0, 0, .50);
  --sh-out: inset 0 1px 0 var(--glass-hi), 0 18px 40px -24px var(--glass-outer);
  --sh-in: inset 0 2px 10px rgba(0, 0, 0, .35);
  --page:
    radial-gradient(closest-side at 20% 25%, rgba(74, 110, 170, .55), transparent),
    radial-gradient(closest-side at 84% 16%, rgba(120, 96, 150, .45), transparent),
    radial-gradient(closest-side at 30% 90%, rgba(60, 120, 120, .40), transparent),
    radial-gradient(closest-side at 88% 82%, rgba(90, 84, 140, .42), transparent),
    #0F1320;
}

/* =========================================================
   基础元素
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(16px * var(--font-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
  /* 不要用 background-attachment: fixed —— 每次滚动都要重绘整页渐变，是滚动卡顿的头号原因 */
  background-attachment: scroll;
  transition: color .3s ease, background-color .3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
::selection { background: var(--accent-soft-2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--sh-out);
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* =========================================================
   新拟态表面（所有控件的公共底座）
   ========================================================= */
.neu,
.neu-in {
  border: 1px solid transparent;
  border-radius: var(--r, var(--radius));
  background: var(--surface);
  transition: box-shadow .25s ease, background-color .25s ease,
    border-color .25s ease, transform .18s ease;
}

.neu { box-shadow: var(--sh-out); }
.neu-in { background: var(--surface-in); box-shadow: var(--sh-in); }
.neu--sm { --e: calc(3px * var(--shadow)); --e-in: calc(2px * var(--shadow)); }

/* 玻璃态：用「半透明表面 + 1px 高光边 + 内高光」模拟磨砂玻璃。
   刻意不加 backdrop-filter —— 全站几十个控件逐个对背景做模糊，滚动时会逐帧重算，
   是滑动卡顿的主要来源。想要真磨砂可以把下面注释的两行打开（会明显更吃性能）。 */
[data-skin="glass"] .neu,
[data-skin="glass"] .neu-in {
  background: var(--surface);
  border-color: var(--glass-border);
  /* -webkit-backdrop-filter: blur(14px) saturate(150%); */
  /* backdrop-filter: blur(14px) saturate(150%); */
}

[data-skin="glass"] .neu-in {
  background: var(--surface-in);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06), inset 0 -1px 0 var(--glass-hi);
}

/* =========================================================
   布局
   ========================================================= */
.shell {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px clamp(16px, 3.2vw, 28px) 88px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1.4);
}

.section { scroll-margin-top: 24px; }

.section__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: calc(var(--gap) + 2px);
}

.section__title {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 700;
}

.section__sub {
  color: var(--text-2);
  font-size: var(--t-base);
  max-width: 46em;
}

[data-align="center"] .section__head { align-items: center; text-align: center; }
[data-align="center"] .hero__copy { text-align: center; }

/* =========================================================
   通用小件
   ========================================================= */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.hint { color: var(--text-2); font-size: var(--t-sm); }
.divider { height: 1px; background: var(--divider); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
  background: var(--accent-soft);
  white-space: nowrap;
}
.badge--success { color: var(--success); background: rgba(48, 209, 88, .14); }
.badge--warning { color: #C88700; background: rgba(255, 183, 77, .20); }
.badge--danger { color: var(--danger); background: rgba(255, 82, 82, .14); }
:root[data-mode="dark"] .badge--warning { color: var(--warning); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--text-2);
  box-shadow: var(--sh-in);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--sh-out);
}

/* 入场动画：只在动画期间占用合成层，动画结束立刻释放（长期 will-change 会拖慢滚动） */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1),
    transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--delay, 0ms);
}
.reveal:not(.is-in) { will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}