/* 联系客服页 —— 辣椒聊官网风格（暗色 / 蓝色主色） */
:root {
  --blue: #1565FF;
  --blue-hi: #2B77FF;
  --blue-soft: #6EA0FF;
  --ink: #F2F5FF;
  --ink-2: #E3E8F4;
  --ink-3: #98A1B6;
  --panel: #141A2E;
  --panel-2: #111627;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .10);
  --soft: rgba(21, 101, 255, .10);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: "PingFang SC", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-2);
  background-color: #070A14;
  background-image:
    radial-gradient(900px 420px at 50% -160px, rgba(21, 101, 255, .30), transparent 70%),
    linear-gradient(180deg, #0B1020 0%, #070A14 560px);
  background-repeat: no-repeat;
  background-size: auto, 100% 560px;
  min-height: 100vh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  padding-top: env(safe-area-inset-top);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 0 18px; }

.topbar { position: sticky; top: env(safe-area-inset-top); z-index: 20; background: rgba(9, 13, 24, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 480px; margin: 0 auto; padding: 9px 14px; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); text-decoration: none; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 9px; display: block; }
.badge { margin-left: auto; font-size: 12px; font-weight: 700; color: #8FB8FF; background: rgba(21, 101, 255, .18); border: 1px solid rgba(21, 101, 255, .26); padding: 6px 12px; border-radius: 999px; }

.hero { padding: 26px 0 6px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #8FB8FF; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding: 7px 14px; border-radius: 999px; }
h1 { margin: 14px 0 10px; font-size: 34px; line-height: 1.18; font-weight: 900; color: var(--ink); letter-spacing: -.5px; }
h1 em { font-style: normal; color: #5B8FFF; }
.lede { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }

.card { background: linear-gradient(180deg, #151B2F, var(--panel-2)); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); padding: 22px 20px 18px; margin-top: 18px; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head img { width: 46px; height: 46px; border-radius: 14px; }
.card-head b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.card-head span { font-size: 12px; color: var(--ink-3); }
.chip { margin-left: auto; font-size: 11px; font-weight: 800; color: #34D399; background: rgba(16, 185, 129, .13); border: 1px solid rgba(16, 185, 129, .28); padding: 5px 10px; border-radius: 999px; }
.num-label { margin-top: 20px; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .5px; }
.num { margin-top: 2px; font-size: 42px; line-height: 1.1; font-weight: 900; letter-spacing: 3px; color: #5B8FFF; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .12s ease, opacity .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { margin-top: 18px; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); color: #fff; box-shadow: 0 12px 26px rgba(21, 101, 255, .35); }
.btn-ghost { margin-top: 10px; background: transparent; border: 1.5px solid rgba(110, 160, 255, .35); color: #8FB8FF; }

h2 { margin: 26px 0 12px; font-size: 17px; font-weight: 900; color: var(--ink); }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; }
.step i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; background: rgba(21, 101, 255, .18); color: var(--blue-soft); font-style: normal; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.step b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--ink); }
.step span { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

.info { margin-top: 10px; background: var(--soft); border: 1px solid rgba(21, 101, 255, .16); border-radius: 16px; padding: 14px; }
.info b { font-size: 14px; color: var(--ink); }
.info p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-3); }

.cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(9, 13, 24, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.cta-in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta a, .cta button { height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; }
.cta a { border: 1.5px solid rgba(255, 255, 255, .16); background: transparent; color: #D6DCEA; }
.cta button { border: 0; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); color: #fff; box-shadow: 0 8px 20px rgba(21, 101, 255, .30); }

.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%) translateY(8px); background: rgba(30, 37, 56, .96); border: 1px solid var(--line-2); color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 底部导航（与站内其他页一致，固定在底部） */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; height: calc(64px + env(safe-area-inset-bottom)); background: rgba(9, 13, 24, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px; z-index: 30; }
.tabbar a { border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: #98A1B6; text-decoration: none; }
.tabbar a.on { background: rgba(21, 101, 255, .16); color: #7FB0FF; font-weight: 800; }

/* 跨页面过渡 */
@view-transition { navigation: auto; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: vtOut .14s ease-in both; }
::view-transition-new(root) { animation: vtIn .18s ease-out both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }