/* ===== 金龙进场动画 ===== */
#dragon-splash{
  position:fixed;inset:0;z-index:99999;
  background:radial-gradient(ellipse at center,#0d0800 0%,#050200 50%,#000 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
}
#dragon-particles{position:absolute;inset:0;z-index:1}
.dragon-img-wrap{
  position:relative;z-index:2;
  width:min(70vw,600px);height:auto;
  /* 阶段1: 从右下飞入(0-2s) → 阶段2: 到达后持续浮动 */
  animation:dragonFlyIn 2.2s cubic-bezier(.22,.68,.36,1) both,
            dragonFloat 3.5s ease-in-out 2.2s infinite;
  filter:drop-shadow(0 0 40px rgba(255,200,0,.6)) drop-shadow(0 0 80px rgba(255,150,0,.3));
}
.dragon-img{
  width:100%;height:auto;display:block;
  opacity:0;
  transition:opacity .5s ease;
  animation:dragonBreath 3s ease-in-out 2.2s infinite,
            dragonGlow 3s ease-in-out 1s infinite;
}
.dragon-img.show{
  opacity:1;
}
.dragon-title{
  position:relative;z-index:2;
  font-family:'Inter',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
  letter-spacing:.15em;margin-top:20px;
  background:linear-gradient(135deg,#ffd700 0%,#ffb800 25%,#fff5cc 50%,#ffb800 75%,#ffd700 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:dragonTitleIn 1.2s ease 1.5s both,goldShimmer 3s linear 2.5s infinite;
}
.dragon-subtitle{
  position:relative;z-index:2;
  font-size:clamp(.75rem,1.5vw,1rem);
  color:rgba(255,200,100,.5);letter-spacing:.3em;margin-top:10px;
  animation:dragonTitleIn 1.2s ease 1.8s both;
}
/* 立即咨询按钮 */
.dragon-cta{
  position:relative;z-index:10;
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;padding:14px 40px;
  background:rgba(255,200,0,.08);
  border:1px solid rgba(255,200,0,.35);
  border-radius:50px;
  color:#ffd700;font-size:clamp(.9rem,1.8vw,1.1rem);font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  cursor:pointer;
  backdrop-filter:blur(12px);
  box-shadow:0 0 20px rgba(255,200,0,.1),inset 0 1px 0 rgba(255,255,255,.06);
  transition:all .4s cubic-bezier(.23,1,.32,1);
  animation:dragonTitleIn 1.2s ease 2.1s both;
  overflow:hidden;
}
.dragon-cta::before{
  content:'';position:absolute;inset:-1px;border-radius:50px;padding:1px;
  background:linear-gradient(135deg,rgba(255,215,0,.6),rgba(255,180,0,.1),rgba(255,215,0,.6));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .4s ease;pointer-events:none;
}
.dragon-cta::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.15),transparent);
  transition:none;
  animation:ctaSweep 3s ease-in-out 3s infinite;
}
@keyframes ctaSweep{
  0%{left:-100%}
  50%{left:150%}
  100%{left:150%}
}
.dragon-cta:hover{
  background:rgba(255,200,0,.18);
  border-color:rgba(255,215,0,.6);
  box-shadow:0 0 40px rgba(255,200,0,.25),0 0 80px rgba(255,200,0,.1),inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-2px) scale(1.03);
  color:#fff5cc;
}
.dragon-cta:hover::before{opacity:1}
.dragon-cta-icon{
  font-size:1.1em;
  animation:iconPulse 2s ease-in-out 2.5s infinite;
}
@keyframes iconPulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.2);opacity:1}
}
.dragon-cta-text{letter-spacing:.15em}
.dragon-cta-arrow{
  transition:transform .3s ease;font-size:1.1em;
}
.dragon-cta:hover .dragon-cta-arrow{
  transform:translateX(4px);
}
.dragon-loading-bar{
  position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  width:min(60vw,300px);height:2px;
  background:rgba(255,200,0,.1);border-radius:1px;
  z-index:2;overflow:hidden;
  animation:fadeIn 1s ease 1.5s both;
}
.dragon-loading-fill{
  width:0;height:100%;
  background:linear-gradient(90deg,#ffd700,#ffb800,#ffd700);
  border-radius:1px;
  animation:loadFill 4s cubic-bezier(.4,0,.2,1) .5s forwards;
  box-shadow:0 0 10px rgba(255,200,0,.6);
}
/* 飞入动画：从右下角飞入中心，带旋转 */
@keyframes dragonFlyIn{
  0%{opacity:0;transform:translate(120vw,60vh) scale(.2) rotate(25deg)}
  30%{opacity:1}
  60%{transform:translate(-5vw,-3vh) scale(1.08) rotate(-5deg)}
  80%{transform:translate(2vw,1vh) scale(.97) rotate(2deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
/* 到达后的持续浮动 */
@keyframes dragonFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-12px) rotate(1deg)}
  75%{transform:translateY(8px) rotate(-1deg)}
}
/* 呼吸缩放 */
@keyframes dragonBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
/* 金光脉动 */
@keyframes dragonGlow{
  0%,100%{filter:drop-shadow(0 0 30px rgba(255,200,0,.5)) drop-shadow(0 0 60px rgba(255,150,0,.2)) brightness(1)}
  50%{filter:drop-shadow(0 0 60px rgba(255,200,0,.8)) drop-shadow(0 0 120px rgba(255,150,0,.5)) brightness(1.15)}
}
@keyframes dragonTitleIn{
  from{opacity:0;transform:translateY(30px);letter-spacing:.5em}
  to{opacity:1;transform:translateY(0);letter-spacing:.15em}
}
@keyframes goldShimmer{
  0%{background-position:200% 50%}
  100%{background-position:-200% 50%}
}
@keyframes loadFill{
  0%{width:0}100%{width:100%}
}
@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
/* 手机端进场动画适配 */
@media(max-width:768px){
  .dragon-img-wrap{width:85vw}
  .dragon-title{letter-spacing:.1em;margin-top:14px}
  .dragon-subtitle{letter-spacing:.15em;font-size:.7rem}
  .dragon-loading-bar{bottom:40px;width:70vw}
  @keyframes dragonFlyIn{
    0%{opacity:0;transform:translate(100vw,50vh) scale(.15) rotate(20deg)}
    30%{opacity:1}
    60%{transform:translate(-3vw,-2vh) scale(1.05) rotate(-3deg)}
    80%{transform:translate(1vw,1vh) scale(.98) rotate(1deg)}
    100%{transform:translate(0,0) scale(1) rotate(0deg)}
  }
}

/* ===== 全局重置与基础 ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-primary:#0e1015;--bg-secondary:#1a1d28;--bg-card:rgba(28,31,42,.85);
  --accent-gold:#d4af37;--accent-gold-light:#f0d675;--accent-champagne:#e8c84a;
  --accent-warm:#c4962a;--accent-green:#34d399;
  --text-primary:#f5f0e6;--text-secondary:#c9bfac;--text-muted:#9e9484;
  --border-color:rgba(212,175,55,.18);--glow-gold:rgba(212,175,55,.35);
  --glow-warm:rgba(228,200,74,.25);
  --glass-bg:rgba(18,20,28,.7);--glass-border:rgba(212,175,55,.12);
  --radius-lg:20px;--radius-md:12px;--radius-sm:8px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}

/* ===== 粒子背景画布 ===== */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ===== 全局背景光晕 ===== */
.bg-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.1;pointer-events:none;z-index:0}
.bg-glow-1{width:600px;height:600px;background:var(--accent-gold);top:-200px;left:-100px;animation:floatGlow 15s ease-in-out infinite}
.bg-glow-2{width:500px;height:500px;background:var(--accent-warm);bottom:-150px;right:-100px;animation:floatGlow 18s ease-in-out infinite reverse}
.bg-glow-3{width:400px;height:400px;background:var(--accent-champagne);top:50%;left:50%;transform:translate(-50%,-50%);animation:floatGlow 20s ease-in-out infinite}
@keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-40px) scale(1.1)}50%{transform:translate(-20px,30px) scale(.9)}75%{transform:translate(40px,20px) scale(1.05)}}

/* ===== 导航栏 ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);background:rgba(8,9,12,.8);border-bottom:1px solid var(--glass-border);transition:all .4s ease}
.navbar.scrolled{padding:10px 40px;background:rgba(8,9,12,.95);box-shadow:0 4px 30px rgba(0,0,0,.4)}
.nav-logo{display:flex;align-items:center;gap:12px;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.nav-logo .logo-img{width:38px;height:38px;max-width:38px;max-height:38px;border-radius:10px;object-fit:cover;box-shadow:0 0 15px var(--glow-gold);flex-shrink:0}
.nav-logo span{background:linear-gradient(135deg,var(--accent-gold),var(--accent-gold-light),var(--accent-champagne));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-stats{display:flex;gap:32px}
.nav-stat{text-align:center}
.nav-stat .stat-num{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--accent-gold-light),var(--accent-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-stat .stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}

/* ===== Hero 区域 ===== */
.hero{position:relative;z-index:1;padding:160px 40px 80px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:50px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);font-size:.8rem;color:var(--accent-gold);margin-bottom:24px;animation:fadeInDown .8s ease}
.hero-badge .pulse-dot{width:8px;height:8px;background:var(--accent-green);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:20px;animation:fadeInUp .8s ease .2s both}
.hero h1 .gradient-text{background:linear-gradient(135deg,var(--accent-champagne) 0%,var(--accent-gold-light) 30%,var(--accent-gold) 60%,var(--accent-gold-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientShift 5s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-desc{font-size:1.15rem;color:var(--text-secondary);max-width:650px;margin:0 auto 40px;animation:fadeInUp .8s ease .4s both}
.hero-line{width:80px;height:3px;background:linear-gradient(90deg,var(--accent-gold),var(--accent-champagne));border-radius:2px;margin:0 auto;animation:fadeInUp .8s ease .6s both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ===== 卡片网格 ===== */
.section-title{text-align:center;margin-bottom:30px;position:relative;z-index:1}
.section-title h2{font-size:2rem;font-weight:700;margin-bottom:8px}
.section-title p{color:var(--text-secondary);font-size:1rem}

/* 标签徽章组 */
.tag-badges{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin-top:14px;flex-wrap:wrap;
}
.tag-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 20px;
  border-radius:50px;
  font-size:.88rem;font-weight:600;letter-spacing:.06em;
  color:var(--accent-gold-light);
  background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(180,140,30,.15));
  border:1px solid rgba(212,175,55,.25);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
  transition:all .35s cubic-bezier(.23,1,.32,1);
  animation:fadeInUp .6s ease both;
}
.tag-badge:nth-child(1){animation-delay:.1s}
.tag-badge:nth-child(2){animation-delay:.25s}
.tag-badge:nth-child(3){animation-delay:.4s}
.tag-badge:hover{
  border-color:rgba(212,175,55,.5);
  background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(180,140,30,.25));
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 20px rgba(212,175,55,.1);
  transform:translateY(-2px);
  color:#fff5e0;
}
.tag-icon{font-size:1rem;line-height:1}
/* ===== 搜索框 ===== */
.search-bar{position:sticky;top:75px;z-index:100;max-width:600px;margin:0 auto 44px;padding:14px 24px;display:flex;align-items:center;gap:14px;background:rgba(20,22,32,.75);backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(212,175,55,.15);border-radius:16px;transition:all .4s cubic-bezier(.23,1,.32,1);position:sticky;box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03)}
.search-bar::before{content:'';position:absolute;inset:-1px;border-radius:17px;padding:1px;background:conic-gradient(from var(--search-angle,0deg),transparent 0%,rgba(212,175,55,.4) 10%,transparent 20%,transparent 80%,rgba(212,175,55,.4) 90%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s ease;pointer-events:none}
.search-bar:focus-within{border-color:rgba(212,175,55,.3);box-shadow:0 8px 40px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,.08),inset 0 1px 0 rgba(255,255,255,.05);transform:scale(1.01)}
.search-bar:focus-within::before{opacity:1;animation:searchGlow 3s linear infinite}
@keyframes searchGlow{0%{--search-angle:0deg}100%{--search-angle:360deg}}
@property --search-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.search-bar .search-icon{font-size:1.1rem;flex-shrink:0;opacity:.5;transition:opacity .3s ease}
.search-bar:focus-within .search-icon{opacity:.9}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:1rem;font-family:inherit;letter-spacing:.02em}
.search-bar input::placeholder{color:var(--text-muted);transition:color .3s ease}
.search-bar:focus-within input::placeholder{color:var(--text-secondary)}
.search-bar .search-clear{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(212,175,55,.1);color:var(--text-muted);font-size:.7rem;cursor:pointer;opacity:0;transform:scale(.6) rotate(-90deg);transition:all .3s cubic-bezier(.23,1,.32,1);flex-shrink:0}
.search-bar .search-clear.visible{opacity:1;transform:scale(1) rotate(0deg)}
.search-bar .search-clear:hover{background:rgba(212,175,55,.25);color:var(--accent-gold-light)}
.search-bar .search-count{font-size:.72rem;color:var(--accent-gold);background:rgba(212,175,55,.1);padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0;opacity:0;transform:translateX(8px);transition:all .3s ease;font-weight:600;letter-spacing:.03em}
.search-bar .search-count.visible{opacity:1;transform:translateX(0)}

/* 搜索无结果 */
.search-empty{text-align:center;padding:60px 20px;grid-column:1/-1}
.search-empty .empty-icon{font-size:3rem;margin-bottom:16px;opacity:.4}
.search-empty h3{font-size:1.2rem;color:var(--text-secondary);margin-bottom:8px}
.search-empty p{color:var(--text-muted);font-size:.9rem}

/* 卡片搜索隐藏动画 */
.demo-card.search-hidden{display:none}

.cards-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:30px;padding:0 40px 80px;max-width:1400px;margin:0 auto}

/* ===== 卡片 ===== */
.demo-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:all .5s cubic-bezier(.23,1,.32,1);opacity:0;transform:translateY(50px);backdrop-filter:blur(16px);position:relative}
.demo-card.visible{opacity:1;transform:translateY(0)}
.demo-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;background:linear-gradient(135deg,rgba(201,168,76,.05) 0%,rgba(201,168,76,.3) 50%,rgba(212,175,55,.05) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease;pointer-events:none}
.demo-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 25px 60px rgba(0,0,0,.5),0 0 40px rgba(201,168,76,.12);border-color:rgba(201,168,76,.2)}
.demo-card:hover::before{opacity:1}

/* 卡片图片区 - 完整展示 */
.card-image{position:relative;overflow:hidden;background:var(--bg-secondary)}
.card-image img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.demo-card:hover .card-image img{transform:scale(1.03)}
.card-image .card-badge{position:absolute;top:14px;right:14px;padding:5px 14px;border-radius:20px;font-size:.72rem;font-weight:600;background:rgba(201,168,76,.15);color:var(--accent-gold-light);border:1px solid rgba(201,168,76,.25);backdrop-filter:blur(8px);z-index:2}

/* 卡片内容区 */
.card-content{padding:20px 24px 8px}
.card-content h3{
  font-size:1.35rem;font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
  position:relative;padding-bottom:12px;
}
/* 标题文字 — 金色渐变 + 扫光动画 */
.card-content h3::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-gold),var(--accent-champagne),var(--accent-gold-light),transparent);
  border-radius:1px;opacity:.45;
  transition:opacity .4s ease;
}
.demo-card:hover .card-content h3::after{
  opacity:.85;
  animation:titleLineGlow 2s ease-in-out infinite;
}
@keyframes titleLineGlow{
  0%,100%{opacity:.85;filter:blur(0px)}
  50%{opacity:1;filter:blur(1px);box-shadow:0 0 8px var(--glow-gold)}
}
/* 标题文字样式 — 金色渐变 + 光影扫过 */
.card-content h3 .title-text{
  background:linear-gradient(
    135deg,
    var(--accent-gold) 0%,
    var(--accent-gold-light) 25%,
    #fff5e0 50%,
    var(--accent-gold-light) 75%,
    var(--accent-gold) 100%
  );
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleShimmer 4s ease-in-out infinite;
  letter-spacing:.03em;
  text-shadow:none;
  transition:filter .3s ease;
}
.demo-card:hover .card-content h3 .title-text{
  filter:drop-shadow(0 0 6px rgba(212,175,55,.4));
  animation:titleShimmer 2s ease-in-out infinite;
}
@keyframes titleShimmer{
  0%{background-position:100% 50%}
  50%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* 标题装饰圆点 — 菱形金光呼吸 */
.card-content h3 .title-dot{
  width:10px;height:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-gold),var(--accent-champagne));
  border-radius:2px;transform:rotate(45deg);
  box-shadow:0 0 8px rgba(212,175,55,.5),0 0 16px rgba(212,175,55,.2);
  animation:dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 8px rgba(212,175,55,.5),0 0 16px rgba(212,175,55,.2);transform:rotate(45deg) scale(1)}
  50%{box-shadow:0 0 14px rgba(212,175,55,.8),0 0 28px rgba(212,175,55,.4);transform:rotate(45deg) scale(1.15)}
}

.card-content .card-desc{color:var(--text-secondary);font-size:.88rem;line-height:1.7;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 凭证信息区 */
.credentials-section{padding:0 24px 20px}
.cred-group{background:rgba(40,38,30,.55);border:1px solid rgba(212,175,55,.14);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;transition:all .3s ease}
.cred-group:hover{background:rgba(48,45,34,.65);border-color:rgba(212,175,55,.22)}
.cred-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.cred-header .cred-icon{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px}
.cred-header .cred-icon.front{background:rgba(16,185,129,.2);color:var(--accent-green)}
.cred-header .cred-icon.admin{background:rgba(201,168,76,.2);color:var(--accent-gold)}
.cred-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:.85rem}
.cred-row .cred-label{color:var(--text-secondary);min-width:50px}
.cred-row .cred-value{font-family:'JetBrains Mono','Fira Code',monospace;color:var(--accent-gold-light);background:rgba(201,168,76,.1);padding:3px 10px;border-radius:6px;font-size:.8rem;letter-spacing:.02em;position:relative;cursor:pointer;transition:all .2s ease;user-select:all}
.cred-row .cred-value:hover{background:rgba(201,168,76,.18);box-shadow:0 0 12px rgba(201,168,76,.1)}
.cred-row .cred-value .copy-hint{position:absolute;right:-8px;top:-8px;background:var(--accent-gold);color:#0a0a0a;font-size:9px;padding:2px 6px;border-radius:4px;opacity:0;transform:translateY(4px);transition:all .2s ease;pointer-events:none;font-family:'Inter',sans-serif;white-space:nowrap}
.cred-row .cred-value:hover .copy-hint{opacity:1;transform:translateY(0)}

/* 卡片操作按钮 */
.card-actions{display:flex;gap:10px;padding:0 24px 24px}
.card-actions .action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;text-decoration:none;position:relative;overflow:hidden}
.action-btn.btn-front{background:linear-gradient(135deg,#0d7a52,#10b981);color:#fff;border:1px solid rgba(16,185,129,.3)}
.action-btn.btn-front:hover{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 8px 25px rgba(16,185,129,.3);transform:translateY(-2px)}
.action-btn.btn-admin{background:linear-gradient(135deg,#9a7a2e,var(--accent-gold));color:#0a0a0a;border:1px solid rgba(201,168,76,.3);font-weight:700}
.action-btn.btn-admin:hover{background:linear-gradient(135deg,var(--accent-gold),var(--accent-gold-light));box-shadow:0 8px 25px rgba(201,168,76,.3);transform:translateY(-2px)}
.action-btn .btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.1);transform:scale(0);animation:ripple .6s linear}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Toast 通知 */
.toast{position:fixed;top:80px;right:30px;z-index:9999;padding:14px 24px;border-radius:var(--radius-md);background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);color:var(--accent-gold-light);font-size:.85rem;backdrop-filter:blur(16px);transform:translateX(120%);transition:transform .4s cubic-bezier(.68,-.55,.27,1.55);display:flex;align-items:center;gap:8px}
.toast.show{transform:translateX(0)}

/* 底部 */
.site-footer{position:relative;z-index:1;text-align:center;padding:40px;border-top:1px solid var(--glass-border);color:var(--text-muted);font-size:.82rem}
.site-footer a{color:var(--accent-gold);transition:color .2s ease}
.site-footer a:hover{color:var(--accent-gold-light)}

/* ===== 悬浮按钮组 ===== */
.float-btns{
  position:fixed;right:20px;bottom:28px;z-index:9000;
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;
}
.float-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px 10px 14px;
  border-radius:50px;
  text-decoration:none;
  cursor:pointer;
  font-size:.82rem;font-weight:600;letter-spacing:.05em;
  backdrop-filter:blur(20px) saturate(1.8);
  transition:all .35s cubic-bezier(.23,1,.32,1);
  position:relative;overflow:hidden;
  animation:floatBtnIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.float-btn:nth-child(1){animation-delay:.3s}
.float-btn:nth-child(2){animation-delay:.5s}
@keyframes floatBtnIn{
  from{opacity:0;transform:translateX(40px) scale(.8)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
/* 图标 */
.float-btn-icon{
  font-size:1rem;line-height:1;flex-shrink:0;
  transition:transform .3s ease;
}
.float-btn:hover .float-btn-icon{transform:scale(1.2)}
/* 文字 */
.float-btn-label{white-space:nowrap}

/* —— 立即咨询（金色）—— */
.float-btn-consult{
  background:linear-gradient(135deg,rgba(212,175,55,.2) 0%,rgba(180,140,30,.35) 100%);
  color:#ffd700;
  border:1px solid rgba(255,215,0,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 15px rgba(212,175,55,.1);
}
/* 扫光 */
.float-btn-consult::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.12),transparent);
  animation:btnSweep 3s ease-in-out 1s infinite;pointer-events:none;
}
@keyframes btnSweep{0%{left:-100%}40%{left:150%}100%{left:150%}}
.float-btn-consult:hover{
  background:linear-gradient(135deg,rgba(212,175,55,.35),rgba(180,140,30,.5));
  border-color:rgba(255,215,0,.55);
  box-shadow:0 6px 28px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,.18);
  transform:translateY(-2px);color:#fff5cc;
}

/* —— 公群（青蓝色）—— */
.float-btn-group{
  background:linear-gradient(135deg,rgba(34,211,238,.12) 0%,rgba(6,182,212,.25) 100%);
  color:#67e8f9;
  border:1px solid rgba(34,211,238,.25);
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 15px rgba(34,211,238,.08);
}
.float-btn-group:hover{
  background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(6,182,212,.4));
  border-color:rgba(103,232,249,.5);
  box-shadow:0 6px 28px rgba(0,0,0,.4),0 0 30px rgba(34,211,238,.15);
  transform:translateY(-2px);color:#cffafe;
}

/* 手机端 */
@media(max-width:480px){
  .float-btns{right:12px;bottom:18px;gap:8px}
  .float-btn{padding:8px 16px 8px 12px;font-size:.76rem}
  .float-btn-icon{font-size:.9rem}
}

/* 加载骨架屏 */
.skeleton-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}
.skeleton-img{height:220px;background:linear-gradient(90deg,rgba(30,41,59,.5) 25%,rgba(51,65,85,.5) 50%,rgba(30,41,59,.5) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-line{height:14px;border-radius:7px;margin:16px 24px 0;background:linear-gradient(90deg,rgba(30,41,59,.5) 25%,rgba(51,65,85,.5) 50%,rgba(30,41,59,.5) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-line.short{width:60%}
.skeleton-line.last{margin-bottom:24px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 空状态 */
.empty-state{text-align:center;padding:100px 40px;position:relative;z-index:1}
.empty-state .empty-icon{font-size:4rem;margin-bottom:20px;opacity:.3}
.empty-state h3{font-size:1.4rem;margin-bottom:10px;color:var(--text-secondary)}
.empty-state p{color:var(--text-muted)}

/* 滚动条 */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.35)}

/* ===== 响应式适配 ===== */

/* 超宽屏 (>1440px) - PC大屏3列+宽松间距 */
@media(min-width:1441px){
  .cards-grid{grid-template-columns:repeat(3,1fr);max-width:1600px;gap:36px;padding:0 60px 100px}
  .hero{padding:180px 60px 100px}
  .hero-desc{font-size:1.25rem;max-width:720px}
  .navbar{padding:18px 60px}
  .navbar.scrolled{padding:12px 60px}
  .nav-stats{gap:40px}
  .section-title h2{font-size:2.2rem}
}

/* PC中屏 (1025px~1440px) - 标准3列 */
@media(min-width:1025px) and (max-width:1440px){
  .cards-grid{grid-template-columns:repeat(3,1fr);gap:28px;padding:0 40px 80px}
}

/* 平板 (769px~1024px) - 2列布局 */
@media(min-width:769px) and (max-width:1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr);padding:0 28px 60px;gap:24px}
  .hero{padding:140px 30px 60px}
  .hero-desc{font-size:1.05rem}
  .navbar{padding:14px 28px}
  .navbar.scrolled{padding:10px 28px}
  .nav-stats{gap:24px}
  .nav-stat .stat-num{font-size:1.15rem}
}

/* 手机横屏 / 大手机 (481px~768px) - 单列宽卡片 */
@media(min-width:481px) and (max-width:768px){
  .navbar{
    padding:14px 20px;
    justify-content:center;
    background:linear-gradient(180deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.8) 100%);
    border-bottom:none;
  }
  .navbar::after{
    content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-gold),var(--accent-champagne),var(--accent-gold),transparent);
    opacity:.35;
  }
  .navbar.scrolled{
    padding:10px 20px;
    background:rgba(8,9,12,.95);
    box-shadow:0 4px 24px rgba(0,0,0,.5);
  }
  .navbar.scrolled::after{opacity:.5}
  .nav-stats{display:none}
  .nav-logo{
    font-size:1.25rem;gap:10px;
  }
  .nav-logo .logo-img{
    width:36px;height:36px;max-width:36px;max-height:36px;
    border-radius:10px;
    box-shadow:0 0 12px rgba(212,175,55,.4),0 0 24px rgba(212,175,55,.15);
  }
  .hero{padding:110px 24px 40px}
  .hero h1{font-size:2.2rem;margin-bottom:16px}
  .hero-desc{font-size:1rem;margin-bottom:28px}
  .hero-badge{font-size:.75rem;padding:6px 16px}
  .section-title{margin-bottom:36px}
  .section-title h2{font-size:1.6rem}
  .section-title p{font-size:.88rem}
  .cards-grid{grid-template-columns:1fr;padding:0 20px 50px;gap:22px;max-width:560px}
  .card-content h3{font-size:1.2rem}
  .card-actions .action-btn{padding:11px 14px;font-size:.8rem}
  .site-footer{padding:30px 20px}
}

/* 手机竖屏 (<=480px) - 紧凑单列 */
@media(max-width:480px){
  .navbar{
    padding:12px 16px;
    justify-content:center;
    background:linear-gradient(180deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.8) 100%);
    border-bottom:none;
  }
  .navbar::after{
    content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-gold),var(--accent-champagne),var(--accent-gold),transparent);
    opacity:.3;
  }
  .navbar.scrolled{
    padding:8px 16px;
    background:rgba(8,9,12,.95);
    box-shadow:0 4px 20px rgba(0,0,0,.5);
  }
  .navbar.scrolled::after{opacity:.45}
  .nav-stats{display:none}
  .nav-logo{
    font-size:1.15rem;gap:8px;
  }
  .nav-logo .logo-img{
    width:34px;height:34px;max-width:34px;max-height:34px;
    border-radius:9px;
    box-shadow:0 0 10px rgba(212,175,55,.35),0 0 20px rgba(212,175,55,.12);
  }
  .hero{padding:90px 16px 32px}
  .hero h1{font-size:1.75rem;letter-spacing:-.02em;margin-bottom:12px}
  .hero-desc{font-size:.88rem;line-height:1.65;margin-bottom:22px}
  .hero-badge{font-size:.7rem;padding:5px 14px;margin-bottom:18px}
  .hero-line{width:50px;height:2px}
  .section-title{margin-bottom:28px}
  .section-title h2{font-size:1.35rem}
  .section-title p{font-size:.8rem}
  .cards-grid{grid-template-columns:1fr;padding:0 12px 40px;gap:18px}
  .card-image .card-badge{top:10px;right:10px;padding:4px 10px;font-size:.65rem}
  .card-content{padding:16px 16px 6px}
  .card-content h3{font-size:1.1rem;gap:6px}
  .card-content h3 .title-dot{width:6px;height:6px}
  .card-content .card-desc{font-size:.82rem;-webkit-line-clamp:2;margin-bottom:12px}
  .credentials-section{padding:0 16px 14px}
  .cred-group{padding:12px 12px;border-radius:var(--radius-sm)}
  .cred-header{font-size:.72rem;margin-bottom:8px;gap:6px}
  .cred-row{font-size:.78rem;padding:4px 0}
  .cred-row .cred-label{min-width:42px;font-size:.75rem}
  .cred-row .cred-value{font-size:.75rem;padding:3px 8px}
  .cred-row .cred-value .copy-hint{display:none}
  .card-actions{flex-direction:column;gap:8px;padding:0 16px 18px}
  .card-actions .action-btn{padding:12px 14px;font-size:.8rem;border-radius:var(--radius-sm)}
  .toast{top:auto;bottom:20px;right:12px;left:12px;font-size:.8rem;padding:12px 16px;border-radius:var(--radius-sm)}
  .empty-state{padding:60px 20px}
  .empty-state .empty-icon{font-size:3rem}
  .empty-state h3{font-size:1.15rem}
  .empty-state p{font-size:.85rem}
  .site-footer{padding:24px 16px;font-size:.75rem}
  .bg-glow-1{width:300px;height:300px}
  .bg-glow-2{width:250px;height:250px}
  .bg-glow-3{width:200px;height:200px}
  .skeleton-img{height:180px}
  .skeleton-line{margin:12px 16px 0}
}

/* 超小屏幕 (<=360px) - 极端紧凑 */
@media(max-width:360px){
  .hero h1{font-size:1.5rem}
  .hero-desc{font-size:.82rem}
  .cards-grid{padding:0 8px 32px;gap:14px}
  .card-content{padding:14px 12px 4px}
  .card-content h3{font-size:1rem}
  .credentials-section{padding:0 12px 12px}
  .card-actions{padding:0 12px 14px}
}

/* 触摸设备优化 - 取消hover悬浮效果，增大点击区域 */
@media(hover:none) and (pointer:coarse){
  .demo-card:hover{transform:none;box-shadow:none}
  .demo-card:active{transform:scale(.98);transition:transform .1s ease}
  .action-btn.btn-front:hover,.action-btn.btn-admin:hover{transform:none;box-shadow:none}
  .action-btn.btn-front:active,.action-btn.btn-admin:active{transform:scale(.96);opacity:.85}
  .cred-row .cred-value:active{background:rgba(6,182,212,.2);transform:scale(.97)}
  .card-actions .action-btn{min-height:46px}
}