/* ==========================================================================
   百岁AI · 全站视觉设计系统 v2.0「光曜 LUMEN」
   科技蓝 × 轻奢金 ｜ 极光渐变 · 毛玻璃 · 微光描边 · 柔和弥散阴影
   --------------------------------------------------------------------------
   纯 CSS 增强层：只升级色彩 / 光影 / 材质 / 微动效，不改变任何布局尺寸，
   兼容适老大字模式，动效仅用 transform/opacity（GPU 加速，手机不卡顿）。
   本文件在基础样式之后加载：同优先级覆盖令牌与全局组件，
   视图内联重复类使用适度提高的选择器，仅覆盖非结构性视觉属性。
   ========================================================================== */

/* ============ 1. 设计令牌（色彩 / 圆角 / 阴影 / 渐变 / 动效曲线） ============ */
:root{
  --navy:#0a1c38;            /* 午夜蓝（深色底） */
  --blue:#2b73f0;            /* 电光蓝（主色） */
  --blue-deep:#1552d4;       /* 深电蓝（按压/文字） */
  --cyan:#12b8c9;            /* 青碧（辅色） */
  --gold:#d0ab62;            /* 轻奢金 */
  --gold-light:#e9cd91;
  --ink:#18283f;
  --sub:#64748d;
  --line:#e8eef7;
  --bg:#f2f6fc;
  --card:#ffffff;
  --ok:#12a06d;
  --danger:#f04438;

  --radius:18px;
  --shadow:0 1px 2px rgba(13,42,92,.05),0 10px 30px rgba(13,42,92,.07);
  --shadow-hover:0 2px 4px rgba(19,60,140,.06),0 18px 44px rgba(19,60,140,.14);
  --glow-blue:0 10px 26px rgba(43,115,240,.30);

  --ease:cubic-bezier(.22,.61,.36,1);
  --grad-main:linear-gradient(135deg,#2b73f0 0%,#1f8ef1 48%,#12b8c9 100%);
  --grad-gold:linear-gradient(135deg,#e9cd91 0%,#d0ab62 55%,#b3883f 100%);
  --grad-navy:linear-gradient(135deg,#0a1c38 0%,#103871 55%,#0e7f96 100%);
}

/* ============ 2. 全站基底：冷调极光底 / 选区 / 滚动条 / 焦点态 ============ */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(920px 480px at 88% -8%,rgba(43,115,240,.08),transparent 60%),
    radial-gradient(760px 420px at -6% 12%,rgba(18,184,201,.07),transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(43,115,240,.18);color:#0d2a5c}
* {scrollbar-width:thin;scrollbar-color:#c2d1e9 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c6d4ea,#a9bddd);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#8fa9d0;background-clip:padding-box}
a,button,.chip,.cat-item{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid rgba(43,115,240,.55);outline-offset:2px;border-radius:8px}

/* ============ 3. 顶栏：增强毛玻璃 + 底部渐变高光线 ============ */
.topbar{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(222,232,246,.85);
  box-shadow:0 4px 24px rgba(13,42,92,.05);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 6%,rgba(43,115,240,.5) 42%,rgba(18,184,201,.5) 58%,transparent 94%);
  opacity:.65;
}
.logo{letter-spacing:1.5px}
.logo .mark{
  background:var(--grad-main);
  box-shadow:0 6px 18px rgba(43,115,240,.40),inset 0 1px 0 rgba(255,255,255,.38);
  overflow:hidden;
}
.logo .mark::after{
  content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:rotate(8deg);animation:logoSheen 5s var(--ease) infinite;pointer-events:none;
}
@keyframes logoSheen{0%,62%{left:-70%}100%{left:140%}}
.logo em{background:linear-gradient(135deg,rgba(208,171,98,.16),rgba(208,171,98,.05))}

/* 导航：选中胶囊 + 底部光条 */
.nav a{transition:color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease)}
.nav a:hover{color:var(--blue-deep);background:#eef5ff}
.nav a.on{color:var(--blue-deep);background:linear-gradient(180deg,#f3f8ff,#e9f2ff);box-shadow:inset 0 0 0 1px #d9e7ff}
.nav a.on::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--grad-main);
  box-shadow:0 0 10px rgba(43,115,240,.65);
}
.nav a{position:relative}

/* 图标按钮 / 头像 / 角标 */
.iconbtn{
  background:linear-gradient(135deg,#f6f9fe,#edf3fc);
  box-shadow:inset 0 0 0 1px #e7eefb;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.iconbtn:hover{transform:translateY(-1px);color:var(--blue-deep);box-shadow:0 7px 16px rgba(43,115,240,.16),inset 0 0 0 1px #d2e2fb}
.avatar{
  background:linear-gradient(145deg,#19c2d6,#2b73f0);
  box-shadow:0 4px 12px rgba(43,115,240,.32),inset 0 1px 0 rgba(255,255,255,.35);
}
.dot{background:linear-gradient(135deg,#ff625a,#ef2f25);box-shadow:0 2px 6px rgba(239,47,37,.45)}

/* ============ 4. 按钮：渐变 + 内高光 + 周期流光 ============ */
.btn{
  border-radius:14px;
  background:var(--grad-main);
  background-size:170% 170%;background-position:0% 50%;
  box-shadow:0 6px 16px rgba(43,115,240,.26),inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-position .4s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 13px 28px rgba(43,115,240,.36),inset 0 1px 0 rgba(255,255,255,.30)}
.btn:active{transform:translateY(0) scale(.97)}
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:btnShimmer 3.8s var(--ease) infinite;pointer-events:none;border-radius:inherit;
}
@keyframes btnShimmer{0%,58%{left:-80%}82%,100%{left:150%}}
.btn{position:relative;overflow:hidden}
.btn > *{position:relative;z-index:1}
.btn.ghost{
  background:rgba(255,255,255,.92);color:var(--blue);border:1.5px solid #cfe0fa;
  box-shadow:0 2px 8px rgba(43,115,240,.06),inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.ghost::before{display:none}
.btn.ghost:hover{background:#fff;border-color:var(--blue);color:var(--blue-deep);box-shadow:0 8px 20px rgba(43,115,240,.16)}
.btn.gold{
  background:var(--grad-gold);color:#fff;text-shadow:0 1px 1px rgba(120,80,20,.28);
  box-shadow:0 8px 20px rgba(179,136,63,.34),inset 0 1px 0 rgba(255,255,255,.38);
}
.btn.gold:hover{box-shadow:0 13px 30px rgba(179,136,63,.46),inset 0 1px 0 rgba(255,255,255,.38)}
.btn.gray{background:linear-gradient(135deg,#f1f5fa,#e9eff7);color:#5b6d88;box-shadow:none}
.btn.gray::before{display:none}
.btn.sm{border-radius:11px}
.btn.block{border-radius:15px}

/* ============ 5. 卡片 / 输入 / 标签 / 提示 ============ */
.card{
  border:1px solid #edf2fa;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.input,.select,textarea{
  border:1.5px solid #d7e0ee;border-radius:12px;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.input:focus,.select:focus,textarea:focus{
  border-color:#3b82f6;background:#fff;
  box-shadow:0 0 0 4px rgba(43,115,240,.13);
}
.tag{letter-spacing:.3px}
.tag.basic{background:linear-gradient(135deg,#e7f8f1,#d6f2e6);color:#0b8558}
.tag.premium{background:linear-gradient(135deg,#f7ebd2,#ecd9ad);color:#7c5516}
.tag.welfare{background:linear-gradient(135deg,#fdeeee,#fadcdb);color:#c2332b}
.tag.gray{background:linear-gradient(135deg,#f1f5fa,#e9eff7);color:#64748d}
.price{color:#f5363c;font-variant-numeric:tabular-nums}
.flash .f{border-radius:14px}
.flash .ok{background:linear-gradient(135deg,#effaf4,#e5f7ee);color:#0b8558;border-color:#bfe8d6}
.flash .err{background:linear-gradient(135deg,#fdf0ef,#fbe6e4);color:#c2332b;border-color:#f4c7c3}

/* 区块标题：发光竖条 + 修复两端对齐（原值 space 为无效声明） */
.sec-title{justify-content:space-between;gap:12px}
.sec-title h2{letter-spacing:.5px}
.sec-title h2::before{
  background:var(--grad-main);border-radius:4px;
  box-shadow:0 0 12px rgba(43,115,240,.55);
}
.sec-title a{transition:color .18s var(--ease),transform .18s var(--ease)}
.sec-title a:hover{color:var(--blue-deep);transform:translateX(2px)}

/* ============ 6. 商品 / 服务 / 内容卡片（跨视图通用，仅美化） ============ */
.wrap .srv-card{
  border:1px solid #edf2fa;border-radius:16px;
  box-shadow:0 1px 2px rgba(13,42,92,.04),0 8px 24px rgba(13,42,92,.06);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.wrap .srv-card:hover{
  transform:translateY(-4px);border-color:rgba(43,124,255,.38);
  box-shadow:var(--shadow-hover);
}
.srv-cover{transition:transform .55s var(--ease)}
.wrap .srv-card:hover .srv-cover{transform:scale(1.055)}

/* 首页八类目入口 */
.cat-grid .cat-item{
  border:1px solid #edf2fa;border-radius:16px;
  box-shadow:0 1px 2px rgba(13,42,92,.04);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.cat-grid .cat-item:hover{
  transform:translateY(-4px);border-color:rgba(43,124,255,.4);
  box-shadow:0 14px 30px rgba(19,60,140,.13);
}
.cat-grid .cat-item .cat-ic{
  background:linear-gradient(135deg,#f1f7ff,#ddecff);
  box-shadow:inset 0 0 0 1px #dde9fb,0 4px 10px rgba(43,115,240,.12);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.cat-grid .cat-item:hover .cat-ic{transform:translateY(-3px) scale(1.07);box-shadow:0 9px 18px rgba(43,115,240,.24)}

/* 列表页：侧栏 / 筛选 chip / 业务 Tab */
.list-wrap .side{border:1px solid #edf2fa;border-radius:16px;box-shadow:var(--shadow)}
.list-wrap .side a{transition:color .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease)}
.list-wrap .side a.on,.list-wrap .side a:hover{
  color:var(--blue-deep);
  background:linear-gradient(180deg,#f3f8ff,#e9f2ff);
  box-shadow:inset 0 0 0 1px #d9e7ff;
}
.filter-bar .chip{
  border:1.5px solid #e0e8f2;border-radius:20px;
  transition:color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.filter-bar .chip:hover{border-color:#b8d1f8;color:var(--blue-deep)}
.filter-bar .chip.on{
  background:var(--grad-main);border-color:transparent;color:#fff;
  box-shadow:0 6px 15px rgba(43,115,240,.30);
}
.biz-tabs a{border-radius:22px;transition:color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.biz-tabs a:hover{transform:translateY(-1px);border-color:#b8d1f8}
.biz-tabs a.on{box-shadow:0 7px 17px rgba(43,115,240,.30)}
.fav-btn{transition:transform .18s var(--ease),color .18s var(--ease)}
.fav-btn:hover{transform:scale(1.12)}

/* 首页 Banner 位 */
.banner-grid a{border:1px solid #edf2fa;box-shadow:0 8px 24px rgba(13,42,92,.10)}
.banner-grid img{transition:transform .55s var(--ease)}
.banner-grid a:hover img{transform:scale(1.05)}

/* 首页功能入口卡：白卡体系 + hover 微扫光（大厂风克制配色） */
.fun-grid > a{position:relative;overflow:hidden;isolation:isolate}
.fun-grid > a::after{
  content:"";position:absolute;top:-45%;bottom:-45%;left:-65%;width:42%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(43,115,240,.06),transparent);
  transform:skewX(-16deg);transition:left .75s var(--ease);
}
.fun-grid > a:hover::after{left:145%}
.fun-grid > a > *{position:relative;z-index:1}

/* ============ 7. 页脚：极光叠加层 / 顶光 / 链接悬停 ============ */
footer{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(125,170,255,.18)}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 320px at 82% -50%,rgba(43,115,240,.24),transparent 70%),
    radial-gradient(520px 280px at 4% 125%,rgba(18,184,201,.16),transparent 70%);
}
footer .wrap{position:relative;z-index:1}
footer a{transition:color .18s var(--ease)}
footer a:hover{color:#8dbbff}

/* ============ 7.5 滚动入场微交互 + 导航「更多」下拉 ============ */
/* 滚动入场：JS 加 .fx-up，入视口加 .in
   渐进增强：仅当 JS 成功执行（html 加了 .fx-ready）才隐藏待入场元素；
   JS 失效/微信内核异常/观察器未触发时，内容始终可见，绝不空白 */
html.fx-ready .fx-up{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.fx-ready .fx-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.fx-ready .fx-up{opacity:1;transform:none;transition:none}}

/* 导航「更多服务」下拉（桌面 fixed 定位防裁剪；移动端随汉堡菜单内联展开） */
.navdrop{position:relative;flex:0 0 auto}
.navdrop-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:9px;font-weight:600;color:#3f536e;font-size:14.5px;white-space:nowrap;background:none;border:0;font-family:inherit;cursor:pointer;transition:color .18s var(--ease),background-color .18s var(--ease)}
.navdrop-btn:hover,.navdrop.open .navdrop-btn{color:var(--blue-deep);background:#eef5ff}
.navdrop-btn .nd-caret{font-size:10px;transition:transform .2s var(--ease)}
.navdrop.open .nd-caret{transform:rotate(180deg)}
.navdrop-menu{display:none;position:fixed;z-index:70;min-width:176px;flex-direction:column;gap:2px;padding:8px;background:#fff;border:1px solid #e7eef9;border-radius:16px;box-shadow:0 20px 50px rgba(13,42,92,.18)}
.navdrop.open .navdrop-menu{display:flex}
.navdrop-menu a{padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:#3f536e;white-space:nowrap;display:flex;align-items:center;gap:6px}
.navdrop-menu a:hover{color:var(--blue-deep);background:#eef5ff}
@media (max-width:900px){
  .navdrop-menu{position:static;box-shadow:none;border:0;background:transparent;padding:2px 0 4px 12px;min-width:0}
  .navdrop{width:100%}
  .navdrop-btn{width:100%;justify-content:flex-start}
}
@media (min-width:901px){.navdrop-btn{font-size:13px;padding:8px 8px}}

/* ============ 8. 顶栏响应式：桌面紧凑导航 / 移动两行制，全站杜绝竖排与横向溢出 ============ */
/* 所有端：Logo 与导航文字禁止逐字挤压换行 */
header.topbar .logo{flex:0 0 auto;white-space:nowrap}
.nav a{white-space:nowrap}

@media (min-width:901px){
  /* 内容区最大 1200px，8 个导航 + 7 个图标需精打细算：紧凑而不拥挤 */
  header.topbar .wrap{gap:10px}
  header.topbar .logo{font-size:19px;gap:8px}
  header.topbar .logo em{display:none}         /* 顶栏副牌收起，品牌名完整保留，导航更透气 */
  .nav{gap:1px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:13px;padding:8px 8px}
  .nav-right{gap:6px;flex:0 0 auto}
  .nav-right .iconbtn,.nav-right .avatar{width:38px;height:38px}
  .nav-right form[role="search"]{flex:0 1 140px;min-width:110px}
  .nav-right form[role="search"] .input{width:100% !important}
  body.big .nav a{font-size:15px}              /* 适老大字模式：导航同步加大，放不下时可横滑 */
}

@media (max-width:900px){
  body{background-image:none}
  .btn::before{animation:none}                 /* 手机关闭按钮周期流光，省电省 GPU */
  .logo .mark::after{animation:none}
  .fun-grid > a::after{display:none}
  .wrap .srv-card:hover .srv-cover{transform:none}
  .banner-grid a:hover img{transform:none}
}
@media (max-width:600px){
  /* 顶栏两行制：第一行 Logo+高频入口，第二行全宽搜索；杜绝横向滚动 */
  header.topbar .wrap{flex-wrap:wrap;gap:8px 10px;height:auto;min-height:64px;padding-top:8px;padding-bottom:8px}
  header.topbar .logo{font-size:19px;align-self:center}
  header.topbar .logo em{display:none}         /* 窄屏隐藏副牌，品牌名完整保留 */
  header.topbar .nav-right{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:8px;row-gap:8px;justify-content:flex-end}
  header.topbar .nav-right form[role="search"]{order:5;flex:1 1 100%;width:100%;min-width:0}
  header.topbar .nav-right form[role="search"] .input{width:100% !important}
  header.topbar .iconbtn,header.topbar .avatar{width:38px;height:38px}
  /* 折叠菜单已含「社群」入口，用户中心已含会员入口：窄屏隐藏重复图标，保持干净 */
  header.topbar a.iconbtn[aria-label="邻里社群"],
  header.topbar a.iconbtn[aria-label="会员成长中心"]{display:none}
  /* 未登录只留「登录」，注册在登录页内有入口；为搜索行让出空间 */
  header.topbar .nav-right a.btn.sm[href*="register"]{display:none}
  /* 两行顶栏后，汉堡下拉菜单起点同步下移 */
  header.topbar .nav.open{top:104px}
  body.big header.topbar .nav.open{top:112px}
}
@media (max-width:400px){
  header.topbar .logo{font-size:18px}
  header.topbar .iconbtn,header.topbar .avatar{width:36px;height:36px}
  header.topbar .wrap{padding-left:14px;padding-right:14px}
  header.topbar .nav.open{top:100px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}