:root{--bg-gradient:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%);--glass-bg:rgba(255,255,255,0.05);--glass-border:rgba(255,255,255,0.1);--glass-highlight:rgba(255,255,255,0.2);--glass-shadow:0 8px 32px 0 rgba(0,0,0,0.37);--backdrop-blur:blur(12px);--text-main:#ffffff;--text-muted:#94a3b8;--tool-accent:#6366f1;--tool-glow:rgba(99,102,241,0.4);--tag-bg-tool:rgba(99,102,241,0.2);--tag-text-tool:#818cf8;--movie-accent:#6366f1;--movie-glow:rgba(217,70,239,0.4);--tag-bg-movie:rgba(217,70,239,0.2);--tag-text-movie:#f0abfc;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-main);min-height:100vh;line-height:1.6;overflow-x:hidden;}body::before,body::after{content:'';position:fixed;border-radius:50%;z-index:-1;opacity:0.3;filter:blur(100px);animation:float 15s infinite ease-in-out;}body::before{width:400px;height:400px;background:var(--tool-accent);top:-100px;left:-100px;}body::after{width:500px;height:500px;background:var(--movie-accent);bottom:-100px;right:-100px;animation-delay:5s;}@keyframes float{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,50px);}}.container{max-width:1200px;margin:0 auto;padding:40px 20px;position:relative;z-index:1;}header{text-align:center;padding:60px 20px;margin-bottom:50px;background:var(--glass-bg);backdrop-filter:var(--backdrop-blur);border-radius:24px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);}header h1{font-size:3.5em;font-weight:800;margin-bottom:15px;background:linear-gradient(to right,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(99,102,241,0.5);}header p{color:var(--text-muted);font-size:1.2em;}.section-title{font-size:1.8em;color:#fff;margin:60px 0 30px;display:flex;align-items:center;gap:15px;text-shadow:0 2px 10px rgba(0,0,0,0.5);}.section-title i{color:var(--tool-accent);filter:drop-shadow(0 0 10px var(--tool-accent));}.movie-section .section-title i{color:var(--movie-accent);filter:drop-shadow(0 0 10px var(--movie-accent));}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;}.project-card{background:var(--glass-bg);backdrop-filter:var(--backdrop-blur);border:1px solid var(--glass-border);border-top:1px solid var(--glass-highlight);border-radius:20px;padding:30px;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);display:flex;flex-direction:column;height:100%;box-shadow:var(--glass-shadow);}.project-card:hover{transform:translateY(-10px);background:rgba(255,255,255,0.1);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 20px var(--tool-glow);border-color:rgba(99,102,241,0.4);}.project-icon{font-size:2.5em;margin-bottom:20px;background:linear-gradient(135deg,#fff,var(--tool-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}.project-card h3{font-size:1.5em;margin-bottom:12px;color:#fff;}.project-description{color:var(--text-muted);margin-bottom:20px;flex-grow:1;font-size:0.95em;line-height:1.7;}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px;}.tag{background:var(--tag-bg-tool);color:var(--tag-text-tool);padding:5px 12px;border-radius:12px;font-size:0.75em;font-weight:600;border:1px solid rgba(99,102,241,0.3);}.project-card:hover .tag{background:var(--tool-accent);color:#fff;box-shadow:0 0 10px var(--tool-glow);}.project-link{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;padding:12px 20px;background:rgba(255,255,255,0.1);border-radius:12px;transition:all 0.3s;margin-top:auto;text-decoration:none;}.project-link:hover{background:var(--tool-accent);box-shadow:0 0 20px var(--tool-glow);gap:15px;}.movie-banner-card{width:100%;background:linear-gradient(135deg,rgba(30,27,75,0.6),rgba(49,46,129,0.6));backdrop-filter:blur(20px);border:1px solid rgba(217,70,239,0.3);border-radius:24px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(217,70,239,0.15);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:30px;}.movie-banner-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(217,70,239,0.1) 0%,transparent 60%);animation:rotate 20s linear infinite;z-index:0;pointer-events:none;}@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.movie-content-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;gap:30px;width:100%;}.movie-info{width:100%;display:flex;flex-direction:column;gap:20px;}.movie-icon{font-size:3em;background:linear-gradient(135deg,#fff,var(--movie-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px var(--movie-accent));}.movie-title{font-size:2.5em;font-weight:800;color:#fff;line-height:1.2;}.movie-desc{color:#cbd5e1;font-size:1.05em;line-height:1.8;background:rgba(0,0,0,0.2);padding:20px;border-radius:12px;border-left:4px solid var(--movie-accent);}.movie-desc p{margin-bottom:10px;}.movie-desc p:last-child{margin-bottom:0;}.movie-tags{display:flex;gap:10px;flex-wrap:wrap;}.tag-movie{background:var(--tag-bg-movie);color:var(--tag-text-movie);padding:8px 16px;border-radius:20px;font-weight:600;border:1px solid rgba(217,70,239,0.4);box-shadow:0 0 10px rgba(217,70,239,0.2);}.movie-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 35px;background:linear-gradient(90deg,var(--movie-accent),var(--movie-accent));color:#fff;font-size:1.1em;font-weight:700;border-radius:50px;text-decoration:none;transition:all 0.3s;box-shadow:0 10px 30px rgba(217,70,239,0.4);border:1px solid rgba(255,255,255,0.2);width:fit-content;}.movie-btn:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 20px 40px rgba(217,70,239,0.6);filter:brightness(1.1);background:linear-gradient(90deg,#e879f9,#d946ef);}.movie-screenshots-area{background:rgba(0,0,0,0.2);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,0.1);width:100%;}.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;width:100%;}.movie-header{display:flex;align-items:center;gap:15px;}.screenshot-item{cursor:pointer;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);transition:all 0.3s;background:#000;position:relative;aspect-ratio:16/9;}.screenshot-item:hover{border-color:var(--movie-accent);transform:scale(1.05);box-shadow:0 5px 15px rgba(217,70,239,0.3);z-index:2;}.screenshot-item img{width:100%;height:100%;object-fit:cover;display:block;}.screenshot-caption{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.8);color:#fff;font-size:0.8em;padding:5px;text-align:center;opacity:0;transition:opacity 0.3s;}.screenshot-item:hover .screenshot-caption{opacity:1;}footer{text-align:center;padding:60px 20px;margin-top:80px;color:var(--text-muted);border-top:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.2);backdrop-filter:blur(10px);}.lightbox{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.95);backdrop-filter:blur(10px);}.lightbox-content{position:relative;margin:auto;width:85%;max-width:900px;top:50%;transform:translateY(-50%);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.2);box-shadow:0 0 50px rgba(217,70,239,0.3);background:#000;}.lightbox-content img{width:100%;height:auto;display:block;}.close-btn{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer;z-index:3001;text-shadow:0 0 10px #000;transition:0.3s;background:rgba(0,0,0,0.5);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;}.close-btn:hover{color:var(--movie-accent);transform:rotate(90deg);background:rgba(217,70,239,0.5);}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:0.3s;backdrop-filter:blur(5px);}.nav-btn:hover{background:var(--movie-accent);border-color:var(--movie-accent);box-shadow:0 0 20px var(--movie-glow);}.prev-btn{left:30px;}.next-btn{right:30px;}@media (max-width:768px){.projects-grid{grid-template-columns:1fr;}.nav-btn{width:40px;height:40px;top:auto;bottom:20px;transform:none;}.prev-btn{left:20px;}.next-btn{right:20px;}}/* ========== 顶部导航栏样式 ========== */
    marquee {
        display: block;
        width: 100%;
        font-family: 'Segoe UI', Roboto, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #f0f0f0;
        background: rgba(255, 255, 255, 0.08);
        padding: 12px 0;
        border-radius: 60px;
        border: 1px solid rgba(255,215,0,0.3);
        margin-bottom: 20px;
        box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
    }
    body.theme-light marquee {
        color: #2d3748;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255,215,0,0.6);
        box-shadow: inset 0 1px 4px rgba(0,0,0,0.05);
    }

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-left {
  flex: 0 0 auto;
  margin-right: 20px;
}

.site-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffd966;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 1px;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 30px;
  transition: all 0.2s ease;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: #ffd966;
  border-color: rgba(255, 215, 0, 0.3);
}

.nav-link.active {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd966;
  border-color: rgba(255, 215, 0, 0.5);
}

.nav-right {
  flex: 0 0 auto;
  width: 60px; /* 与左侧平衡 */
}

/* 明亮主题下的导航栏样式 */
body.theme-light .top-nav {
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.theme-light .site-name {
  color: #b45309;
}

body.theme-light .nav-link {
  color: #1e1b4b;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body.theme-light .nav-link:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #b45309;
}

body.theme-light .nav-link.active {
  background: rgba(180, 83, 9, 0.15);
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.3);
}

/* 移动端适配 */
@media screen and (max-width: 1024px) {
  .nav-container {
    flex-direction: column;
    padding: 8px 15px;
  }
  
  .nav-left {
    margin-right: 0;
    margin-bottom: 8px;
  }
  
  .nav-center {
    width: 100%;
    justify-content: center;
  }
  
  .nav-right {
    display: none;
  }
  
  .nav-link {
    font-size: 0.9rem;
    padding: 4px 8px;
  }
}

@media screen and (max-width: 767px) {
  .nav-center {
    gap: 5px;
  }
  
  .nav-link {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
  
  .site-name {
    font-size: 1.2rem;
  }
}

/* 调整body上边距，避免被固定导航栏遮挡 */
body {
  padding-top: 70px;
}

@media screen and (max-width: 1024px) {
  body {
    padding-top: 100px;
  }
}

@media screen and (max-width: 767px) {
  body {
    padding-top: 120px;
  }
}

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
            margin-top: 30px;
        }
        .faq-card {
            background: rgba(30, 30, 50, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 24px;
            transition: all 0.2s ease;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        .faq-card:hover {
            transform: translateY(-5px);
            border-color: #6366f1;
            box-shadow: 0 12px 28px rgba(99, 102, 241, 0.2);
        }
        .faq-card h3 {
            color: #fff;
            font-size: 1.25rem;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.15);
            padding-bottom: 8px;
        }
        .faq-card h3 i {
            color: #6366f1;
            font-size: 1.2rem;
        }
        .faq-card p {
            color: #cbd5e1;
            line-height: 1.7;
            margin: 0;
            font-size: 0.95rem;
        }
        .faq-card .faq-tag {
            display: inline-block;
            background: rgba(99, 102, 241, 0.15);
            border-radius: 30px;
            padding: 4px 12px;
            font-size: 0.8rem;
            color: #a5b4fc;
            margin-top: 15px;
            border: 1px solid rgba(99,102,241,0.3);
        }
        /* 针对宽屏调整 */
        @media (max-width: 640px) {
            .faq-grid {
                grid-template-columns: 1fr;
            }
        }