@charset "utf-8";
/* ============================================================
   互动白山 · 电话本  Design Tokens v1.0
   单位：px（禁用 rem）  基准 375
   零外部资源：无 @font-face / 无网络字体 / 无外链图片
   ============================================================ */

:root{
  /* ---- brand ---- */
  --c-brand-700:#1E3FA8; --c-brand-600:#2A4FD8; --c-brand-500:#3560FF;
  --c-brand-400:#4F86F7; --c-brand-200:#C9D4FF; --c-brand-100:#E8EDFF; --c-brand-50:#F2F5FF;
  --grad-brand:linear-gradient(135deg,#4F86F7 0%,#3560FF 100%);

  /* ---- accent（限用途：认证标 / 热门 / 收藏已选 / 营销角标）---- */
  --c-accent-600:#E8621A; --c-accent-500:#FF7A2A; --c-accent-200:#FFD3B8;
  --c-accent-100:#FFEFE6; --c-accent-ink:#C24E10;

  /* ---- semantic ---- */
  --c-success:#17A76C; --c-success-bg:#E7F6EF; --c-warning:#FF7A2A;
  --c-danger:#E5484D; --c-danger-600:#C93B40; --c-danger-bg:#FDECEC;

  /* ---- neutral ---- */
  --c-ink-1:#1E1E21; --c-ink-2:#646A75; --c-ink-3:#A1A4B3; --c-ink-4:#C4C7D2; --c-ink-inv:#FFFFFF;

  /* ---- background ---- */
  --c-bg-page:#F7F8FA; --c-bg-card:#FFFFFF; --c-bg-fill:#F2F3F5; --c-bg-fill-2:#EDEFF3;
  --c-bg-mask:rgba(0,0,0,.45); --c-bg-toast:rgba(30,30,33,.88);
  --c-bg-scrim:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));

  /* ---- line ---- */
  --c-line-1:#EBEDF0; --c-line-2:#F2F3F5; --c-line-strong:#DCE0E8; --c-line-brand:#C9D4FF;

  /* ---- radius ---- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* ---- spacing ---- */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px;
  --sp-6:20px; --sp-7:24px; --sp-8:32px; --sp-9:40px;

  /* ---- font ---- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-num:"SF Pro Text",-apple-system,"Helvetica Neue",Arial,"PingFang SC",sans-serif;

  /* ---- shadow ---- */
  --sh-xs:0 1px 2px rgba(30,30,33,.04);
  --sh-sm:0 2px 8px rgba(30,30,33,.06);
  --sh-md:0 4px 16px rgba(30,30,33,.10);
  --sh-brand:0 4px 12px rgba(53,96,255,.28);
  --sh-bar:0 -1px 8px rgba(192,192,192,.20);

  /* ---- motion ---- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);

  /* ---- layout ---- */
  --h-topbar:44px; --h-tabbar:50px; --h-actionbar:56px; --page-pad:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --maxw:480px;
}

/* ================= reset ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;line-height:1.6;color:var(--c-ink-1);
  background:var(--c-bg-page);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;border:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;outline:none}
button{padding:0;border:0;background:none;cursor:pointer}
input,textarea{-webkit-appearance:none;appearance:none;border-radius:0}
input::placeholder,textarea::placeholder{color:var(--c-ink-3)}

@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= 原子类 ================= */
.disflex{display:flex}.a-c{align-items:center}.a-end{align-items:flex-end}.a-s{align-items:flex-start}
.j-b{justify-content:space-between}.j-c{justify-content:center}.j-a{justify-content:space-around}.j-e{justify-content:flex-end}
.fdc{flex-direction:column}.fw{flex-wrap:wrap}.fgrow{flex:1}.f1{flex:1;min-width:0}
.bold{font-weight:600}.w5{font-weight:500}.w4{font-weight:400}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ell2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ell3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tnum{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.2px}
.gap2{gap:2px}.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.rel{position:relative}.abs{position:absolute}.fix{position:fixed}
.tc{text-align:center}.tr{text-align:right}
.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs18{font-size:18px}.fs20{font-size:20px}.fs28{font-size:28px}
.c1{color:var(--c-ink-1)}.c2{color:var(--c-ink-2)}.c3{color:var(--c-ink-3)}.c4{color:var(--c-ink-4)}
.cbrand{color:var(--c-brand-500)}.cdanger{color:var(--c-danger)}.csuccess{color:var(--c-success)}
.hairline{position:relative}
.hairline::after{content:'';position:absolute;left:16px;right:0;bottom:0;height:1px;
  background:var(--c-line-1);transform:scaleY(.5);transform-origin:0 100%}
.hairline-fl::after{left:0}
.hide{display:none!important}