/* 用户个人主页样式 */
.bg-fade { transition: opacity 1s ease-in-out; }
.glass-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.avatar-ring { box-shadow: 0 0 0 4px var(--bg-deep); }
[data-theme="light"] .avatar-ring { box-shadow: 0 0 0 4px white; }
@keyframes shake { 0%,100%{transform:rotate(0)} 10%,30%,50%,70%,90%{transform:rotate(-5deg)} 20%,40%,60%,80%{transform:rotate(5deg)} }
.avatar-shake { animation: shake 0.6s ease-in-out; }
.api-card-stack { will-change: transform, opacity; transition: transform 0.15s ease-out, opacity 0.15s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; }
/* 用户信息卡片：毛玻璃效果 */
.upf-glass {
    background: rgba(12, 12, 18, 0.75);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .upf-glass {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.upf-text { color: var(--text-main); }
.upf-text-muted { color: var(--text-muted); }
.upf-accent { color: var(--accent-primary); }
.upf-border { border-color: var(--border-color); }
/* API卡片 */
.upf-api-card-bg {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
}
.upf-api-card-bg:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 24px rgba(0, 255, 157, 0.06);
}
/* 按钮适配 */
.upf-btn-primary {
    background: var(--accent-primary);
    color: #000;
}
.upf-btn-primary:hover { opacity: 0.85; }
.upf-btn-outline {
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.upf-btn-outline:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
/* 方法标签 */
.tag-get { background: rgba(34,197,94,0.12); color: #22c55e; }
.tag-post { background: rgba(59,130,246,0.12); color: #3b82f6; }
.tag-put { background: rgba(249,115,22,0.12); color: #f97316; }
.tag-delete { background: rgba(239,68,68,0.12); color: #ef4444; }
.tag-patch { background: rgba(168,85,247,0.12); color: #a855f7; }
/* 收费状态标签 */
.tag-free { background: rgba(34,197,94,0.15) !important; color: #22c55e !important; }
.tag-points { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; }
.tag-key { background: rgba(59,130,246,0.15) !important; color: #3b82f6 !important; }
.tag-points-key { background: rgba(168,85,247,0.15) !important; color: #a855f7 !important; }
/* 延迟颜色 */
.latency-good { color: #22c55e; }
.latency-ok { color: #eab308; }
.latency-slow { color: #f97316; }
.latency-bad { color: #ef4444; }
/* 瀑布流布局 */
#apiList {
    column-count: 1;
    column-gap: 1rem;
}
@media (min-width: 640px) {
    #apiList { column-count: 2; }
}
@media (min-width: 1024px) {
    #apiList { column-count: 3; }
}
#apiList .api-card-stack {
    break-inside: avoid;
    margin-bottom: 1rem;
}
/* 试剂瓶SVG描边动画 */
.flask-draw-icon {
    opacity: 0.6;
    stroke: var(--accent-primary);
}
.flask-path {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: flask-draw 2.5s ease-in-out infinite;
}
@keyframes flask-draw {
    0% { stroke-dashoffset: 150; opacity: 0.3; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -150; opacity: 0.3; }
}