/* =====================================================================
   冷咖啡中转 · 设计系统
   深空黑 + 冷咖啡红 + USDT 青，玻璃拟态 / 极光背景 / 微交互
   ===================================================================== */

:root{
  --bg:        #06060a;
  --bg-2:      #0b0b12;
  --panel:     rgba(19,19,26,.66);
  --panel-2:   rgba(26,26,35,.78);
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --ink:       #f2eeea;
  --dim:       #8b8593;
  --dim-2:     #635e6b;
  --acc:       #e0333a;
  --acc-2:     #ff5a4e;
  --acc-glow:  rgba(224,51,58,.5);
  --gold:      #e8b44a;
  --cyan:      #46d5e6;
  --cyan-glow: rgba(70,213,230,.4);
  --ok:        #4ea36a;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 24px 70px -30px rgba(0,0,0,.95);
  --ease:      cubic-bezier(.16,.84,.44,1);
  --font: "Inter","Segoe UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --mono: "JetBrains Mono","Cascadia Mono",Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font:15px/1.65 var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;
}

/* ---------- 极光背景层 ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{
  position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform;
}
.aurora i:nth-child(1){width:60vw;height:60vw;left:-18vw;top:-22vw;
  background:radial-gradient(circle at 40% 40%,rgba(224,51,58,.55),transparent 65%);
  animation:drift1 26s var(--ease) infinite}
.aurora i:nth-child(2){width:52vw;height:52vw;right:-16vw;top:-8vw;
  background:radial-gradient(circle at 55% 45%,rgba(70,213,230,.34),transparent 65%);
  animation:drift2 32s var(--ease) infinite}
.aurora i:nth-child(3){width:70vw;height:46vw;left:14vw;bottom:-26vw;
  background:radial-gradient(circle at 50% 50%,rgba(140,60,220,.28),transparent 68%);
  animation:drift3 38s var(--ease) infinite}
.aurora i:nth-child(4){width:34vw;height:34vw;right:6vw;bottom:-6vw;
  background:radial-gradient(circle at 50% 50%,rgba(232,180,74,.2),transparent 66%);
  animation:drift1 30s var(--ease) infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(7vw,5vh) scale(1.13)}66%{transform:translate(-4vw,8vh) scale(.94)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-8vw,7vh) scale(1.16)}70%{transform:translate(3vw,-3vh) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}
  45%{transform:translate(6vw,-7vh) scale(1.1)}75%{transform:translate(-6vw,3vh) scale(1.02)}}

/* 细网格 + 噪点，让纯色不空 */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:46px 46px,46px 46px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 78%);
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;font-weight:750}
h1{font-size:clamp(2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem)}
h3{font-size:1.03rem;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
p{color:var(--dim)}
code,pre{font-family:var(--mono)}
code{font-size:.86em;color:#e4ddd6;background:rgba(255,255,255,.05);
  padding:.13em .42em;border-radius:5px}
.grad{
  background:linear-gradient(105deg,#fff 8%,var(--acc-2) 42%,var(--cyan) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mono{font-family:var(--mono)}
.muted{color:var(--dim)}
.tiny{font-size:12px}
.center{text-align:center}

/* ---------- 布局 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-sm{max-width:520px;margin:0 auto;padding:0 22px}
section{padding:74px 0}
/* min-width:0 是网格的经典防溢出：子项默认 min-width:auto，内容宽过列宽时
   不会收缩、只会溢出被切。加上它，长价格 / 长模型名 / 长 URL 才会正常换行或缩。 */
.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.between{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ---------- 玻璃卡 ---------- */
/* 注意：这里不能写 overflow:hidden —— 卡片的浮动角标（.tag）有一半在卡片外，
   一旦被裁就会显示成半个字。需要裁剪的场景显式加 .clip。 */
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.card.clip{overflow:hidden}
/* 鼠标跟随的柔光（border-radius:inherit 让柔光依然贴着圆角，不需要 overflow:hidden） */
.card.spot::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.09),transparent 62%);
}
.card.spot:hover::before{opacity:1}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.card.glow:hover{border-color:rgba(224,51,58,.4);
  box-shadow:0 30px 70px -34px var(--acc-glow)}

/* 顶部渐变描边的卡（重点卡） */
.card.hi{border-color:transparent;background:
  linear-gradient(var(--panel-2),var(--panel-2)) padding-box,
  linear-gradient(135deg,var(--acc),rgba(70,213,230,.55),transparent 70%) border-box;
  border:1px solid transparent}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:11px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.045);color:var(--ink);
  font:inherit;font-weight:550;cursor:pointer;white-space:nowrap;
  transition:all .25s var(--ease);position:relative;overflow:hidden;
}
.btn:hover{background:rgba(255,255,255,.1);border-color:var(--line-2);
  transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.p{
  background:linear-gradient(135deg,var(--acc),#b8202a);border-color:transparent;color:#fff;
  box-shadow:0 12px 34px -14px var(--acc-glow);
}
.btn.p:hover{box-shadow:0 18px 44px -12px var(--acc-glow);filter:brightness(1.07)}
.btn.c{
  background:linear-gradient(135deg,#1b8f9c,#2bb3c4);border-color:transparent;color:#04222a;
  font-weight:700;box-shadow:0 12px 34px -14px var(--cyan-glow);
}
.btn.c:hover{filter:brightness(1.08)}
.btn.lg{padding:14px 28px;font-size:15.5px;border-radius:13px}
.btn.sm{padding:6px 13px;font-size:12.5px;border-radius:8px}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}
.btn-icon{padding:6px 10px;font-size:12px}

/* ---------- 表单 ---------- */
input,select,textarea{
  background:rgba(8,8,12,.7);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;font:inherit;width:100%;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
input::placeholder,textarea::placeholder{color:var(--dim-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(224,51,58,.6);background:rgba(10,10,15,.9);
  box-shadow:0 0 0 3px rgba(224,51,58,.13);
}
select{cursor:pointer}
option{background:#14141b}
label{display:block;font-size:12px;color:var(--dim);margin:14px 0 6px;
  letter-spacing:.04em;text-transform:uppercase}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);
  text-transform:none;letter-spacing:0;margin:0}
.check input{width:auto}
textarea{min-height:112px;font-family:var(--mono);font-size:12.5px;line-height:1.7}

/* ---------- 导航 ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,10,.72);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:16.5px;
  letter-spacing:-.01em}
.brand .orb{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 32%,#ff8b7e,var(--acc) 60%,#7d0f16);
  box-shadow:0 0 16px var(--acc-glow),0 0 34px rgba(224,51,58,.3);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.18);opacity:.82}}
.nav .links{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--dim)}
.nav .links a{position:relative;transition:color .2s}
.nav .links a:hover{color:var(--ink)}
.nav .links a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;
  background:linear-gradient(90deg,var(--acc),var(--cyan));transition:right .3s var(--ease)}
.nav .links a:hover:after{right:0}

/* 标签胶囊 */
.tabs{display:flex;gap:7px;flex-wrap:wrap}
.tabs a,.tabs button{
  padding:8px 16px;border:1px solid var(--line);border-radius:99px;color:var(--dim);
  cursor:pointer;font:inherit;font-size:13.5px;background:transparent;
  transition:all .22s var(--ease)
}
.tabs a:hover,.tabs button:hover{color:var(--ink);border-color:var(--line-2)}
.tabs a.on,.tabs button.on{
  color:#fff;border-color:rgba(224,51,58,.55);background:rgba(224,51,58,.13);
  box-shadow:0 0 22px -8px var(--acc-glow)
}

/* 小徽章 */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 10px;
  border-radius:99px;border:1px solid var(--line);color:var(--dim);
  background:rgba(255,255,255,.03);white-space:nowrap}
.pill.ok{color:#7bd39a;border-color:rgba(78,163,106,.35);background:rgba(78,163,106,.1)}
.pill.no{color:#e08b8b;border-color:rgba(224,51,58,.3);background:rgba(224,51,58,.09)}
.pill.warn{color:var(--gold);border-color:rgba(232,180,74,.32);background:rgba(232,180,74,.09)}
.pill.usdt{color:var(--cyan);border-color:rgba(70,213,230,.35);background:rgba(70,213,230,.1)}
.pill.live:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:pulse 1.8s infinite}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);backdrop-filter:blur(14px)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:var(--dim);font-weight:550;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;white-space:nowrap;background:rgba(255,255,255,.02)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(255,255,255,.028)}

/* ---------- 代码块 ---------- */
pre{
  background:linear-gradient(180deg,rgba(8,8,12,.92),rgba(6,6,9,.92));
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;
  overflow:auto;font-size:12.5px;line-height:1.75;color:#ded7d0;
  white-space:pre;position:relative
}
pre .c{color:var(--dim-2)}
pre .k{color:#ff7f74}
pre .s{color:#a6cf7a}
pre .n{color:var(--cyan)}

/* ---------- 区块标题 ---------- */
.sec-head{margin-bottom:34px}
.sec-head h2{margin-bottom:9px}
.sec-head p{font-size:14.5px;max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc-2);font-weight:650;margin-bottom:13px}
.eyebrow:before{content:"";width:16px;height:1px;background:linear-gradient(90deg,var(--acc),transparent)}

/* ---------- 数值卡 ---------- */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;backdrop-filter:blur(14px)}
.stat .k{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.stat .v{font-size:25px;font-weight:750;margin-top:7px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--dim-2);margin-top:3px}

/* ---------- 滚入动画 ---------- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .aurora i{animation:none}
}

/* ---------- 提示条 ---------- */
.toast-wrap{position:fixed;right:20px;bottom:20px;z-index:999;display:flex;
  flex-direction:column;gap:9px;align-items:flex-end}
.toast{background:rgba(20,20,27,.95);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 17px;font-size:13.5px;box-shadow:var(--shadow);
  backdrop-filter:blur(14px);animation:toastIn .34s var(--ease);max-width:340px}
.toast.ok{border-color:rgba(78,163,106,.5)}
.toast.err{border-color:rgba(224,51,58,.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* 表单反馈文字 */
.msg{font-size:13px;min-height:19px;margin-top:11px}
.msg.err{color:#e88b8b}.msg.ok{color:#7bd39a}

/* ---------- 公告条 ---------- */
.notice{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(224,51,58,.14),rgba(70,213,230,.07));padding:9px 0}
.notice .inner{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#f2dcdc}
.notice .dot{width:6px;height:6px;border-radius:50%;background:var(--acc-2);flex:none;
  box-shadow:0 0 10px var(--acc-glow);animation:pulse 2s infinite}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:44px 0;margin-top:20px;
  background:linear-gradient(180deg,transparent,rgba(224,51,58,.035))}
footer .cols{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap}
footer .fh{font-weight:650;color:var(--ink);margin-bottom:11px;font-size:13.5px}
footer a{color:var(--dim);font-size:13.5px;transition:color .2s}
footer a:hover{color:var(--acc-2)}
footer .fcopy{color:var(--dim-2);font-size:12.5px;margin-top:26px;
  border-top:1px solid var(--line);padding-top:20px}

/* ---------- 分隔 / 加载 ---------- */
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--acc-2);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none!important}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(224,51,58,.4)}

/* ---------- 对话框 ---------- */
dialog{background:rgba(16,16,22,.97);color:var(--ink);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:26px;max-width:470px;width:92%;
  backdrop-filter:blur(22px);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}

/* ---------- 移动端 ---------- */
@media(max-width:720px){
  .nav .links{display:none}
  section{padding:52px 0}
  .card{padding:18px}
  footer .cols{gap:26px}
}