/* =================  0.  零冲突保证  ================= */
/* 所有变量名前加 ae- 前缀，绝不污染原主题 */
:root{
  --ae-glow:rgba(99,102,241,.35);
  --ae-glass:rgba(255,255,255,.03);
  --ae-border:rgba(255,255,255,.07);
  --ae-radius:clamp(12px,1.2vw,20px);
  --ae-shadow:0 clamp(10px,2vw,30px) clamp(30px,4vw,60px) rgba(0,0,0,.4);
  --ae-trans:cubic-bezier(.4,0,.2,1);
}

/* =================  1.  主容器完美自适应  ================= */
.container:where(.api-grid){
  --grid-min:minmax(clamp(280px,32vw,360px),1fr);
  display:grid;
  grid-template-columns:repeat(auto-fit,var(--grid-min));
  gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1rem,3vw,3rem);
  container-type:inline-size; /* CSS Container Query */
}

/* =================  2.  卡片外围动效（不动内部） ================= */
.api-card{
  position:relative;
  border-radius:var(--ae-radius);
  overflow:hidden; /* 隐藏涟漪溢出 */
  transition:transform .6s var(--ae-trans),box-shadow .6s var(--ae-trans);
}
.api-card::before{ /* 悬停涟漪 */
  content:"";
  position:absolute;
  inset:-100%;
  background:radial-gradient(circle at var(--x) var(--y),var(--ae-glow) 0%,transparent 40%);
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
}
.api-card:hover{transform:translateY(-6px) scale(1.015);}
.api-card:hover::before{opacity:.6;}

/* =================  3.  顶部通栏自适应 ================= */
.topbar{
  height:clamp(52px,6vw,64px);
  padding-inline:clamp(.75rem,3vw,2rem);
}
.topbar-center{font-size:clamp(1rem,2.5vw,1.25rem);}

/* =================  4.  底部信息卡自适应 ================= */
.bottom-info-card{
  width:clamp(320px,90%,420px);
  padding:clamp(1rem,3vw,2rem);
  border-radius:var(--ae-radius);
}

/* =================  5.  加载动画自适应 ================= */
.loading-spinner{
  width:clamp(40px,10vw,60px);
  height:clamp(40px,10vw,60px);
  border-width:clamp(3px,.8vw,5px);
}

/* =================  6.  侧滑抽屉自适应 ================= */
.side-drawer{width:clamp(260px,80vw,320px);}
.side-nav-item{padding:clamp(.75rem,3vw,1.2rem);}

/* =================  7.  字体自适应（只动外围） ================= */
body *:not(.api-card *):not(.params-table *):not(.code-box *){ /* 排除卡片内部 */
  font-size:clamp(.875rem,1.4vw,1rem);
}

/* =================  8.  CSS Container Query 细调大屏 ================= */
@container (min-width:900px){
  .container:where(.api-grid){grid-template-columns:repeat(3,1fr);}
}
@container (min-width:1200px){
  .container:where(.api-grid){grid-template-columns:repeat(4,1fr);}
}