*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* 避免 html/body 同时 overflow-x:hidden 导致 PC 滚动条无法拖拽/点击 */
html {
  overflow-x: clip;
  overflow-y: auto;
}
body {
  overflow-x: clip;
  overflow-y: visible;
}

img { max-width: 100%; display: block; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

a { color: var(--blue); text-decoration: none; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

strong, b {
  font-weight: var(--fw-medium);
}

.en-text,
.brand-sub,
.splash-en,
.quota-tag {
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

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

body.axz-lock {
  overflow: hidden;
  height: 100%;
}
body.axz-lock #app {
  overflow: hidden;
}

#app {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#overlay:empty { display: none; pointer-events: none; }

/* PC：统一由 #app 承载滚动，保证滚动条可点击、可拖拽 */
@media (min-width: 960px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }
  #app {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

/* ===== EHS 氛围背景 ===== */
.app-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 8% -8%, rgba(47, 124, 246, .09), transparent 58%),
    radial-gradient(720px 360px at 96% 4%, rgba(26, 168, 122, .05), transparent 52%),
    radial-gradient(640px 320px at 70% 100%, rgba(245, 180, 0, .04), transparent 55%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
}
.app-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  animation: ambiGlow 14s var(--ease) infinite alternate;
}
.app-bg-glow-a {
  width: 280px;
  height: 280px;
  left: -60px;
  top: 12%;
  background: rgba(47, 124, 246, .18);
}
.app-bg-glow-b {
  width: 220px;
  height: 220px;
  right: -40px;
  top: 38%;
  background: rgba(26, 168, 122, .12);
  animation-delay: -4s;
}
.app-bg-glow-c {
  width: 180px;
  height: 180px;
  left: 42%;
  bottom: 8%;
  background: rgba(245, 180, 0, .1);
  animation-delay: -8s;
}
.app-bg-shield {
  position: absolute;
  right: max(-20px, calc(50% - var(--page-max) / 2 - 40px));
  top: 18%;
  width: min(280px, 42vw);
  color: rgba(47, 124, 246, .07);
  animation: shieldDrift 18s var(--ease) infinite alternate;
}
.app-bg-mesh {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(47, 124, 246, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 124, 246, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 20%, transparent 75%);
}

#topbar, #main, #tabbar { position: relative; z-index: 1; }

#main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--gutter) calc(var(--tabbar-h) + var(--safe-b) + 24px);
}

body.is-desktop #main { padding-bottom: 40px; }

.page {
  animation: pageIn 0.42s var(--ease) both;
  width: 100%;
}

/* 阅读型页面：圈子 / 表单 / 巡检等在壳内再次居中 */
.page-narrow {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes riseSoft {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scan { 0% { top: 8%; } 100% { top: 86%; } }
@keyframes loadbar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes ambiGlow {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18px, -22px) scale(1.08); }
}
@keyframes shieldDrift {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(18px) rotate(3deg); }
}
@keyframes pulseRing {
  0% { transform: scale(.72); opacity: .55; }
  70% { opacity: .12; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes softShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes decoFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(-8px) rotate(45deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.tabbar, .topbar, .tool, .btn, .icon-btn, .btn-search {
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .app-bg-glow,
  .app-bg-shield { animation: none; }
}