/* 网页外壳：模拟小程序的导航栏、页面栈、底栏和提示。页面本身的样式来自自动生成的 app.css。 */
html { background: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000; overscroll-behavior-y: none; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: none; }
button { font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
[role="button"], [role="tab"] { cursor: pointer; user-select: none; -webkit-user-select: none; }
:focus-visible { outline: 2px solid #C6FF00; outline-offset: 2px; }

/* 页面列宽：手机全宽；电脑上居中显示为手机宽度，rpx 按列宽换算（750rpx = 列宽） */
.app, .detail-layer {
  --col: min(100vw, 480px);
  --col-left: max(0px, calc((100vw - 480px) / 2));
  --rpx: calc(var(--col) / 750);
  --nav-h: calc(44px + env(safe-area-inset-top));
}
.app { position: relative; width: var(--col); min-height: 100vh; margin: 0 auto; }
/* 小程序里 fixed 元素相对整个屏幕；网页在电脑上要收在列宽内 */
.tab-bar, .tab-fade, .moon-layer { left: var(--col-left) !important; right: var(--col-left) !important; }
.moon-layer { top: var(--nav-h) !important; }

/* 导航栏（对应小程序原生导航栏） */
.navbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; height: var(--nav-h); padding: env(safe-area-inset-top) 56px 0; background: #000; color: #fff; }
.navbar-title { overflow: hidden; font-size: 17px; font-weight: 600; line-height: 44px; white-space: nowrap; text-overflow: ellipsis; }
.nav-back { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; }
.nav-back svg { width: 22px; height: 22px; }
.nav-back:active { opacity: .6; }

/* 详情页：从右侧推入的页面栈，有独立滚动 */
.detail-layer { position: fixed; z-index: 300; top: 0; bottom: 0; left: var(--col-left); width: var(--col); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #000; transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform 300ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 300ms; }
.detail-layer.open { transform: none; visibility: visible; transition: transform 300ms cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.detail-layer.instant { transition: none; }
.view-service-catalog .section-tabs-wrap { top: var(--nav-h); }
.view-service-catalog .contact-bar { position: sticky; left: auto; right: auto; margin: 0 calc(-1 * var(--gutter)); }
.view-service-catalog .catalog-page { padding-bottom: 0; }
.view-service-catalog .catalog-page > .info-block:last-of-type, .view-service-catalog .catalog-section:last-of-type { margin-bottom: 40px; }

/* 横向滚动（对应 scroll-view scroll-x） */
.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

/* 提示（对应 wx.showToast） */
.toast { position: fixed; z-index: 500; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 120px; min-height: 120px; padding: 18px 16px; border-radius: 10px; background: rgba(17, 17, 17, .92); color: #fff; font-size: 15px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.96); transition: opacity 160ms ease, transform 160ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, -50%); }
.toast.plain { min-height: 0; padding: 12px 18px; }
.toast svg { width: 40px; height: 40px; }

/* Logo 转场画布 */
.banner canvas { display: block; }

/* 电脑端：两侧留黑并加细边，像一部手机 */
@media (min-width: 481px) {
  body { background: #050505; }
  .app { box-shadow: 0 0 0 1px #161616; background: #000; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-layer, .detail-layer.open { transition: none; }
  .moon-system, .moon-satellite, .moon-spark { animation: none !important; }
}