/* 八云前端（暗黑 · 素版） · 手机 / 平板 / 电脑。只管展示，不碰排盘口径。 */
:root {
  --bg: #0a0a0c;
  --bg2: #101014;
  --card: #141418;
  --card-solid: #141418;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --text: #e8e8ed;
  --muted: #8a8a96;
  --dim: #5c5c68;
  --accent: #3d7eff;
  --accent-hi: #5a92ff;
  --danger: #ff5d6c;
  --ok: #3ddc97;
  --wx-木: #3fcf72;
  --wx-火: #ff4f5e;
  --wx-土: #b98552;
  --wx-金: #e8c040;
  --wx-水: #4a7ae8;
  --r-lg: 14px;
  --r: 10px;
  --r-sm: 8px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --top-h: 56px;
  --tab-h: 58px;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.spacer { flex: 1; }

/* 极淡网格 / 点阵 / 扫描线：科技感，克制，无艳色 */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 18%, transparent 78%);
}
.bg-dots {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 10%, transparent 70%);
}
.bg-scan {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.012) 3px,
    rgba(255,255,255,.012) 4px
  );
  opacity: .55;
  mix-blend-mode: soft-light;
}

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--top-h) + var(--sat));
  padding: var(--sat) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  background: rgba(10, 10, 12, 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(61,126,255,.06);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img { height: 28px; width: auto; opacity: .88; }
.brand-mark img { height: 26px; filter: drop-shadow(0 0 6px rgba(61,126,255,.25)); }
.brand-txt { display: none; }
.topnav { display: none; gap: 2px; margin-left: 0; }
.topnav a { padding: 8px 14px; border-radius: 8px; color: var(--muted); font-size: 14px; transition: color .15s, background .15s; }
.topnav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.topnav a.on { color: var(--text); background: rgba(61,126,255,.16); }
.auth { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--accent); color: #fff; flex-shrink: 0; }
.user-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* 按钮：实色，无渐变 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); cursor: pointer;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.btn-tech {
  width: min(280px, 100%);
  letter-spacing: .28em; padding-left: calc(18px + .28em);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 0 1px rgba(61,126,255,.08), 0 0 18px rgba(61,126,255,.06);
}
.btn-tech.btn-primary {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 22px rgba(61,126,255,.28);
}
.btn:active { opacity: .85; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-primary { border-color: transparent; color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:disabled { opacity: .5; cursor: progress; }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.chip { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: transparent;
  font-size: 13px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; position: relative; }
.chip::after { content: ""; position: absolute; inset: -4px; }
.chip:hover { color: var(--text); border-color: var(--line2); }

/* 布局壳 */
.shell { position: relative; z-index: 1; padding: 16px calc(16px + var(--sar)) calc(var(--tab-h) + var(--sab) + 24px) calc(16px + var(--sal)); }
.side, .main { min-width: 0; }

/* 卡片 / 面板 */
.panel, .card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 1px rgba(61,126,255,.04), 0 8px 28px rgba(0,0,0,.28);
}
.panel { padding: 18px; position: relative; }
.card { padding: 16px; position: relative; }
.panel::before, .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 17px; letter-spacing: .08em; font-weight: 600; }
.card-title { font-size: 13px; color: var(--muted); letter-spacing: .16em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-title::before { content: ""; width: 3px; height: 12px; border-radius: 1px; background: var(--accent); }

/* 表单：老八云式上下行（左标签 · 右控件），暗黑科技感 */
.form-stack {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 1px rgba(61,126,255,.05);
}
.frow {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.frow:last-child { border-bottom: 0; }
.frow-top { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.frow-hint { min-height: 40px; }
.frow > label, .frow > .lab {
  width: 84px; flex-shrink: 0; font-size: 14px; color: var(--muted); letter-spacing: .04em;
}
.fctl { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.fctl-end { justify-content: flex-end; gap: 10px; }
.fctl input[type=text], .fctl input[type=number], .fctl input[type=date], .fctl input[type=time],
.fctl select, .fctl textarea {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 0; outline: none; text-align: right;
  font-size: 15px; transition: background .15s;
  -webkit-appearance: none; appearance: none;
}
.fctl textarea { text-align: left; resize: vertical; min-height: 56px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.fctl input:focus, .fctl select:focus, .fctl textarea:focus {
  background: rgba(61,126,255,.06);
}
input[type=search], .library .search {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line2); outline: none; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
input[type=search]:focus, .library .search:focus {
  border-color: rgba(61,126,255,.65); box-shadow: 0 0 0 1px rgba(61,126,255,.2), 0 0 16px rgba(61,126,255,.12);
}
input::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
input[type=date], input[type=time] { color-scheme: dark; }
.fctl select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 4px) 50%, calc(100% + 1px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 16px;
}
select option { background: var(--card-solid); }
/* 生辰滚轮触发器 */
.picker-trigger {
  width: 100%; min-height: 40px; padding: 8px 4px 8px 10px; border: 0; border-radius: 8px;
  background: transparent; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  cursor: pointer; text-align: right; transition: background .15s;
}
.picker-trigger:hover, .picker-trigger:focus-visible {
  background: rgba(61,126,255,.06); outline: none;
}
.picker-trigger span { font-size: 15px; letter-spacing: .02em; color: var(--text); }
.picker-chev {
  width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); flex-shrink: 0; margin-right: 4px; opacity: .7;
}

/* 滚轮选择器 */
body.wp-open { overflow: hidden; }
.wp-root { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.wp-root.hidden { display: none !important; }
.wp-mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.wp-sheet {
  position: relative; z-index: 1; width: min(560px, 100%);
  background: #121218; border: 1px solid var(--line2); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(61,126,255,.08);
  padding-bottom: max(12px, var(--sab));
  animation: wpUp .22s ease-out;
}
@keyframes wpUp {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.wp-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.wp-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--text); }
.wp-btn {
  min-width: 56px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 15px;
}
.wp-btn.wp-ok { color: var(--accent-hi); font-weight: 600; }
.wp-btn:hover { background: rgba(255,255,255,.04); }
.wp-wheels {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 220px; margin: 8px 8px 4px; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.wp-col {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; text-align: center;
}
.wp-col::-webkit-scrollbar { display: none; }
.wp-spacer { height: 90px; flex-shrink: 0; pointer-events: none; }
.wp-item {
  height: 40px; line-height: 40px; scroll-snap-align: center;
  font-size: 16px; color: var(--muted); letter-spacing: .04em;
  user-select: none; -webkit-user-select: none;
}
.wp-hl {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 40px; margin-top: -20px;
  border-radius: 10px; pointer-events: none;
  background: rgba(61,126,255,.10); border: 1px solid rgba(61,126,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
@media (min-width: 1024px) {
  .wp-root { align-items: center; padding: 24px; }
  .wp-sheet {
    border-radius: 14px; border: 1px solid var(--line2);
    box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(61,126,255,.1);
    animation: wpFade .18s ease-out;
  }
  @keyframes wpFade {
    from { transform: translateY(8px) scale(.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wp-sheet { animation: none !important; }
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.seg { display: grid; grid-template-columns: 1fr 1fr; width: min(210px, 100%); margin-left: auto; padding: 3px; gap: 3px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line2); }
.seg button { min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; transition: background .15s, color .15s; position: relative; }
.seg button::after { content: ""; position: absolute; inset: -2px 0; }
.seg button.on { color: #fff; background: var(--accent); box-shadow: 0 0 12px rgba(61,126,255,.25); }

.toggle { position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); cursor: pointer; transition: background .2s; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; inset: -6px -2px; }
.toggle i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.toggle.on { background: var(--accent); box-shadow: 0 0 14px rgba(61,126,255,.28); }
.toggle.on i { transform: translateX(20px); }
.toggle:disabled { opacity: .35; cursor: not-allowed; }
.hint { font-size: 12px; color: var(--dim); margin: 10px 2px 0; line-height: 1.6; }
.error { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,93,108,.1); border: 1px solid rgba(255,93,108,.3); color: var(--danger); font-size: 13px; }
#btn-submit { margin-top: 16px; box-shadow: 0 0 22px rgba(61,126,255,.22); }

/* 首页：上置 logo + 竖直入口；约 12s 暗黑科技入场（只播一次，不循环） */
.hero {
  position: relative; display: flex; align-items: flex-start; justify-content: center;
  min-height: calc(100dvh - var(--top-h) - var(--tab-h) - 48px);
  padding-top: clamp(32px, 9vh, 80px);
}
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* 细网格底纹：偏 HUD / 黑科技，极低对比 */
.hero-grid {
  position: absolute; inset: -10% -20%;
  background-image:
    linear-gradient(rgba(61,126,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,126,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 55% 50% at 50% 28%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 28%, #000 0%, transparent 72%);
  opacity: 0;
}

/* 径向光晕：压在 logo 后 */
.hero-glow {
  position: absolute; left: 50%; top: 10%;
  width: min(380px, 90vw); height: min(380px, 90vw);
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,126,255,.22) 0%, rgba(61,126,255,.06) 38%, transparent 68%);
  filter: blur(2px);
  opacity: 0;
}

.hero-ring {
  position: absolute; left: 50%; top: 12%; transform: translate(-50%, 0) scale(.88);
  border-radius: 50%;
  opacity: 0;
}
.hero-ring--outer {
  width: min(360px, 86vw); height: min(360px, 86vw);
  border: 1px solid rgba(61,126,255,.10);
  box-shadow: 0 0 48px rgba(61,126,255,.06), inset 0 0 48px rgba(61,126,255,.03);
}
.hero-ring--mid {
  width: min(300px, 74vw); height: min(300px, 74vw);
  top: 14%;
  border: 1px solid rgba(61,126,255,.16);
  box-shadow: 0 0 36px rgba(61,126,255,.08), inset 0 0 28px rgba(61,126,255,.04);
}
.hero-ring--inner {
  width: min(220px, 56vw); height: min(220px, 56vw);
  top: 18%;
  border: 1px solid rgba(120,170,255,.22);
  box-shadow: 0 0 24px rgba(61,126,255,.12), inset 0 0 18px rgba(61,126,255,.05);
}

/* 刻度环：专业仪表面感 */
.hero-ticks {
  position: absolute; left: 50%; top: 14%;
  width: min(300px, 74vw); height: min(300px, 74vw);
  transform: translate(-50%, 0) rotate(0deg);
  border-radius: 50%;
  opacity: 0;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(140,180,255,.35) 0deg 0.6deg,
      transparent 0.6deg 15deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  mask-image: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
}

.hero-scan {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  width: min(240px, 60vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,210,255,.75), transparent);
  box-shadow: 0 0 14px rgba(61,126,255,.55), 0 0 32px rgba(61,126,255,.22);
  opacity: 0;
}
.hero-scan--alt {
  width: min(180px, 46vw);
  background: linear-gradient(90deg, transparent, rgba(100,170,255,.55), transparent);
  box-shadow: 0 0 10px rgba(61,126,255,.4);
}

.hero-particles { position: absolute; inset: 0; }
.hero-particles span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #9ec0ff;
  box-shadow: 0 0 6px rgba(120,180,255,.85);
  opacity: 0;
}
.hero-particles span:nth-child(1)  { left: 18%; top: 22%; }
.hero-particles span:nth-child(2)  { left: 78%; top: 18%; width: 3px; height: 3px; }
.hero-particles span:nth-child(3)  { left: 28%; top: 48%; }
.hero-particles span:nth-child(4)  { left: 70%; top: 42%; }
.hero-particles span:nth-child(5)  { left: 12%; top: 36%; width: 1px; height: 1px; }
.hero-particles span:nth-child(6)  { left: 86%; top: 34%; }
.hero-particles span:nth-child(7)  { left: 42%; top: 14%; }
.hero-particles span:nth-child(8)  { left: 58%; top: 56%; width: 3px; height: 3px; }
.hero-particles span:nth-child(9)  { left: 22%; top: 62%; }
.hero-particles span:nth-child(10) { left: 74%; top: 64%; }
.hero-particles span:nth-child(11) { left: 48%; top: 8%; width: 1px; height: 1px; }
.hero-particles span:nth-child(12) { left: 64%; top: 28%; }

.hero-inner {
  position: relative; z-index: 1; text-align: center; padding: 8px 12px 24px; width: min(360px, 100%);
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(100dvh - var(--top-h) - var(--tab-h) - 56px);
}
.hero-logo { width: 112px; margin: 0 auto 0; opacity: 1; transform: none; }
.hero-logo img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 14px rgba(61,126,255,.28));
}
.hero h1 { display: none; }
.hero-cta {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-top: auto;
  margin-bottom: 10px;
  padding-top: 28px;
}
#view-home .hero-cta > * { opacity: 1; transform: none; width: min(280px, 100%); }
.guest-card .hero-cta {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px;
}
.guest-card .hero-cta > * { opacity: 1; transform: none; width: auto; }

/* —— 背景特效时间轴（只播一次；CTA／logo／简介立刻可见可点）——
   主按钮与通道入口：首屏即 opacity:1，无延迟、不依次淡入
   0–5s  网格／环／刻度／扫描／粒子／光晕（背景层，pointer-events:none）
*/
body[data-view="home"] .hero-grid {
  animation: heroGridIn 2.2s cubic-bezier(.22,.7,.2,1) 0s both;
}
body[data-view="home"] .hero-ring--outer {
  animation: heroRingIn 2.4s cubic-bezier(.22,.7,.2,1) .35s both;
}
body[data-view="home"] .hero-ring--mid {
  animation: heroRingIn 2.2s cubic-bezier(.22,.7,.2,1) 1.4s both;
}
body[data-view="home"] .hero-ring--inner {
  animation: heroRingIn 2s cubic-bezier(.22,.7,.2,1) 2.6s both;
}
body[data-view="home"] .hero-ticks {
  animation: heroTicksIn 3.2s cubic-bezier(.22,.7,.2,1) 1.6s both;
}
body[data-view="home"] .hero-glow {
  animation: heroGlowIn 4.5s cubic-bezier(.22,.7,.2,1) 2.8s both;
}
body[data-view="home"] .hero-scan:not(.hero-scan--alt) {
  animation: heroScan 2.4s ease-in-out 1.8s both;
}
body[data-view="home"] .hero-scan--alt {
  animation: heroScanAlt 2.6s ease-in-out 6.6s both;
}
body[data-view="home"] .hero-particles span:nth-child(1)  { animation: heroParticleIn 2.4s ease-out 3.0s both; }
body[data-view="home"] .hero-particles span:nth-child(2)  { animation: heroParticleIn 2.4s ease-out 3.25s both; }
body[data-view="home"] .hero-particles span:nth-child(3)  { animation: heroParticleIn 2.4s ease-out 3.45s both; }
body[data-view="home"] .hero-particles span:nth-child(4)  { animation: heroParticleIn 2.4s ease-out 3.65s both; }
body[data-view="home"] .hero-particles span:nth-child(5)  { animation: heroParticleIn 2.4s ease-out 3.85s both; }
body[data-view="home"] .hero-particles span:nth-child(6)  { animation: heroParticleIn 2.4s ease-out 4.05s both; }
body[data-view="home"] .hero-particles span:nth-child(7)  { animation: heroParticleIn 2.4s ease-out 4.2s both; }
body[data-view="home"] .hero-particles span:nth-child(8)  { animation: heroParticleIn 2.4s ease-out 4.4s both; }
body[data-view="home"] .hero-particles span:nth-child(9)  { animation: heroParticleIn 2.4s ease-out 4.6s both; }
body[data-view="home"] .hero-particles span:nth-child(10) { animation: heroParticleIn 2.4s ease-out 4.8s both; }
body[data-view="home"] .hero-particles span:nth-child(11) { animation: heroParticleIn 2.4s ease-out 5.0s both; }
body[data-view="home"] .hero-particles span:nth-child(12) { animation: heroParticleIn 2.4s ease-out 5.15s both; }

/* logo／CTA 立即可见，不再等特效；特效仅背景层 */
body[data-view="home"] .hero-logo { animation: none; opacity: 1; transform: none; filter: none; }
#view-home .hero-cta > * { animation: none !important; opacity: 1 !important; transform: none !important; }

@keyframes heroGridIn {
  from { opacity: 0; }
  40% { opacity: .85; }
  to { opacity: .55; }
}
@keyframes heroRingIn {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.86); }
  55% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes heroTicksIn {
  from { opacity: 0; transform: translate(-50%, 0) rotate(-18deg); }
  45% { opacity: .7; }
  to { opacity: .45; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes heroGlowIn {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); }
  45% { opacity: .95; transform: translate(-50%, 0) scale(1.04); }
  75% { opacity: .7; transform: translate(-50%, 0) scale(1); }
  100% { opacity: .55; transform: translate(-50%, 0) scale(1); }
}
@keyframes heroScan {
  0% { opacity: 0; top: 8%; }
  12% { opacity: .95; }
  100% { opacity: 0; top: 46%; }
}
@keyframes heroScanAlt {
  0% { opacity: 0; top: 12%; }
  15% { opacity: .7; }
  100% { opacity: 0; top: 52%; }
}
@keyframes heroParticleIn {
  0% { opacity: 0; transform: translateY(6px) scale(.4); }
  35% { opacity: .95; transform: translateY(0) scale(1); }
  100% { opacity: .55; transform: translateY(-4px) scale(1); }
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(14px) scale(.92); filter: brightness(1.55) saturate(1.15); }
  55% { opacity: 1; transform: translateY(0) scale(1.015); filter: brightness(1.12); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@keyframes heroCtaIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="home"] .hero-logo,
  body[data-view="home"] .hero-ring,
  body[data-view="home"] .hero-scan,
  body[data-view="home"] .hero-grid,
  body[data-view="home"] .hero-glow,
  body[data-view="home"] .hero-ticks,
  body[data-view="home"] .hero-particles span,
  #view-home .hero-cta > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-scan, .hero-particles, .hero-ticks { display: none; }
  .hero-grid { opacity: .35; }
  .hero-glow { opacity: .4; }
}

/* 首页「简介」入口：轻链，不抢三主按钮 */
.hero-about {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 4px; margin-bottom: clamp(20px, 4vh, 40px);
  min-height: 40px; padding: 0 16px;
  font-size: 13px; letter-spacing: .36em; padding-left: calc(16px + .36em);
  color: var(--dim);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
  opacity: 1;
}
.hero-about:hover {
  color: var(--muted);
  border-color: rgba(61,126,255,.22);
  background: rgba(61,126,255,.06);
  box-shadow: 0 0 14px rgba(61,126,255,.08);
}
body[data-view="home"] .hero-about {
  animation: none; opacity: 1;
}
body[data-view="home"] .hero .site-slogan {
  opacity: 1;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="home"] .hero-about,
  body[data-view="home"] .hero .site-slogan { animation: none !important; opacity: 1 !important; }
}

/* 简介／背景页：暗黑素净，适中阅读宽 */
.about { display: flex; flex-direction: column; gap: 12px; width: min(680px, 100%); margin: 0 auto; padding-bottom: 28px; }
.about-bar { display: flex; align-items: center; gap: 8px; }
.about-kicker {
  font-size: 12px; letter-spacing: .42em; padding-left: .42em;
  color: var(--dim); text-transform: none;
}
.about-card {
  position: relative;
  padding: 28px 22px 32px;
  border-radius: var(--r-lg);
  background: var(--card-solid);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 28px rgba(61,126,255,.05);
  overflow: hidden;
}
.about-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(61,126,255,.35);
  box-shadow: 0 0 12px rgba(61,126,255,.35);
  pointer-events: none;
}
.about-couplet {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(22px, 5.6vw, 28px);
  line-height: 1.55;
  letter-spacing: .18em;
  margin: 4px 0 26px;
  padding: 8px 8px 22px;
  border-bottom: 1px solid var(--line);
  color: #f0f0f5;
}
.about-couplet p { margin: 0; }
.about-body {
  font-size: 15px; line-height: 1.9; color: var(--muted);
}
.about-body p { margin: 0 0 1.05em; }
.about-body p:last-child { margin-bottom: 0; }
.about-body .mark {
  color: #e8e8ed;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0 .1em;
  box-shadow: inset 0 -1px 0 rgba(61,126,255,.45);
}
.about-body .en {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--dim); letter-spacing: .02em;
}
.about-arrive { color: #d1d1d6; }
.about-strong {
  color: #e8e8ed; font-weight: 500;
  padding: 10px 0;
  border-left: 2px solid rgba(61,126,255,.55);
  padding-left: 14px;
  margin-left: 2px;
}
.about-verse {
  text-align: center;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .12em;
  color: #e8e8ed;
  padding: 14px 8px;
  margin: 8px 0 14px !important;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.about-close {
  text-align: center;
  color: #a8a8b4;
  letter-spacing: .22em;
  font-size: 14px;
  margin-top: 8px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* 公司口号：各页文末 */
.site-slogan {
  text-align: center;
  color: var(--dim);
  letter-spacing: .18em;
  font-size: 12px;
  margin: 18px 0 8px;
  padding: 14px 8px 4px;
  border-top: 1px solid var(--line);
}
.site-slogan-form {
  margin-top: 20px;
  margin-bottom: 4px;
}
.hero .site-slogan {
  border-top: none;
  margin-top: 8px;
  padding-top: 4px;
  letter-spacing: .22em;
  color: #6a6a76;
}
@media (min-width: 640px) {
  .about-card { padding: 36px 40px 40px; }
  .about-body { font-size: 16px; line-height: 1.95; }
  .about-verse { font-size: 18px; }
}
@media (min-width: 1024px) {
  .about { width: min(720px, 100%); }
  .hero-about { margin-bottom: clamp(28px, 5vh, 48px); }
}

/* 结果页：上基本信息 / 中四柱 / 下横排可点大运 / 再下横排可点流年（结构对齐老八云） */
.result { display: flex; flex-direction: column; gap: 12px; }
.result-bar { display: flex; align-items: center; gap: 8px; }
.result-head { display: flex; flex-direction: column; gap: 10px; }
.result-head .rh-top { display: flex; align-items: center; gap: 12px; }
.result-head .sex { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; flex-shrink: 0;
  background: #1a2740; color: #9bb8ff; border: 1px solid rgba(61,126,255,.4); }
.result-head .sex.f { background: #2a1a20; color: #ff8a96; border-color: rgba(255,93,108,.35); }
.result-head .rh-name { font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.result-head .rh-place { font-size: 13px; color: var(--muted); margin-top: 2px; }
.result-head .rh-meta {
  margin-top: 2px; padding: 12px 14px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.75; color: var(--muted);
}
.result-head .rh-meta .meta-line { display: block; }
.result-head .rh-meta .meta-strong { color: #d1d1d6; }
.result-head .rh-meta b { color: var(--text); font-weight: 500; margin-right: 6px; }

/* 四柱表 */
.pillars { display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.pillars > div { display: flex; align-items: center; justify-content: center; padding: 8px 2px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; text-align: center; }
.pillars > .lab { border-left: 0; font-size: 11px; color: var(--dim); writing-mode: vertical-rl; letter-spacing: .2em; background: rgba(255,255,255,.02); padding: 8px 0; }
.pillars > .r-last { border-bottom: 0; }
.pillars > .col-h { font-size: 12px; color: var(--muted); letter-spacing: .2em; background: rgba(255,255,255,.03); padding: 9px 2px; }
.pillars > .col-h.day { color: var(--text); background: rgba(61,126,255,.12); }
.pillars > .lab.col-h { writing-mode: horizontal-tb; }
.pillars .gz { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.1; }
.pillars > .c-day { background: rgba(61,126,255,.05); }
.ss-vert { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.12; font-size: 13px; color: #c4c4ce; }
.ss-vert > span { display: block; }
.ss-vert.riyuan { color: var(--accent-hi); }
.cang { display: flex; justify-content: center; gap: 1px; width: 100%; font-size: 17px; }
.cang > span { flex: 0 1 1.3em; min-width: 0; display: flex; justify-content: center; }
.cang.gan > span { font-family: var(--serif); font-weight: 700; }
.cang .ss-vert { font-size: 11.5px; color: var(--muted); }
.pillars > .r-cang, .pillars > .r-cangss { align-items: flex-start; }

/* 大运 / 流年：老八云连续横条色块（可点切换），暗黑实色 */
.yun-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.55; overflow-wrap: anywhere; }
.strip-wrap { margin-bottom: 14px; }
.strip-wrap:last-child { margin-bottom: 0; }
.strip-label { font-size: 15px; color: #d1d1d6; letter-spacing: .06em; margin-bottom: 6px; font-weight: 700; }
.strip {
  display: flex; flex-direction: row-reverse; /* 最早一步在最右侧，对齐老八云 */
  align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.strip::-webkit-scrollbar { height: 3px; } .strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.yc {
  flex: 1 1 0; min-width: 58px; margin: 0; padding: 8px 3px 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font: inherit; text-align: center; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background .12s; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.yc:not(:first-child) { border-right: 1px solid var(--line); }
.yc:hover { background: rgba(121, 147, 172, .16); }
.yc.on { background: rgba(121, 147, 172, .42); box-shadow: none; outline: none; }
.yc .y { font-size: 12px; line-height: 1.25; color: #c7c7cc; font-variant-numeric: tabular-nums; }
.yc .a { font-size: 11px; line-height: 1.25; color: var(--muted); margin-bottom: 4px; }
.yc.on .y, .yc.on .a { color: var(--text); }
.yc .ln { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 20px; line-height: 1.2; }
.yc .gz { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.15; }
.yc .ss-vert { font-size: 10px; line-height: 1.05; color: var(--muted); }
.yc .now-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(61,220,151,.55); }
.liunian-wrap .strip { overflow-x: hidden; }
.liunian-wrap .yc { min-width: 0; padding: 6px 1px 8px; }
.liunian-wrap .yc .y { font-size: 10px; }
.liunian-wrap .yc .a { font-size: 9px; margin-bottom: 2px; }
.liunian-wrap .yc .gz { font-size: 14px; }
.liunian-wrap .yc .ss-vert { font-size: 8px; }
.liunian-wrap .yc .ln { min-height: 16px; gap: 1px; }

.notes summary { cursor: pointer; color: var(--muted); font-size: 13px; min-height: 28px; }
.notes .notes-body { margin-top: 10px; font-size: 12px; color: var(--dim); line-height: 1.7; }

.wx-木 { color: var(--wx-木); } .wx-火 { color: var(--wx-火); } .wx-土 { color: var(--wx-土); } .wx-金 { color: var(--wx-金); } .wx-水 { color: var(--wx-水); }

/* 我的命盘 */
.library .search { margin-bottom: 12px; }
.lib-list { display: grid; gap: 10px; }
.lib-item { display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); transition: border-color .15s; }
.lib-item:hover { border-color: var(--line2); }
.lib-no { flex: 0 0 auto; min-width: 34px; display: flex; align-items: center; justify-content: center; padding: 0 2px 0 4px;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-open { flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; min-height: 44px; }
.lib-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lib-name .badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(61,126,255,.18); color: #9bb8ff; font-weight: 500; }
.lib-tgdz { font-family: var(--serif); letter-spacing: .14em; margin-top: 4px; font-size: 15px; }
.lib-meta { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-acts { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.lib-acts button { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; font-size: 16px; }
.lib-acts button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.lib-acts button.on { color: var(--wx-金); }
.guest-card { text-align: center; padding: 28px 18px; }
.guest-card b { font-size: 16px; } .guest-card p { font-size: 13px; }
.mini-lib { display: none; }
.mini-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.mini-item:hover { background: rgba(255,255,255,.05); }
.mini-item b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item span { font-family: var(--serif); font-size: 13px; color: var(--muted); letter-spacing: .08em; white-space: nowrap; }

/* 手机底部 tab */
.tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + var(--sab)); padding: 0 var(--sar) var(--sab) var(--sal);
  background: rgba(10, 10, 12, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--dim); min-height: 44px; transition: color .15s; }
.tabbar a.on { color: var(--text); }
.tabbar a.on .ic { background: var(--accent); }
.tabbar a.disabled { opacity: .35; pointer-events: none; }
.ic { width: 22px; height: 22px; background: var(--dim); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.tabbar a:not(.on) .ic { background: #6a6a76; }
.ic-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v9h6v-6h2v6h6v-9h3z'/%3E%3C/svg%3E"); }
.ic-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v2H4zm0 5h16v2H4zm0 5h10v2H4zm0 5h10v2H4zm13-4 4 4-4 4z'/%3E%3C/svg%3E"); }
.ic-pan { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z'/%3E%3C/svg%3E"); }
.ic-lib { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14z'/%3E%3C/svg%3E"); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.quick { display: flex; flex-direction: column; gap: 12px; width: min(720px, 100%); margin: 0 auto; padding-bottom: 28px; }
.quick-card { display: flex; flex-direction: column; gap: 14px; }
.quick-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.quick-hint { margin: 0; font-size: 13px; line-height: 1.55; }
.quick-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.quick-raw { width: 100%; min-height: 96px; resize: vertical; font-size: 18px; line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line2); background: #0c0c10; color: #eee; }
.quick-raw:focus { outline: none; border-color: rgba(120,160,255,.45); box-shadow: 0 0 0 3px rgba(80,120,255,.15); }
.quick-row { display: flex; align-items: center; gap: 12px; }
.quick-row .lab { min-width: 72px; color: var(--muted); font-size: 13px; }
.quick-row .fctl { flex: 1; }
.quick-row select, .quick-row input[type=text] { width: 100%; }
.quick-preview { min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line);
  font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.quick-preview.ok { border-style: solid; border-color: rgba(90,200,140,.35); color: #d8e8dc; }
.quick-preview.bad { border-style: solid; border-color: rgba(255,100,100,.4); color: #ffb4b4; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-actions .btn { flex: 1; min-width: 140px; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tab-h) + var(--sab) + 18px); transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; background: #1c1c22; border: 1px solid var(--line2); font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.fade-in { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none !important; } }

/* 手机：按视图切页 */
@media (max-width: 1023.98px) {
  body[data-view="home"] #side, body[data-view="home"] #view-result, body[data-view="home"] #view-library, body[data-view="home"] #view-about, body[data-view="home"] #view-quick, body[data-view="home"] #view-lingxiao { display: none; }
  body[data-view="input"] #main { display: none; }
  body[data-view="result"] #side, body[data-view="result"] #view-home, body[data-view="result"] #view-library, body[data-view="result"] #view-about, body[data-view="result"] #view-quick, body[data-view="result"] #view-lingxiao { display: none; }
  body[data-view="library"] #side, body[data-view="library"] #view-home, body[data-view="library"] #view-result, body[data-view="library"] #view-about, body[data-view="library"] #view-quick, body[data-view="library"] #view-lingxiao { display: none; }
  body[data-view="about"] #side, body[data-view="about"] #view-home, body[data-view="about"] #view-result, body[data-view="about"] #view-library, body[data-view="about"] #view-quick, body[data-view="about"] #view-lingxiao { display: none; }
  body[data-view="quick"] #side, body[data-view="quick"] #view-home, body[data-view="quick"] #view-result, body[data-view="quick"] #view-library, body[data-view="quick"] #view-about, body[data-view="quick"] #view-lingxiao { display: none; }
  body[data-view="result"] #view-result, body[data-view="library"] #view-library { display: flex !important; }
  body[data-view="library"] #view-library { display: block !important; }
  body[data-view="about"] #view-about, body[data-view="quick"] #view-quick { display: flex !important; }
  body[data-view="lingxiao"] #side, body[data-view="lingxiao"] #view-home, body[data-view="lingxiao"] #view-result, body[data-view="lingxiao"] #view-library, body[data-view="lingxiao"] #view-about, body[data-view="lingxiao"] #view-quick { display: none; }
  body[data-view="lingxiao"] #view-lingxiao { display: block !important; }
  body:not([data-view="home"]) .auth #btn-register { display: none; }
}
@media (max-width: 380px) {
  .btn-sm { padding: 0 11px; }
  .pillars .gz { font-size: 30px; }
}

@media (min-width: 640px) {
  .shell { padding-left: calc(28px + var(--sal)); padding-right: calc(28px + var(--sar)); }
  .pillars { grid-template-columns: 52px repeat(4, minmax(0, 1fr)); }
  .pillars .gz { font-size: 42px; }
  .ss-vert { font-size: 14px; }
  .cang { font-size: 20px; }
  .cang > span { flex-basis: 1.45em; }
  .yc { min-width: 64px; }
  .form-panel { max-width: 520px; margin: 0 auto; }
}

/* 电脑：左栏输入 + 右侧命盘 */
@media (min-width: 1024px) {
  :root { --top-h: 58px; }
  .topnav { display: flex; }
  .tabbar { display: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.quick { display: flex; flex-direction: column; gap: 12px; width: min(720px, 100%); margin: 0 auto; padding-bottom: 28px; }
.quick-card { display: flex; flex-direction: column; gap: 14px; }
.quick-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.quick-hint { margin: 0; font-size: 13px; line-height: 1.55; }
.quick-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.quick-raw { width: 100%; min-height: 96px; resize: vertical; font-size: 18px; line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line2); background: #0c0c10; color: #eee; }
.quick-raw:focus { outline: none; border-color: rgba(120,160,255,.45); box-shadow: 0 0 0 3px rgba(80,120,255,.15); }
.quick-row { display: flex; align-items: center; gap: 12px; }
.quick-row .lab { min-width: 72px; color: var(--muted); font-size: 13px; }
.quick-row .fctl { flex: 1; }
.quick-row select, .quick-row input[type=text] { width: 100%; }
.quick-preview { min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line);
  font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.quick-preview.ok { border-style: solid; border-color: rgba(90,200,140,.35); color: #d8e8dc; }
.quick-preview.bad { border-style: solid; border-color: rgba(255,100,100,.4); color: #ffb4b4; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-actions .btn { flex: 1; min-width: 140px; }

.toast { bottom: 28px; }
  .shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start;
    max-width: 1600px; margin: 0 auto; padding: 20px 28px 40px; }
  .side { position: sticky; top: calc(var(--top-h) + 20px); max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; padding-right: 2px; }
  .form-panel { max-width: none; }
  .mini-lib { display: block; }
  body[data-view="home"] #view-result, body[data-view="home"] #view-library, body[data-view="home"] #view-about, body[data-view="home"] #view-quick, body[data-view="home"] #view-lingxiao,
  body[data-view="input"] #view-result, body[data-view="input"] #view-library, body[data-view="input"] #view-about, body[data-view="input"] #view-quick, body[data-view="input"] #view-lingxiao,
  body[data-view="result"] #view-home, body[data-view="result"] #view-library, body[data-view="result"] #view-about, body[data-view="result"] #view-quick, body[data-view="result"] #view-lingxiao,
  body[data-view="library"] #view-home, body[data-view="library"] #view-result, body[data-view="library"] #view-about, body[data-view="library"] #view-quick, body[data-view="library"] #view-lingxiao,
  body[data-view="about"] #view-home, body[data-view="about"] #view-result, body[data-view="about"] #view-library, body[data-view="about"] #view-quick, body[data-view="about"] #view-lingxiao,
  body[data-view="quick"] #view-home, body[data-view="quick"] #view-result, body[data-view="quick"] #view-library, body[data-view="quick"] #view-about, body[data-view="quick"] #view-lingxiao,
  body[data-view="lingxiao"] #view-home, body[data-view="lingxiao"] #view-result, body[data-view="lingxiao"] #view-library, body[data-view="lingxiao"] #view-about, body[data-view="lingxiao"] #view-quick { display: none !important; }
  body[data-view="result"] #view-result { display: flex !important; }
  body[data-view="library"] #view-library { display: block !important; }
  body[data-view="about"] #view-about, body[data-view="quick"] #view-quick { display: flex !important; }
  body[data-view="lingxiao"] #view-lingxiao { display: block !important; }
  /* 首页落地：不占左侧表单，主 logo 放大，按钮下移拉开 */
  body[data-view="home"] #side { display: none; }
  body[data-view="home"] .shell { grid-template-columns: 1fr; max-width: none; }
  body[data-view="about"] #side, body[data-view="quick"] #side, body[data-view="lingxiao"] #side { display: none; }
  body[data-view="about"] .shell, body[data-view="quick"] .shell, body[data-view="lingxiao"] .shell { grid-template-columns: 1fr; max-width: none; }
  body[data-view="lingxiao"] #main { max-width: none; width: 100%; }
  body[data-view="lingxiao"] #view-lingxiao { width: 100%; max-width: none; }
  .hero { min-height: calc(100vh - var(--top-h) - 48px); padding-top: clamp(48px, 11vh, 110px); }
  .hero-inner {
    width: min(420px, 100%);
    min-height: calc(100vh - var(--top-h) - 64px);
    padding-bottom: 32px;
  }
  .hero-logo { width: 172px; }
  .hero-ring--outer { width: 460px; height: 460px; top: 6%; }
  .hero-ring--mid { width: 380px; height: 380px; top: 9%; }
  .hero-ring--inner { width: 280px; height: 280px; top: 14%; }
  .hero-ticks { width: 380px; height: 380px; top: 9%; }
  .hero-glow { width: 480px; height: 480px; top: 4%; }
  .hero-cta { gap: 28px; margin-bottom: 14px; padding-top: 36px; }
  .btn-tech { width: min(320px, 100%); }
  .card { padding: 18px; }
  .pillars { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); }
  .pillars > div { padding: 11px 4px; }
  .pillars .gz { font-size: 50px; }
  .ss-vert { font-size: 15px; }
  .cang { font-size: 22px; gap: 2px; }
  .cang > span { flex-basis: 1.5em; }
  .cang .ss-vert { font-size: 13px; }
  .strip { /* 桌面仍用连续横条，对齐老八云习惯 */ }
  .yc { min-width: 72px; padding: 10px 4px 12px; }
  .yc .gz { font-size: 22px; }
  .yc .ss-vert { font-size: 11px; }
  .liunian-wrap .yc { min-width: 0; }
  .liunian-wrap .yc .gz { font-size: 15px; }
  /* 电脑端：一行一条，从上到下编号 */
  .lib-list { grid-template-columns: 1fr; gap: 8px; }
  .lib-open { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(170px, 1fr) minmax(0, 2fr); column-gap: 18px; align-items: center; }
  .lib-open .lib-tgdz, .lib-open .lib-meta { margin-top: 0; }
  .lib-open > .lib-meta ~ .lib-meta { grid-column: 1 / -1; }
  .lib-acts { flex-direction: row; align-items: center; }
  .lib-guest { max-width: 480px; }
}
@media (min-width: 1440px) {
  .shell { grid-template-columns: 360px minmax(0, 1fr); gap: 24px; padding: 24px 36px 44px; }
  .pillars .gz { font-size: 56px; }
}

/* ---- quick multi-field + NEIBU-only shell ---- */
.quick-gender-wrap { display: flex; align-items: center; gap: 10px; }
.quick-gender-wrap input { width: 96px; flex: 0 0 auto; }
.quick-gender-wrap .seg { flex: 0 0 auto; }
body.quick-only [data-nav="home"],
body.quick-only [data-nav="input"],
body.quick-only [data-nav="about"],
body.quick-only .tab-normal { display: none !important; }
body.quick-only #quick-back { display: none !important; }
body.quick-only #side { display: none !important; }
body.quick-only #tab-quick { display: flex !important; }
body.quick-only[data-view="quick"] #view-quick { display: flex !important; }
#quick-birth { font-variant-numeric: tabular-nums; letter-spacing: .06em; }