/* ============================================
   菜鸟米铺 · 前台样式
   创意主题: "菜鸟起飞" —— 清新天空 + 小鸟吉祥物
   ============================================ */
:root{
  --sky:#63c7f2; --sky-deep:#3aa7dd;
  --cream:#fffdf6; --ink:#22313f; --ink-soft:#5b6c7c;
  --teal:#17b890; --teal-deep:#0e9e79;
  --amber:#f5a623; --orange:#ff7849; --red:#ef5b5b;
  --line:#eef1f5; --card:#ffffff;
  --shadow:0 8px 26px rgba(58,120,160,.12);
  --round:18px;
  --cang:#2ec4b6; --cang2:#45e0d0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- 顶部天空渐变背景 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 500px at 15% -5%, #e8fbff 0%, transparent 60%),
    radial-gradient(900px 480px at 90% -10%, #fff3d6 0%, transparent 55%),
    linear-gradient(#f4fbff, var(--cream) 55%);
}
/* 漂浮云朵（纯 CSS 形状） */
.cloud{position:fixed;z-index:-1;opacity:.55;pointer-events:none;width:120px;height:38px;background:#fff;border-radius:38px;box-shadow:0 8px 20px rgba(120,170,200,.16)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:54px;height:54px;left:22px;top:-20px}
.cloud::after{width:36px;height:36px;left:70px;top:-12px}
.cloud.c2{transform:scale(.8)}
.cloud.c3{transform:scale(.6)}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  display:flex;align-items:center;gap:22px;height:70px;max-width:1180px;margin:0 auto;padding:0 20px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:.5px}
.brand .logo{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg,var(--teal),var(--sky));
  box-shadow:0 6px 16px rgba(23,184,144,.35);
}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--ink-soft);letter-spacing:1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{font-weight:600;color:var(--ink-soft);padding:9px 14px;border-radius:12px;transition:.2s}
.nav a:hover{color:var(--teal);background:#e9fbf6}
.nav a.admin{color:var(--teal-deep);background:#e6faf3}
/* 搜索触发按钮——创意“小鸟找米”放大镜 */
.navsearch-trigger{
  width:44px;height:44px;flex:0 0 auto;border:none;cursor:pointer;border-radius:50%;
  background:linear-gradient(145deg,#3ec6a4,#2fb0dc);
  display:grid;place-items:center;position:relative;
  box-shadow:0 6px 16px rgba(38,150,190,.32);
  transition:transform .25s, box-shadow .25s;
}
.navsearch-trigger svg{width:30px;height:30px;transition:transform .35s}
.navsearch-trigger:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:0 10px 22px rgba(38,150,190,.45)}
.navsearch-trigger:hover svg{transform:scale(1.06)}
.navsearch-trigger:active{transform:scale(.94)}
.navsearch-trigger.active{animation:sec-pop .3s}
@keyframes sec-pop{0%{transform:scale(1)}50%{transform:scale(.9)}100%{transform:scale(1)}}
/* 小鸟在镜片里轻浮 */
.navsearch-trigger:hover .ns-bird{animation:bird-bob 1s ease-in-out infinite}
@keyframes bird-bob{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
/* 悬停小提示 */
.navsearch-trigger::after{
  content:"搜好米";position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#22313f;color:#fff;font-size:12px;padding:4px 10px;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.2s;
}
.navsearch-trigger::before{
  content:"";position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#22313f;opacity:0;transition:.2s;
}
.navsearch-trigger:hover::after,.navsearch-trigger:hover::before{opacity:1}

/* 点击弹出的搜索面板 */
.search-panel{
  position:absolute;left:0;right:0;top:100%;z-index:49;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 30px rgba(58,120,160,.12);
  padding:16px 20px 20px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.28s;
}
.search-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.sp-form{
  display:flex;align-items:center;gap:10px;max-width:680px;margin:0 auto;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:0 8px 0 15px;height:50px;
  box-shadow:0 4px 14px rgba(58,120,160,.08);transition:.22s;
}
.sp-form:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(23,184,144,.12)}
.sp-form .sp-ic{color:#9fb0c0;display:flex;align-items:center;transition:color .2s}
.sp-form:focus-within .sp-ic{color:var(--teal)}
.sp-form input{border:0;outline:0;flex:1;height:100%;min-width:0;font-size:15px;color:var(--ink);background:transparent;caret-color:var(--teal)}
.sp-form input::placeholder{color:#b0bed0}
.sp-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.sp-form button{
  border:0;background:linear-gradient(135deg,var(--teal),#3ec6a4);color:#fff;height:36px;min-width:74px;padding:0 16px;
  border-radius:10px;font-size:14.5px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:.2s;
  box-shadow:0 3px 8px rgba(23,184,144,.3);
}
.sp-form button:hover{background:linear-gradient(135deg,var(--teal-deep),var(--teal));transform:translateY(-1px)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:52px 20px 30px;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(30px,5vw,46px);font-weight:900;line-height:1.25}
.hero h1 .hi{display:inline-block;color:var(--teal);position:relative}
.hero p{color:var(--ink-soft);font-size:17px;margin-top:12px}
.hero-badges{display:flex;justify-content:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.hero-badges span{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 18px;
  font-size:13px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow);
}
.hero-badges b{color:var(--teal-deep)}

/* 小鸟 SVG 动画 */
.bird{position:absolute;z-index:-1;animation:fly 14s ease-in-out infinite}
@keyframes fly{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  30%{transform:translateY(-34px) rotate(4deg)}
  60%{transform:translateY(-10px) rotate(-3deg)}
}
.brand .logo svg{width:28px;height:28px;animation:flap 1.1s ease-in-out infinite}
@keyframes flap{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- 统计条 ---------- */
.stats{background:#fff;border:1px solid var(--line);border-radius:var(--round);box-shadow:var(--shadow);padding:18px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:680px;margin:-8px auto 26px}
.stat{text-align:center}
.stat b{font-size:24px;color:var(--teal-deep);font-weight:900;display:block;line-height:1.2}
.stat span{font-size:12.5px;color:var(--ink-soft)}

/* ---------- 筛选(类型/分类分行) ---------- */
.filters{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.f-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters .f-label{font-weight:700;color:var(--ink-soft);font-size:14px;flex:0 0 auto}
.chip{
  padding:6px 15px;border-radius:999px;background:#fff;border:1.5px solid var(--line);
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:.18s;
}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- 域名网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--round);
  box-shadow:var(--shadow);padding:16px 18px 15px;position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;gap:8px;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(58,120,160,.18)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--teal),var(--sky));opacity:0;transition:.25s}
.card:hover::before{opacity:1}
/* CLS 优化: 首屏后折叠视口外卡片渲染, 长列表滚动不再卡顿; 浏览器渐进支持 */
.content-visibility,.cards .card{content-visibility:auto;contain-intrinsic-size:auto 150px}
.card.invalid{content-visibility:hidden}
.d-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.d-name{font-size:24px;font-weight:900;letter-spacing:.3px;color:var(--ink);word-break:break-all}
.d-name:hover{color:var(--teal)}
.d-type{flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.5px}
.t-fixed{background:#e9fbf3;color:var(--teal-deep);border:1px solid #b9ecd9}
.t-inq{background:#eef4ff;color:#3a7bd5;border:1px solid #cfdcfb}
.d-intro{color:var(--ink-soft);font-size:14px;min-height:22px}
.d-tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;color:var(--ink-soft);background:#f5f7fa;border:1px solid var(--line);padding:3px 10px;border-radius:8px}
.tag.urgent-0{background:#ffe9e9;color:var(--red);border-color:#ffcfcf}
.tag.urgent-1{background:#fff0d9;color:var(--orange);border-color:#ffdfb0}
.tag.urgent-2{background:#fffbe6;color:#d8a400;border-color:#f3e5a4}
.tag.urgent-3{background:#e9fbf6;color:var(--teal-deep);border-color:#bef0e1}
.d-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px dashed var(--line)}
.d-price{font-size:20px;font-weight:900;color:var(--amber)}
.d-price em{font-style:normal;color:var(--ink-soft);font-weight:600;font-size:13px;display:block;margin-top:2px}
.d-buy,.d-inq{
  display:inline-block;font-weight:700;font-size:14px;padding:8px 20px;border-radius:12px;transition:.18s;
}
.d-buy{background:linear-gradient(135deg,var(--teal),var(--sky-deep));color:#fff;box-shadow:0 6px 14px rgba(23,158,199,.3)}
.d-buy:hover{opacity:.92;transform:translateY(-2px)}
.d-inq{background:#fff;border:1.5px solid var(--teal);color:var(--teal-deep)}
.d-inq:hover{background:var(--teal);color:#fff}

/* 到期配色 */
.d-exp{font-size:12.5px;font-weight:700}

/* ---------- 询价弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(26,42,58,.55);display:none;place-items:center;z-index:100;padding:20px;overflow-y:auto}
.modal.open{display:grid}
.modal.closing{display:grid;pointer-events:none}
.modal.closing .modal-box{animation:popOut .18s ease forwards}
.modal-box{background:#fff;border-radius:20px;max-width:420px;width:100%;padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.25);position:relative;animation:pop .28s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes popOut{from{transform:scale(1);opacity:1}to{transform:scale(.94);opacity:0}}
.modal-box h3{font-size:20px;margin-bottom:4px}
.modal-box .m-sub{color:var(--ink-soft);font-size:13px;margin-bottom:18px}
.modal-box label{font-size:13px;font-weight:700;display:block;margin:12px 0 6px}
.modal-box input,.modal-box textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;background:#fafcff;
}
.modal-box input:focus,.modal-box textarea:focus{outline:none;border-color:var(--teal)}
.modal-box .m-close{position:absolute;top:14px;right:16px;border:none;background:none;font-size:22px;color:var(--ink-soft);cursor:pointer}
.modal-box .m-send{width:100%;margin-top:18px;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--sky-deep));color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.modal-box .m-send:hover{opacity:.92}
.m-ok{position:absolute;inset:0;display:grid;place-items:center;background:#fff;border-radius:20px;text-align:center;display:none;padding:20px}
.m-ok.show{display:grid}
.m-ok .ok-ico{width:62px;height:62px;margin-bottom:6px}
.m-ok h3{color:var(--teal-deep)}

/* ---------- 结算弹窗(购买/砍价/定金) ---------- */
.pay-amt{background:#fff8ea;border:1px dashed #f0d9a4;border-radius:14px;padding:14px 16px;margin:6px 0 4px;font-size:14px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pay-amt b{color:var(--amber);font-size:26px;font-weight:900}
.pay-amt .tmp{font-size:12px;color:var(--teal-deep);font-weight:700}
.pay-methods{display:flex;gap:10px;margin-top:4px}
.pay-methods .pm{flex:1;margin:0;cursor:pointer}
.pay-methods .pm input{display:none}
.pay-methods .pm span{display:block;text-align:center;padding:10px 0;border:1.5px solid var(--line);border-radius:12px;font-size:13.5px;font-weight:700;color:var(--ink-soft);background:#fafcff;transition:.18s}
.pay-methods .pm input:checked+span{border-color:var(--teal);color:var(--teal-deep);background:#e9fbf6;box-shadow:0 0 0 3px rgba(23,184,144,.12)}
.modal-box .hint{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
.hint{font-size:12.5px;color:var(--ink-soft);line-height:1.6}

/* 工具类(前台) */
.flex{display:flex}
.gap8{gap:8px}

/* ---------- 页脚 ---------- */
.footer{margin-top:60px;border-top:1px solid var(--line);background:rgba(255,255,255,.6);padding:34px 0}
.footer-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer .f-brand{font-weight:800;color:var(--ink)}
.footer small{color:var(--ink-soft)}
.footer .sitemap{margin-left:auto;display:flex;gap:18px}
.footer .sitemap a{color:var(--ink-soft);font-size:14px}
.footer .sitemap a:hover{color:var(--teal)}
.footer-custom{max-width:1180px;margin:14px auto 0;padding:0 20px;color:var(--ink-soft);font-size:13px;text-align:center;line-height:1.8}
.footer-custom a{color:var(--teal-deep);text-decoration:underline}

/* 空状态 */
/* —— 结果卡 & 过户填写(与主题一致) —— */
.result{max-width:560px;margin:48px auto;text-align:center}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--round);box-shadow:var(--shadow);padding:40px 32px}
.result-icon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:38px;background:var(--line)}
.result-icon.ok{background:linear-gradient(135deg,rgba(23,184,144,.16),rgba(62,198,164,.08))}
.result-icon.err{background:rgba(239,91,91,.12)}
.result-card h2{margin:0 0 8px}
.result-card .p{margin:6px 0;color:var(--ink-soft)}
.result-card .amt{font-size:30px;font-weight:900;color:var(--amber);margin:14px 0}
.result-actions{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.result .m-send{width:100%;margin-top:14px;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--sky-deep));color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:.18s}
.result .m-send:hover{filter:brightness(1.05)}
.tf-box{margin-top:22px;padding:18px;border:1px dashed #b9ecd9;background:#f3fbf8;border-radius:14px;text-align:left}
.tf-box .tf-head{font-weight:800;font-size:15px;color:var(--teal-deep)}
.tf-box .tf-tip{margin:4px 0 12px;font-size:12.5px;color:var(--ink-soft)}
.tf-box label.tf-lb{display:block;font-size:12.5px;font-weight:700;margin:10px 0 4px;color:var(--ink)}
.tf-box select,.tf-box input[type=text]{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;color:var(--ink);background:#fafcff;transition:.18s}
.tf-box select:focus,.tf-box input[type=text]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(23,184,144,.12)}
.tf-box select:disabled,.tf-box input[type=text]:disabled{background:#f0f2f5;color:var(--ink-soft);cursor:not-allowed}
.tf-box .m-send{width:100%;margin-top:14px}
.tf-box .tf-done{margin-bottom:10px;font-size:13px;color:var(--teal-deep);background:#e9fbf6;border:1px solid #b9ecd9;padding:8px 12px;border-radius:10px}
.tf-box .tf-ok{color:var(--teal-deep);font-size:13px;margin-top:8px}
.tf-box .tf-err{color:var(--red);font-size:13px;margin-top:8px}
.empty{text-align:center;padding:70px 0;color:var(--ink-soft)}
.empty .ico{font-size:52px}

/* ---------- 响应式 ---------- */
@media(max-width:920px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .wrap{padding:0 12px}
  .topbar-in{height:auto;padding:12px 16px;flex-wrap:wrap;gap:10px 14px}
  .brand{font-size:19px;gap:10px}
  .brand .logo{width:40px;height:40px;border-radius:12px}
  .nav{margin-left:auto;gap:4px}
  .nav a{padding:7px 11px;font-size:13px}
  /* 搜索在手机上收起为图标，面板占满一栏 */
  .navsearch-trigger{width:40px;height:40px}
  .navsearch-trigger svg{width:26px;height:26px}
  .search-panel{padding:12px 12px 16px}
  .sp-form{height:46px;border-radius:12px}
  .sp-form button{min-width:64px}
  .hero{padding:34px 14px 22px}
  .hero h1{font-size:clamp(26px,7vw,34px)}
  .hero p{font-size:15px}
  .hero-badges{gap:10px}
  .hero-badges span{padding:6px 14px;font-size:12.5px}
  /* 手机端：紧凑单行卡片，一屏能看到一整页更多域名 */
  .cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .card{padding:10px 11px 10px;gap:4px;border-radius:14px;box-shadow:0 4px 14px rgba(58,120,160,.10)}
  .d-top{gap:6px;align-items:center}
  .d-name{font-size:15.5px;letter-spacing:0;line-height:1.25}
  .d-type{font-size:10px;padding:2px 8px;letter-spacing:.2px}
  .d-intro{display:none}
  .d-tags{display:none}
  .d-foot{flex-wrap:nowrap;gap:6px;padding-top:8px;border-top:none;align-items:center;margin-top:auto}
  .d-price{font-size:14px;line-height:1.1}
  .d-price em{display:inline;font-size:10px;margin-left:4px}
  .d-buy,.d-inq{flex:0 0 auto;text-align:center;padding:6px 9px;font-size:11.5px;border-radius:9px;white-space:nowrap}
  .filters{gap:8px;margin-bottom:16px}
  .f-row{gap:8px}
  .chip{padding:6px 12px;font-size:12.5px}
  /* 详情页(尤其开启了小刀的双按钮宽度) */
  .detail{margin:18px auto;padding:0 12px}
  .d-hero{padding:24px 20px}
  .d-body{padding:18px 16px}
  .d-price-row{margin-bottom:20px}
  .d-price-row .cta{width:100%}
  .d-price-row .cta a,.d-price-row .cta button{flex:1 1 150px;min-width:145px;max-width:230px;padding:13px 16px;font-size:15px;text-align:center;justify-content:center}
  .d-price-row .p1{font-size:30px}
  .facts{grid-template-columns:repeat(2,1fr);gap:10px}
  .fact{padding:11px 12px}
  .modal-box{padding:20px 16px}
  .pay-methods{gap:8px}
  .footer{margin-top:40px;padding:26px 0}
}
/* 极窄屏: 顶栏改两行布局(第1行 品牌+搜索按钮, 第2行 导航链接), 杜绝 nav 挤爆换行错位 */
@media(max-width:640px){
  .topbar-in{row-gap:6px}
  .brand{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .navsearch-trigger{order:2;flex:0 0 auto}
  .nav{margin-left:0;order:3;flex:1 1 100%;width:100%;flex-wrap:wrap}
  .nav a{white-space:nowrap}
}
@media(max-width:380px){
  .cards{gap:7px}
  .card{padding:9px}
  .d-name{font-size:13.5px}
  .d-price{font-size:13px}
  .d-buy,.d-inq{padding:5px 7px;font-size:11px}
  .d-price-row .cta a,.d-price-row .cta button{flex:1 1 145px;min-width:140px;max-width:210px;padding:12px 12px;font-size:14px}
  .d-price-row .p1{font-size:26px}
  .modal-box{padding:18px 14px}
  .brand small{display:none}
  .nav a{padding:6px 9px;font-size:12.5px}
  .topbar-in{gap:8px 10px}
}
/* 长文本/元素防撑破视口的通用兜底 */
img{max-width:100%;height:auto}
pre,code{max-width:100%;overflow-x:auto}

/* 轻提示 */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 22px;border-radius:999px;font-size:14px;box-shadow:0 10px 26px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.3s;z-index:200}
.toast.show{opacity:1}

/* 分页 */
.pg{display:flex;justify-content:center;margin:34px 0 6px}
.pg ul{display:flex;gap:8px;flex-wrap:wrap}
.pg li a{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--ink-soft);transition:.18s}
.pg li a:hover{border-color:var(--teal);color:var(--teal)}
.pg li.cur a{background:var(--teal);border-color:var(--teal);color:#fff}

/* 列表区无刷新加载态 */
.list-zone{position:relative;min-height:150px}
.list-zone.loading{opacity:.5;pointer-events:none}
.list-zone.loading::after{content:"🐤 孵米中…";position:absolute;left:50%;top:40px;transform:translateX(-50%);color:var(--ink-soft);font-weight:600}

/* ============================================
   交互顺滑增强(最小改动, 不改变任何视觉设计)
   1) 页面切换过渡(Chrome 126+ 支持, 其余浏览器自动忽略)
   2) 页面进入淡入(所有浏览器兜底)
   3) 统一按下反馈: active 微缩放, 消除"生硬"手感
   4) 移动端去除点击闪灰, 配合自定义反馈更跟手
   ============================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }

body { animation: pageIn .22s ease both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

button, .btn, .chip, .pg li a, .nav a, .m-send,
.pay-methods .pm, .sp-form button, .d-buy, .d-inq {
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn:active, .chip:active, .pg li a:active,
.nav a:active, .m-send:active, .pay-methods .pm:active,
.sp-form button:active, .d-buy:active, .d-inq:active {
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}