*{margin:0;padding:0;box-sizing:border-box;}
:root{--primary-color:#6366f1;--secondary-color:#8b5cf6;--accent-color:#ec4899;--success-color:#10b981;--warning-color:#f59e0b;--error-color:#ef4444;--dark-bg:rgba(15,23,42,0.8);--glass-bg:rgba(255,255,255,0.1);--glass-border:rgba(255,255,255,0.2);--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--shadow-lg:0 10px 30px rgba(0,0,0,0.3);--shadow-xl:0 20px 50px rgba(0,0,0,0.5);}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;color:color-mix(in srgb,var(--text-primary) 35%,#334155);min-height:100vh;position:relative;overflow-x:hidden;}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.8));opacity:var(--glass-opacity,1);transition:opacity 0.2s ease;z-index:-1;}
body::after{content:'';display:block;height:300px;}
.container{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh;}
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.95);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.3s ease;}
.loading-spinner{font-size:3rem;color:var(--primary-color);animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}
50%{opacity:0.5;transform:scale(1.1);}
}
.status-badge{position:absolute;top:1rem;right:1rem;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
.status-正常{background:var(--success-color);color:white;}
.status-异常{background:var(--error-color);color:white;}
.status-维护{background:var(--warning-color);color:white;}
.status-下架{background:var(--text-muted);color:white;}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-content{background:var(--dark-bg);border:1px solid var(--glass-border);border-radius:1rem;padding:2rem;max-width:500px;width:90%;box-shadow:var(--shadow-xl);transform:scale(0.9);transition:transform 0.3s ease;}
.modal-overlay.active .modal-content{transform:scale(1);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.modal-header h3{font-size:1.5rem;font-weight:600;}
.modal-close{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;transition:color 0.3s ease;}
.modal-close:hover{color:var(--text-primary);}
.social-media-bar{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:9999px;padding:0.75rem 1.5rem;display:flex;gap:1.5rem;box-shadow:var(--shadow-lg);z-index:100;}
.social-link{color:var(--text-secondary);font-size:1.25rem;transition:all 0.3s ease;text-decoration:none;}
.social-link:hover{color:var(--primary-color);transform:translateY(-2px);}
.bottom-info-card{position:fixed;bottom:-380px;left:50%;transform:translateX(-50%);background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:1rem;padding:1.5rem;width:90%;max-width:400px;box-shadow:var(--shadow-xl);transition:bottom 0.8s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;z-index:99;color:color-mix(in srgb,var(--text-primary) 35%,#334155);opacity:0;pointer-events:none;}
.bottom-info-card.show{bottom:calc(2rem + 40px);opacity:1;pointer-events:auto;}
.bottom-info-card .footer-close-btn{position:absolute !important;top:8px !important;right:10px !important;background:rgba(255,255,255,0.12) !important;border:1px solid rgba(255,255,255,0.25) !important;border-radius:50% !important;width:28px !important;height:28px !important;display:flex !important;align-items:center !important;justify-content:center !important;color:color-mix(in srgb,#94a3b8 60%,#475569) !important;font-size:14px !important;font-weight:bold !important;cursor:pointer !important;transition:all 0.3s ease !important;padding:0 !important;line-height:1 !important;z-index:999 !important;font-family:Arial,sans-serif !important;}
.bottom-info-card .footer-close-btn:hover{background:rgba(239,68,68,0.4) !important;border-color:rgba(239,68,68,0.6) !important;color:#fca5a5 !important;}
.info-card-content h3{font-size:1.25rem;margin-bottom:1rem;color:color-mix(in srgb,var(--text-primary) 35%,#334155);}
.info-card-content p{margin-bottom:0.5rem;color:color-mix(in srgb,var(--text-secondary) 35%,#475569);font-size:0.875rem;}
.info-card-content i{margin-right:0.5rem;color:var(--primary-color);}

/* ====== 技术架构 ====== */
.tech-stack{margin-top:1.25rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,0.08);}
.tech-header{font-size:0.85rem;font-weight:600;color:color-mix(in srgb,var(--text-primary) 35%,#334155);margin-bottom:0.9rem;display:flex;align-items:center;gap:0.45rem;}
.tech-header i{color:#94a3b8;}
.tech-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.65rem;flex-wrap:wrap;}
.tech-label{font-size:0.72rem;color:color-mix(in srgb,var(--text-muted) 35%,#475569);font-weight:600;width:2.5rem;flex-shrink:0;}
.tech-tag{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.7rem;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.18);border-radius:8px;font-size:0.72rem;color:#a5b4fc;font-weight:500;transition:all 0.2s ease;}
.tech-tag:hover{background:rgba(99,102,241,0.18);border-color:rgba(99,102,241,0.35);}
.tech-tag i{font-size:0.75rem;}
.tech-tag.tag-bootstrap{background:rgba(13,110,253,0.12);border-color:rgba(13,110,253,0.22);color:#7cb4ff;}
.tech-tag.tag-fa{background:rgba(33,150,83,0.12);border-color:rgba(33,150,83,0.22);color:#81c784;}
.tech-tag.tag-svg{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2);color:#fbbf24;}
@media (max-width:768px){.container{padding:1rem;}
.social-media-bar{bottom:1rem;padding:0.5rem 1rem;gap:1rem;}
.bottom-info-card{width:95%;padding:1rem;}
.modal-content{padding:1.5rem;}
}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);}
::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--secondary-color);}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes slideInUp{from{transform:translateY(100%);opacity:0;}
to{transform:translateY(0);opacity:1;}
}
@keyframes scaleIn{from{transform:scale(0.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.mb-1{margin-bottom:0.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}
.mt-1{margin-top:0.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-content{background:rgba(15,23,42,.95);border:1px solid rgba(255,255,255,.2);border-radius:1rem;padding:2rem;max-width:400px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,.5);transform:scale(.9);transition:transform .3s ease;}
.modal-overlay.active .modal-content{transform:scale(1);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.modal-header h3{font-size:1.5rem;font-weight:600;}
.modal-close{background:none;border:none;color:#cbd5e1;font-size:1.5rem;cursor:pointer;transition:color .3s ease;}
.modal-close:hover{color:#f8fafc;}
.modal-body p{line-height:1.6;color:#cbd5e1;}
.simple-text{display:inline-block;padding:0.25rem 0.75rem;background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:0.5rem;color:var(--text-secondary);font-size:0.75rem;text-decoration:none;transition:all 0.3s ease;letter-spacing:0.05em;transform:translateY(-2px);}
.simple-text:hover{color:var(--primary-color);border-color:var(--primary-color);background:rgba(255,255,255,0.15);}