/* 现代化样式升级 */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #00d4aa 0%, #00a8cc 100%);
    --accent-gradient: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.65);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
    --shadow-hover: 0 16px 32px rgba(31, 38, 135, 0.30);
    --border-radius-sm: 12px;
    --border-radius-md: 20px;
    --border-radius-lg: 28px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Footer themed colors */
    --footer-bg: #1a1f35;
    --footer-text: rgba(255, 255, 255, 0.85);
    --footer-link: #667eea;
    
    /* Table & divider themed colors */
    --table-head-bg: rgba(102, 126, 234, 0.15);
    --table-head-border: rgba(102, 126, 234, 0.3);
    --divider-color: rgba(255, 255, 255, 0.08);
    
    /* Glassmorphism scales */
    --glass-bg-weak: rgba(255, 255, 255, 0.04);
    --glass-bg-medium: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.15);
    --glass-border-weak: rgba(255, 255, 255, 0.10);
    --glass-border-medium: rgba(255, 255, 255, 0.15);
    --glass-border-strong: rgba(255, 255, 255, 0.25);
}

html {
    scroll-behavior: smooth;
}

@font-face{
    font-family: 'NotoSansSC';
    src: url('static/fonts/NotoSansSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'NotoSansSC';
    src: url('static/fonts/NotoSansSC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'InterVar';
    src: url('static/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'NotoSansSC','InterVar','PingFang SC','Microsoft YaHei',Arial,sans-serif;
    background: #0a0e1a;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* 现代化背景 */
.modern-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; }
.bg-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg,#0a0e1a 0%,#1a1f35 25%,#2d1b69 50%,#1a1f35 75%,#0a0e1a 100%); background-size: 200% 200%; animation: gradientShift 20s ease infinite; }
@keyframes gradientShift { 0%{background-position:0% 50%} 25%{background-position:100% 50%} 50%{background-position:100% 100%} 75%{background-position:0% 100%} 100%{background-position:0% 50%} }
.bg-gradient-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 30% 20%, rgba(102,126,234,.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(118,75,162,.1) 0%, transparent 50%); animation: overlayShift 15s ease infinite; }
@keyframes overlayShift { 0%,100%{opacity:.3} 50%{opacity:.6} }
.floating-elements { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.floating-circle { position:absolute; border-radius:50%; background: rgba(102,126,234,.1); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.1); }
.circle-1{width:80px;height:80px;top:20%;left:10%;animation:float1 6s ease-in-out infinite}
.circle-2{width:120px;height:120px;top:60%;left:80%;animation:float2 8s ease-in-out infinite}
.circle-3{width:60px;height:60px;top:80%;left:20%;animation:float3 7s ease-in-out infinite}
.circle-4{width:100px;height:100px;top:30%;left:70%;animation:float4 9s ease-in-out infinite}
.circle-5{width:90px;height:90px;top:10%;left:50%;animation:float5 5s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(-180deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-25px) rotate(90deg)}}
@keyframes float4{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-35px) rotate(-90deg)}}
@keyframes float5{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(270deg)}}
.floating-square{position:absolute;background:rgba(118,75,162,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px}
.square-1{width:60px;height:60px;top:40%;left:15%;animation:floatSquare1 6s ease-in-out infinite}
.square-2{width:80px;height:80px;top:70%;left:75%;animation:floatSquare2 8s ease-in-out infinite}
@keyframes floatSquare1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(45deg)}}
@keyframes floatSquare2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-25px) rotate(-45deg)}}
.floating-triangle{position:absolute;width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:50px solid rgba(255,107,107,.1);backdrop-filter:blur(10px)}
.triangle-1{top:25%;left:60%;animation:floatTriangle1 7s ease-in-out infinite}
.triangle-2{top:75%;left:30%;animation:floatTriangle2 9s ease-in-out infinite}
@keyframes floatTriangle1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(120deg)}}
@keyframes floatTriangle2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-25px) rotate(-120deg)}}
.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite}
@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}

/* 后续样式与响应式规则保持与原 live.html 内联样式一致（为简洁已保留核心片段）。 */