/**
 * static/theme.css —— 视觉单一真源（Apple HIG · 黑白灰极简）
 *
 * 大白话：页面上所有颜色、字号、行高、圆角、间距、动效时长都在这里定义成变量，
 * 组件样式只引用变量。改一个数值，全站跟着变。
 *
 * 硬约束（三端共用同一份写法）：
 *   · 单位一律 px，禁 rpx；
 *   · 不用 ::before / ::after、不用通配选择器 *、不用渐变与 backdrop-filter、
 *     不用外链字体 —— 微信小程序 WXSS 不支持或表现不一致；
 *   · 无描边、无投影；唯一的「光」是搜索胶囊外圈那层极淡的呼吸晕。
 *
 * 小程序端：构建脚本把 :root 改写成 page，html/body 选择器映射到 page，其余原样带过去。
 */

/* ------------------------------------------------------------------ *
 * 一、设计变量（浅色为基线）
 * ------------------------------------------------------------------ */
:root {
  /* 颜色 */
  --nt-bg: #ffffff;
  --nt-paper: #f5f5f5;
  --nt-elevated: #ffffff;
  --nt-ink: #000000;
  --nt-text-2: #666666;
  --nt-text-50: rgba(0, 0, 0, 0.6);
  --nt-text-20: rgba(0, 0, 0, 0.56);
  --nt-foot: rgba(0, 0, 0, 0.55);
  --nt-placeholder: #6e6e73;
  --nt-danger: #bf3f12;
  --nt-halo-soft: rgba(0, 0, 0, 0.1);
  --nt-halo-glow: rgba(0, 0, 0, 0.2);
  --nt-mask: rgba(0, 0, 0, 0.32);

  /* 五行与吉忌语义色 */
  --wx-jin: #6b6b6b;
  --wx-mu: #1a7f37;
  --wx-shui: #1f5fbf;
  --wx-huo: #c62828;
  --wx-tu: #7d6417;
  --nt-yi: #1a7f37;
  --nt-ji: #c62828;

  /* 描边宽度（图标用） */
  --b-chevron: 1.5px;
  --b-ring: 1.5px;

  /* 圆角 */
  --r-card: 25px;
  --r-panel: 24px;
  --r-pill: 999px;
  --r-md: 12px;

  /* 尺寸 */
  --nav-h: 50px;
  --gutter: 24px;
  --gap: 16px;
  --logo-w: 64.27px;
  --logo-h: 72px;
  --logo-splash-w: 85.69px;
  --logo-splash-h: 96px;
  --ic-chevron-w: 8.8628px;
  --ic-chevron-h: 17.0606px;
  --ic-search-w: 19.7806px;
  --ic-search-h: 19.5628px;
  --pill-h: 48px;
  --pill-w: 272px;
  --row-h: 84px;
  --btn-h: 48px;
  --dual-gap: 48px;
  --modal-w: 354px;
  --modal-h: 184px;
  --modal-btn-h: 44px;
  --modal-btn-gap: 36px;

  /* 字号 / 行高 */
  --fs-h: 17px;
  --lh-h: 20px;
  --fs-xl: 22px;
  --lh-xl: 26px;
  --fs-splash: 28px;
  --lh-splash: 33px;
  --fs-body-15: 15px;
  --lh-15: 18px;
  --fs-body: 16px;
  --fs-note: 12px;
  --lh-note: 14px;
  --fs-sub: 13px;
  --fs-cap: 11px;
  --lh-long: 18px;

  /* 字重 */
  --fw-bold: 700;
  --fw-mid: 600;
  --fw-reg: 400;

  /* 间距阶梯 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* 动效 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --d-press: 120ms;
  --d-drawer: 280ms;
  --d-page: 320ms;
  --d-theme: 320ms;
  --d-splash: 400ms;
  --d-modal-out: 200ms;
  --d-halo: 4400ms;
  --halo-gap: 1px;

  /* 断点宽度 */
  --w-tablet: 640px;
  --w-desktop: 720px;

  /* 安全区（真机由 env() 覆盖，桌面留设计稿数值） */
  --safe-top: 59px;
  --safe-bottom: 34px;
  --band-top: calc(var(--safe-top) + var(--nav-h));
  --band-bottom: calc(var(--safe-bottom) + 12px + 28px);
}

/* ------------------------------------------------------------------ *
 * 二、深色（html 挂 .nt-dark）
 * ------------------------------------------------------------------ */
.nt-dark {
  color-scheme: dark;
  --nt-bg: #000000;
  --nt-paper: #1a1a1a;
  --nt-elevated: #2c2c2e;
  --nt-ink: #ffffff;
  --nt-text-2: #a1a1a1;
  --nt-text-50: rgba(255, 255, 255, 0.68);
  --nt-text-20: rgba(255, 255, 255, 0.5);
  --nt-foot: rgba(255, 255, 255, 0.48);
  --nt-placeholder: rgba(255, 255, 255, 0.48);
  --nt-danger: #ff5733;
  --nt-halo-soft: rgba(0, 0, 0, 0.1);
  --nt-halo-glow: rgba(0, 0, 0, 0.24);
  --nt-mask: rgba(0, 0, 0, 0.48);
  --wx-jin: #d4c89a;
  --wx-mu: #4ade80;
  --wx-shui: #60a5fa;
  --wx-huo: #f87171;
  --wx-tu: #d6b25e;
  --nt-yi: #4ade80;
  --nt-ji: #f87171;
}

/* ------------------------------------------------------------------ *
 * 三、页面基线
 * ------------------------------------------------------------------ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--nt-bg);
  color: var(--nt-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input {
  margin: 0;
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* 页面主容器：留出底部手势区 */
.nt-page-safe {
  box-sizing: border-box;
  padding-bottom: var(--safe-bottom);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 各视图的纵向骨架：导航固定、正文吃掉剩余高度并可滚动、按钮与页脚贴底。
   少了这一条，正文会被压成 0 高（.nt-pgbody 用了 flex:1 + height:0）。 */
.home,
.res,
.ab,
.dl {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ------------------------------------------------------------------ *
 * 四、导航与页头
 * ------------------------------------------------------------------ */
.nt-nav {
  position: relative;
  height: var(--nav-h);
  margin-top: var(--safe-top);
  flex-shrink: 0;
}

.nt-nav-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-mid);
  white-space: nowrap;
}

.nt-nav-about {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 44px;
  min-width: 44px;
  padding: 0 4px;
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-mid);
}

.nt-nav-back {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
}

.nt-nav-back:active,
.nt-nav-about:active {
  opacity: 0.6;
}

.nt-page-h {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-5);
  height: 44px;
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-mid);
}

.nt-pgbody {
  flex: 1;
  min-height: 0;
  height: 0;
  padding: 0 var(--gutter) 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 带底部按钮的结果页：正文多留出按钮高度，滚到底时末行不会被按钮压住 */
.res .nt-pgbody {
  padding-bottom: calc(var(--btn-h) + var(--sp-5));
}

.nt-pgbody.nt-pt {
  padding-top: var(--sp-5);
}

/* ------------------------------------------------------------------ *
 * 五、图标（背景图承载，几何尺寸与设计稿一致）
 * ------------------------------------------------------------------ */
.nt-icon {
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: invert(0);
}

.nt-i-back {
  width: var(--ic-chevron-w);
  height: var(--ic-chevron-h);
  background-image: url("./icons/icon-back.svg");
}

.nt-i-chev {
  width: var(--ic-chevron-w);
  height: var(--ic-chevron-h);
  background-image: url("./icons/icon-forward.svg");
}

.nt-i-chev-danger {
  width: var(--ic-chevron-w);
  height: var(--ic-chevron-h);
  background-image: url("./icons/icon-forward-danger.svg");
}

.nt-i-search {
  width: var(--ic-search-w);
  height: var(--ic-search-h);
  background-image: url("./icons/icon-search.svg");
}

.nt-dark .nt-icon {
  filter: invert(1);
}

.nt-dark .nt-i-chev-danger {
  filter: invert(1) brightness(1.33);
}

/* ------------------------------------------------------------------ *
 * 六、首屏（品牌 + 搜索胶囊）
 * ------------------------------------------------------------------ */
.nt-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter) calc(var(--band-top) - var(--band-bottom));
}

.nt-hero-logo,
.nt-brand-logo,
.nt-splash-logo {
  background-color: var(--nt-bg);
}

.nt-hero-logo {
  width: var(--logo-w);
  height: var(--logo-h);
  flex-shrink: 0;
}

.nt-hero-title {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-bold);
}

.nt-hero-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: var(--fw-reg);
  color: var(--nt-foot);
  text-align: center;
}

/* 搜索胶囊 */
.nt-pill {
  position: relative;
  box-sizing: border-box; /* 定宽 272 是外框宽，左内边距不能把它撑大 */
  display: flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 0 0 var(--gutter);
  background: var(--nt-paper);
  border-radius: var(--r-pill);
}

.nt-hero-pill {
  margin-top: var(--sp-4);
  width: var(--pill-w);
  max-width: 100%;
}

/* 呼吸晕：单独一层，向外扩 1px，只对 box-shadow 做明暗呼吸 */
.nt-halo {
  position: absolute;
  left: calc(0px - var(--halo-gap));
  right: calc(0px - var(--halo-gap));
  top: calc(0px - var(--halo-gap));
  bottom: calc(0px - var(--halo-gap));
  border-radius: var(--r-pill);
  pointer-events: none;
  animation: nt-pill-halo var(--d-halo) infinite;
}

@keyframes nt-pill-halo {
  0%,
  100% {
    box-shadow: 0 0 2px 0 var(--nt-halo-soft);
  }
  50% {
    box-shadow: 0 0 5px 0 var(--nt-halo-glow);
  }
}

.nt-pill-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-reg);
  color: var(--nt-ink);
}

.nt-pill-input::placeholder {
  color: transparent;
}

/* 滚动占位建议：输入框自身不显示 placeholder，由这一层逐个滚动播报 */
.nt-ph {
  position: absolute;
  left: var(--gutter);
  right: var(--pill-h);
  top: 0;
  height: var(--pill-h);
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--d-press) var(--ease-standard);
}

.nt-pill.nt-ph-off .nt-ph {
  opacity: 0;
}

.nt-ph-item {
  height: var(--pill-h);
  line-height: var(--pill-h);
  font-size: var(--fs-h);
  color: var(--nt-placeholder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nt-pill-search {
  flex: 0 0 var(--pill-h);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pill-h);
  height: var(--pill-h);
  background: transparent;
  border: 0;
  transition: opacity var(--d-press) var(--ease-standard), transform var(--d-press) var(--ease-standard);
}

.nt-pill-search:active {
  opacity: 0.6;
  transform: scale(0.88);
}

/* ------------------------------------------------------------------ *
 * 七、按钮
 * ------------------------------------------------------------------ */
.nt-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--gutter);
  background: var(--nt-ink);
  color: var(--nt-bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-mid);
  transition: opacity var(--d-press) var(--ease-standard), transform var(--d-press) var(--ease-standard);
}

.nt-pill-btn.ghost {
  background: var(--nt-paper);
  color: var(--nt-ink);
  font-weight: var(--fw-reg);
}

.nt-pill-btn:active {
  opacity: 0.6;
  transform: scale(0.97);
}

/* 忙碌态：整体压淡且不响应按压缩放 */
.nt-busy,
.nt-busy:active {
  opacity: 0.45;
  transform: none;
}

.nt-dual {
  display: flex;
  flex-shrink: 0;
  gap: var(--dual-gap);
  padding: 0 var(--gutter) 24px;
}

.nt-dual > * {
  flex: 1;
}

/* ------------------------------------------------------------------ *
 * 八、关于页卡片列表
 * ------------------------------------------------------------------ */
.nt-setlist {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.nt-setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--row-h);
  padding: 0 var(--gutter);
  background: var(--nt-paper);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background var(--d-press) var(--ease-standard), transform var(--d-press) var(--ease-standard);
}

.nt-setrow:active {
  transform: scale(0.985);
}

.nt-setl {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.nt-setl-title {
  font-size: var(--fs-h);
  line-height: 22px;
  font-weight: var(--fw-mid);
  color: var(--nt-ink);
}

.nt-setl-desc {
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  font-weight: var(--fw-reg);
  color: var(--nt-text-50);
}

.nt-setrow.danger .nt-setl-title {
  color: var(--nt-danger);
}

/* 关于页顶部品牌区 */
.ab-setlist {
  margin-top: var(--sp-5);
}

.nt-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nt-brand-logo {
  width: var(--logo-w);
  height: var(--logo-h);
}

.nt-brand-name {
  margin-top: var(--sp-4);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-bold);
}

.nt-brand-sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: var(--fw-reg);
  color: var(--nt-foot);
}

/* ------------------------------------------------------------------ *
 * 九、详情页（纯文本长页）
 * ------------------------------------------------------------------ */
.nt-dl-card {
  background: var(--nt-paper);
  border-radius: var(--r-card);
  padding: var(--gutter);
  min-height: 100%;
  box-sizing: border-box;
}

.nt-dl-h1 {
  display: block;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h);
  line-height: var(--lh-h);
  font-weight: var(--fw-mid);
}

.nt-dl-h2 {
  display: block;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  font-weight: var(--fw-reg);
  color: var(--nt-ink);
}

.nt-dl-text {
  display: block;
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  color: var(--nt-text-50);
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

.nt-dl-h2 + .nt-dl-text {
  font-size: var(--fs-sub);
}

.nt-dl-text + .nt-dl-text {
  margin-top: var(--sp-3);
}

.nt-dl-text-light {
  color: var(--nt-text-20);
}

.nt-dl-item + .nt-dl-item {
  margin-top: var(--sp-4);
}

/* ------------------------------------------------------------------ *
 * 十、结果页
 * ------------------------------------------------------------------ */
.res-lead-h {
  margin-top: var(--sp-4);
}

.res-block {
  margin-bottom: var(--sp-3);
}

/* 两栏：左栏标签 64px 定宽右对齐，右栏值自动换行 */
.res-kvlist {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: var(--sp-3);
}

.res-kv-label {
  font-size: var(--fs-note);
  line-height: var(--lh-long);
  font-weight: var(--fw-reg);
  color: var(--nt-foot);
  white-space: nowrap;
  text-align: right;
}

.res-kv-text {
  font-size: var(--fs-body-15);
  line-height: var(--lh-long);
  color: var(--nt-text-20);
  min-width: 0;
  overflow-wrap: anywhere;
}

.res-block-label {
  display: block;
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  font-weight: var(--fw-mid);
  color: var(--nt-text-2);
  margin-bottom: var(--sp-1);
}

.res-section + .res-section {
  margin-top: var(--sp-5);
}

.res-section-title {
  color: var(--nt-text-2);
}

.res-group + .res-group {
  margin-top: var(--sp-5);
}

.res-group-title {
  display: block;
  color: var(--nt-ink);
  margin-bottom: var(--sp-3);
}

.res-group-block {
  padding-left: var(--sp-3);
}

.res-group-block + .res-group-block {
  margin-top: var(--sp-4);
}

.res-block-head {
  display: block;
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  font-weight: var(--fw-mid);
  color: var(--nt-text-2);
  margin-bottom: var(--sp-2);
}

.res-tail-note {
  display: block;
  margin-top: var(--sp-5);
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  color: var(--nt-text-20);
  white-space: pre-wrap;
}

/* 五行与吉忌语义色 */
.nt-c-yi {
  color: var(--nt-yi);
}

.nt-c-ji {
  color: var(--nt-ji);
}

.nt-wx-jin {
  color: var(--wx-jin);
}

.nt-wx-mu {
  color: var(--wx-mu);
}

.nt-wx-shui {
  color: var(--wx-shui);
}

.nt-wx-huo {
  color: var(--wx-huo);
}

.nt-wx-tu {
  color: var(--wx-tu);
}

/* ------------------------------------------------------------------ *
 * 十一、页脚
 * ------------------------------------------------------------------ */
.nt-foot {
  flex-shrink: 0;
  padding: 0 var(--gutter) 12px;
  text-align: center;
}

.nt-setfoot-line {
  display: block;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: var(--fw-reg);
  color: var(--nt-foot);
}

a.nt-setfoot-line {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a.nt-setfoot-line:active {
  opacity: 0.55;
}

/* ------------------------------------------------------------------ *
 * 十二、弹窗与轻提示
 * ------------------------------------------------------------------ */
.nt-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background: var(--nt-mask);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  animation: nt-rise var(--d-drawer) var(--ease-standard) both;
}

/* hidden 必须压得住：.nt-mask 设了 display:flex，会盖掉浏览器默认的 [hidden]{display:none} */
.nt-mask[hidden] {
  display: none;
}

.nt-mask.nt-mask-out {
  animation: nt-fall var(--d-modal-out) var(--ease-standard) both;
  pointer-events: none;
}

@keyframes nt-fall {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

.nt-modal {
  width: 100%;
  max-width: var(--modal-w);
  /* 高 184 是设计稿「确认弹窗」的最小高度；文案长时允许长高，避免按钮被挤出画框 */
  min-height: var(--modal-h);
  box-sizing: border-box;
  background: var(--nt-elevated);
  border-radius: var(--r-panel);
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
}

.nt-modal-title {
  display: block;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-bold);
  margin-bottom: 14px;
}

.nt-modal-scroll {
  /* 按钮固定在底部（margin-top:auto）；描述在中间可滚，长文案不会被截断成半句 */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
}

.nt-modal-desc {
  display: block;
  font-size: var(--fs-body-15);
  line-height: var(--lh-15);
  color: var(--nt-text-50);
  max-height: none;
}

/* 单按键弹窗（生辰提醒这类只有「知道了」的）：取消键让位，确认键占满整行 */
.nt-modal-btns > [hidden] {
  display: none;
}

.nt-modal-btns > [hidden] + * {
  flex: 1;
}

.nt-modal-btns {
  display: flex;
  gap: var(--modal-btn-gap);
  margin-top: auto;
}

.nt-modal-btns > * {
  flex: 1;
  height: var(--modal-btn-h);
}

.nt-toast {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  bottom: 96px;
  z-index: 110;
  background: var(--nt-ink);
  color: var(--nt-bg);
  font-size: var(--fs-sub);
  line-height: var(--lh-15);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  animation: nt-rise 200ms var(--ease-standard) both;
}

.nt-toast[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * 十三、开屏
 * ------------------------------------------------------------------ */
.nt-splash {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background: var(--nt-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nt-splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nt-splash-logo {
  width: var(--logo-splash-w);
  height: var(--logo-splash-h);
}

.nt-splash-name {
  margin-top: var(--sp-4);
  font-size: var(--fs-splash);
  line-height: var(--lh-splash);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.nt-splash-sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: var(--fw-reg);
  color: var(--nt-foot);
  text-align: center;
}

/* 退场：整层先保持到 55%，再整体淡出；品牌组同步缩到 0.75 */
.nt-splash.nt-splash-out {
  animation: nt-splash-bg var(--d-splash) var(--ease-standard) both;
  pointer-events: none;
}

.nt-splash.nt-splash-out .nt-splash-brand {
  animation: nt-splash-brand-out var(--d-splash) var(--ease-standard) both;
}

@keyframes nt-splash-bg {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes nt-splash-brand-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.75);
  }
}

/* ------------------------------------------------------------------ *
 * 十四、动效基元
 * ------------------------------------------------------------------ */
@keyframes nt-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页面容器：双层视差转场 */
.nt-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--nt-bg);
}

.nt-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding-bottom: var(--safe-bottom);
  background: var(--nt-bg);
}

/* 视图层用 hidden 控制显隐；显式写死，避免任何 display 声明反向覆盖 */
.nt-layer[hidden] {
  display: none;
}

.nt-layer.back {
  z-index: 1;
}

.nt-layer.front {
  z-index: 3;
}

.nt-dim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: #000000;
  opacity: 0;
  pointer-events: none;
}

@keyframes nt-tf-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nt-tf-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes nt-px-fwd {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33%);
  }
}

@keyframes nt-px-back {
  from {
    transform: translateX(-33%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes nt-dim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.24;
  }
}

@keyframes nt-dim-out {
  from {
    opacity: 0.24;
  }
  to {
    opacity: 0;
  }
}

.nt-tf-in {
  animation: nt-tf-in var(--d-page) var(--ease-standard) both;
}

.nt-tf-out {
  animation: nt-tf-out var(--d-page) var(--ease-standard) both;
}

.nt-px-fwd {
  animation: nt-px-fwd var(--d-page) var(--ease-standard) both;
}

.nt-px-back {
  animation: nt-px-back var(--d-page) var(--ease-standard) both;
}

.nt-dim-in {
  animation: nt-dim-in var(--d-page) var(--ease-standard) both;
}

.nt-dim-out {
  animation: nt-dim-out var(--d-page) var(--ease-standard) both;
}

/* 单层滑动（不叠双层时用） */
@keyframes nt-tf-in-back { from { transform: translateX(-33%); } to { transform: none; } }
@keyframes nt-slide-in {
  from {
    transform: translateX(33%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes nt-slide-in-back {
  from {
    transform: translateX(-33%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.nt-slide-in {
  animation: nt-tf-in var(--d-page) var(--ease-standard) both;
}

.nt-slide-in-back {
  animation: nt-tf-in-back var(--d-page) var(--ease-standard) both;
}

/* 冷启动错落入场：每级 40ms，只播一次（播完由 JS 摘掉 .nt-cascade） */
.nt-cascade .nt-hero-logo {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 0ms;
}

.nt-cascade .nt-hero-title {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 40ms;
}

.nt-cascade .nt-hero-pill {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 80ms;
}

.nt-cascade .nt-hero-note {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 120ms;
}

.nt-cascade .nt-page-h {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 0ms;
}

.nt-cascade .nt-dl-card {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 40ms;
}

.nt-cascade .nt-dual {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 80ms;
}

.nt-cascade .nt-foot {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 120ms;
}

.nt-cascade .nt-brand {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 0ms;
}

.nt-cascade .nt-setrow:nth-child(1) {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 40ms;
}

.nt-cascade .nt-setrow:nth-child(2) {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 80ms;
}

.nt-cascade .nt-setrow:nth-child(3) {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 120ms;
}

.nt-cascade .nt-setrow:nth-child(4) {
  animation: nt-rise var(--d-page) var(--ease-standard) backwards;
  animation-delay: 160ms;
}

/* 主题交叉过渡：只在 320ms 门控窗口内生效，且显式枚举类名（不用通配符） */
.nt-theme-fade .nt-layer,
.nt-theme-fade .nt-dl-card,
.nt-theme-fade .nt-setrow,
.nt-theme-fade .nt-pill,
.nt-theme-fade .nt-pill-btn,
.nt-theme-fade .nt-modal,
.nt-theme-fade .nt-toast,
.nt-theme-fade .nt-nav-title,
.nt-theme-fade .nt-nav-about,
.nt-theme-fade .nt-page-h,
.nt-theme-fade .nt-hero-title,
.nt-theme-fade .nt-hero-note,
.nt-theme-fade .nt-brand-name,
.nt-theme-fade .nt-brand-sub,
.nt-theme-fade .nt-dl-h1,
.nt-theme-fade .nt-dl-text,
.nt-theme-fade .nt-setl-title,
.nt-theme-fade .nt-setl-desc,
.nt-theme-fade .nt-modal-title,
.nt-theme-fade .nt-modal-desc,
.nt-theme-fade .nt-setfoot-line,
.nt-theme-fade .nt-pill-input,
.nt-theme-fade .nt-ph-item,
.nt-theme-fade .res-block-label,
.nt-theme-fade .nt-icon {
  transition: background-color var(--d-theme) var(--ease-standard),
    color var(--d-theme) var(--ease-standard),
    border-color var(--d-theme) var(--ease-standard),
    filter var(--d-theme) var(--ease-standard);
}

/* ------------------------------------------------------------------ *
 * 十五、响应式与桌面态
 * ------------------------------------------------------------------ */
@media (hover: hover) and (min-width: 768px) {
  .nt-setrow:hover {
    background: var(--nt-elevated);
  }

  .nt-pill-btn:hover,
  .nt-pill-search:hover {
    opacity: 0.85;
  }
}

@media (max-width: 359px) {
  :root,
  page {
    --gutter: 16px;
    --pill-w: 100%;
  }
}

@media (min-width: 768px) {
  .nt-stage {
    align-items: center;
  }

  .nt-layer {
    left: 50%;
    right: auto;
    width: var(--w-tablet);
    max-width: 100%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px) {
  .nt-layer {
    width: var(--w-desktop);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root,
  page {
    --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

/* ------------------------------------------------------------------ *
 * 十六、安装引导条（PWA 专用，仅浏览器放行安装时才出现）
 * ------------------------------------------------------------------ */

.nt-installbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 var(--sp-4) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--nt-ink);
  color: var(--nt-bg);
  border-radius: var(--r-md);
}

.nt-installbar[hidden] {
  display: none;
}

.nt-installtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nt-installtitle {
  font-size: var(--fs-sub);
  line-height: var(--lh-long);
  font-weight: var(--fw-mid);
}

.nt-installdesc {
  font-size: var(--fs-cap);
  line-height: var(--lh-note);
  font-weight: var(--fw-reg);
  opacity: 0.8;
}

.nt-installbtn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: var(--fs-sub);
  font-weight: var(--fw-mid);
  cursor: pointer;
  transition: opacity var(--d-press) var(--ease-standard);
}

.nt-installbtn:active {
  opacity: 0.6;
}

/* 减弱动效偏好：停常驻呼吸与错落入场，功能不变 */
@media (prefers-reduced-motion: reduce) {
  .nt-halo {
    animation: none;
  }

  .nt-cascade .nt-hero-logo,
  .nt-cascade .nt-hero-title,
  .nt-cascade .nt-hero-pill,
  .nt-cascade .nt-hero-note,
  .nt-cascade .nt-page-h,
  .nt-cascade .nt-dl-card,
  .nt-cascade .nt-dual,
  .nt-cascade .nt-foot,
  .nt-cascade .nt-brand,
  .nt-cascade .nt-setrow:nth-child(1),
  .nt-cascade .nt-setrow:nth-child(2),
  .nt-cascade .nt-setrow:nth-child(3),
  .nt-cascade .nt-setrow:nth-child(4) {
    animation: none;
  }
}

/* PWA 端根节点已挂 .nt-page-safe（padB 34），层内不再重复避让（对齐旧版 PWA 口径；
   小程序/uni-app 无 page-safe 根，仍走 .nt-layer 自身的 padB） */
.nt-layer-web { padding-bottom: 0; }