/* 侧边导航栏 */
.side-navigation {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* 增加z-index */
  background: rgba(15, 23, 42, 0.95); /* 增加不透明度 */
  backdrop-filter: blur(15px);
  border: 2px solid rgba(6, 182, 212, 0.3); /* 增加边框厚度 */
  border-radius: 1rem;
  padding: 1rem 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 1; /* 确保可见 */
  transition: all 0.3s ease;
  min-width: 50px; /* 确保最小宽度 */
}

.side-navigation:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
  border-color: rgba(6, 182, 212, 0.4);
}

.nav-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.8rem; /* 增加点击区域 */
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 40px; /* 确保最小高度 */
  user-select: none; /* 防止文本选择 */
}

.nav-item:hover {
  background: rgba(6, 182, 212, 0.2); /* 增加悬停背景色 */
  transform: translateX(-5px);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(168, 85, 247, 0.2));
  border-left: 4px solid var(--neon); /* 增加边框厚度 */
  transform: translateX(-3px);
}

.nav-dot {
  width: 10px; /* 增大圆点 */
  height: 10px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.8); /* 增加不透明度 */
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0; /* 防止收缩 */
}

.nav-item:hover .nav-dot,
.nav-item.active .nav-dot {
  background: var(--neon);
  box-shadow: 0 0 15px var(--neon), 0 0 30px rgba(6, 182, 212, 0.3);
  transform: scale(1.5);
}

.nav-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(6, 182, 212, 0.1) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-item.active .nav-dot::after {
  opacity: 1;
  animation: pulse-ring 2s infinite;
}

.nav-label {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1; /* 始终显示 */
  transform: translateX(0); /* 始终在正确位置 */
  transition: all 0.3s ease;
}

.side-navigation:hover .nav-label {
  opacity: 1;
  transform: translateX(0);
  color: rgba(255, 255, 255, 0.9); /* 悬停时更亮 */
}

.nav-item.active .nav-label {
  color: var(--neon);
  font-weight: 600;
  text-shadow: 0 0 8px var(--neon);
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .side-navigation {
    right: 1rem;
    padding: 0.8rem 0.4rem;
    transform: translateY(-50%) scale(0.9);
  }
  
  .side-navigation:hover {
    transform: translateY(-50%) scale(0.95);
  }
  
  .nav-item {
    gap: 0.6rem;
    padding: 0.4rem;
  }
  
  .nav-dot {
    width: 6px;
    height: 6px;
  }
  
  .nav-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .side-navigation {
    display: none; /* 在小屏幕上隐藏侧边导航 */
  }
}

/* 滚动指示器 */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(6, 182, 212, 0.2);
  z-index: 1001;
}

.scroll-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--electric));
  width: 0%;
  transition: width 0.1s ease;
  box-shadow: 0 0 10px var(--neon);
}

/* 基础样式 */
:root{
  --bg: #0a0e27;
  --panel: #1a1f3a;
  --card: #252a4a;
  --text: #ffffff;
  --muted: #a0a8e0;
  --accent: #00d4ff;
  --line: #3d4675;
  --neon: #00ffff;
  --electric: #ff006f;
  --cosmic: #7c3aed;
  --starlight: #fbbf24;
}

*{
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b69 50%, #1a1a3a 75%, #0f0f23 100%);
  color: var(--text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* 小屏字体基准缩放 */
@media (max-width: 420px) {
  html { font-size: 15px; }
}
@media (max-width: 360px) {
  html { font-size: 14px; }
}

img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .6rem}
a{color:var(--accent);text-decoration:none}

/* 全新的宇宙背景 */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -10;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(120, 200, 255, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #0a0e27 0%, #1e1a52 25%, #2d1b69 50%, #1e1a52 75%, #0a0e27 100%);
  overflow: hidden;
  animation: cosmic-drift 20s ease-in-out infinite alternate;
}

/* 星星层 */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(2px 2px at 20px 30px, var(--starlight), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--neon), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--starlight), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--electric), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--starlight), transparent),
    radial-gradient(1px 1px at 200px 90px, var(--neon), transparent),
    radial-gradient(2px 2px at 240px 50px, var(--starlight), transparent),
    radial-gradient(1px 1px at 280px 120px, var(--cosmic), transparent),
    radial-gradient(2px 2px at 320px 80px, var(--starlight), transparent),
    radial-gradient(1px 1px at 360px 40px, var(--electric), transparent);
  background-repeat: repeat;
  background-size: 400px 400px, 350px 350px, 300px 300px, 450px 450px, 380px 380px,
                   420px 420px, 340px 340px, 390px 390px, 360px 360px, 410px 410px;
  animation: 
    starfield-1 15s linear infinite,
    starfield-2 20s linear infinite reverse,
    starfield-3 25s linear infinite;
  opacity: 0.8;
}

/* 流星效果优化 */
.shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shooting-stars::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--neon) 0%, transparent 70%);
  border-radius: 50%;
  top: 20%;
  left: 110%;
  box-shadow: 
    0 0 10px var(--neon),
    0 0 20px var(--neon),
    0 0 30px var(--neon),
    -30px 15px 20px rgba(0,255,255,0.4),
    -60px 30px 30px rgba(0,255,255,0.2),
    -90px 45px 40px rgba(0,255,255,0.1);
  animation: meteor-1 4s linear infinite;
  will-change: transform;
}

.shooting-stars::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, var(--electric) 0%, transparent 70%);
  border-radius: 50%;
  top: 60%;
  left: 110%;
  box-shadow: 
    0 0 8px var(--electric),
    0 0 16px var(--electric),
    0 0 24px var(--electric),
    -20px 10px 15px rgba(255,0,111,0.4),
    -40px 20px 25px rgba(255,0,111,0.2),
    -60px 30px 35px rgba(255,0,111,0.1);
  animation: meteor-2 5s linear infinite 2s;
  will-change: transform;
}

/* 额外的流星轨道 */
.shooting-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shooting-stars {
  background: 
    radial-gradient(2px 2px at 25% 20%, var(--neon), transparent),
    radial-gradient(2px 2px at 75% 60%, var(--electric), transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1px 1px at 60% 30%, #fff, transparent),
    radial-gradient(2px 2px at 90% 40%, var(--neon), transparent);
  background-size: 300px 300px, 400px 400px, 200px 200px, 350px 350px, 500px 500px;
  animation: 
    meteor-shower1 8s linear infinite,
    meteor-shower2 12s linear infinite 2s,
    meteor-shower3 15s linear infinite 4s;
}

/* 优化的动画关键帧 */
@keyframes cosmic-drift {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(30deg) brightness(1.1);
  }
  100% {
    filter: hue-rotate(0deg) brightness(1);
  }
}

@keyframes starfield-1 {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes starfield-2 {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes starfield-3 {
  0% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 150% 150%;
  }
}

@keyframes meteor-1 {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(-1200px) translateY(600px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes meteor-2 {
  0% {
    transform: translateX(0) translateY(0) rotate(-35deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(-1400px) translateY(700px) rotate(-35deg);
    opacity: 0;
  }
}

/* 头部 */
.hero{
  background:radial-gradient(1200px 500px at 50% -10%,rgba(26,35,80,0.6),transparent),url('assets/cover.jpg') center/cover no-repeat; 
  padding:64px 16px 28px;
  position:relative;
  z-index:1;
  backdrop-filter: blur(5px);
}
.hero-inner{max-width:1000px;margin:0 auto;text-align:center}
.hero h1{
  font-size:32px;
  letter-spacing:.5px;
  text-shadow:0 0 20px var(--neon),0 0 40px var(--neon), 0 0 60px var(--neon);
  color: #ffffff;
  margin-bottom: 10px;
}
.hero p{margin:.25rem 0 1rem;color:var(--muted);font-size: 18px;}
.nav-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top: 30px;}
.nav-buttons button{
  border:2px solid var(--accent);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:12px 18px;
  border-radius:25px;
  cursor:pointer;
  transition:.3s ease;
  backdrop-filter:blur(10px);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nav-buttons button:hover{
  background:rgba(0,212,255,.15);
  border-color:var(--neon);
  box-shadow:0 0 25px rgba(0,255,255,0.4);
  transform:translateY(-3px) scale(1.05);
  color: var(--neon);
}

/* 主体 */
main{max-width:1000px;margin:30px auto;padding:0 20px;position:relative;z-index:1}
.card{
  background:rgba(255,255,255,.08);
  border:2px solid var(--line);
  border-radius:20px;
  padding:25px;
  margin:20px 0;
  backdrop-filter:blur(15px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
  transition:all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.1), transparent);
  transition: left 0.5s ease;
}

.card:hover::before {
  left: 100%;
}

.card:hover{
  border-color:var(--accent);
  box-shadow:0 12px 40px rgba(0,212,255,0.2), 0 0 0 1px rgba(0,212,255,0.3);
  transform:translateY(-8px);
  background:rgba(255,255,255,.12);
}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-right:6px;background:rgba(255,255,255,.04)}
.tag-list{margin:.35rem 0 0}
.project{margin:10px 0 14px}

/* 教育背景样式优化 */
.education-info {
  margin-top: 15px;
}

.school-info {
  font-size: 16px;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.3);
  border-radius: 12px;
  border-left: 4px solid var(--neon);
}

.school-info strong {
  color: var(--neon);
  font-weight: 600;
}

.education-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: education-counter;
}

.education-list li {
  counter-increment: education-counter;
  position: relative;
  padding: 15px 20px 15px 50px;
  margin: 12px 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.education-list li::before {
  content: counter(education-counter);
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--neon), var(--electric));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  color: #000;
}

.education-list li:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,212,255,0.3);
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0,212,255,0.15);
}

/* 奖项时间线样式 */
.awards-timeline {
  position: relative;
  padding: 0;
  margin: 0;
}

.award-year {
  margin-bottom: 35px;
  position: relative;
}

.year-title {
  color: var(--neon);
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 20px 0;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(255,0,111,0.1));
  border-radius: 25px;
  border: 2px solid rgba(0,212,255,0.3);
  text-align: center;
  text-shadow: 0 0 10px rgba(0,212,255,0.4);
  position: relative;
  overflow: hidden;
}

.year-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--electric), var(--starlight));
  animation: shimmer 3s infinite;
}

.awards-group {
  display: grid;
  gap: 15px;
}

.award-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.award-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--neon), var(--electric));
  transition: width 0.3s ease;
}

.award-item:hover {
  transform: translateX(5px);
  border-color: var(--neon);
  box-shadow: 0 8px 25px rgba(0,212,255,0.2);
  background: rgba(255,255,255,0.08);
}

.award-item:hover::before {
  width: 6px;
}

.award-item.highlight {
  border-color: var(--starlight);
  background: rgba(251,191,36,0.05);
}

.award-item.highlight::before {
  background: linear-gradient(180deg, var(--starlight), var(--electric));
}

.award-item.highlight:hover {
  border-color: var(--starlight);
  box-shadow: 0 8px 25px rgba(251,191,36,0.3);
}

.award-icon {
  font-size: 2em;
  min-width: 50px;
  text-align: center;
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(255,0,111,0.2));
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,212,255,0.3);
  transition: all 0.3s ease;
}

.award-item:hover .award-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0,212,255,0.4);
}

.award-content {
  flex: 1;
  min-width: 0;
}

.award-name {
  color: var(--text);
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.award-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.award-level {
  color: var(--electric);
  font-weight: 600;
  font-size: 0.95em;
  background: rgba(255,0,111,0.15);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,0,111,0.3);
}

.award-category {
  color: var(--muted);
  font-size: 0.85em;
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

.award-item .view-btn {
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(124,58,237,0.2));
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 80px;
}

.award-item .view-btn:hover {
  background: linear-gradient(135deg, rgba(0,212,255,0.3), rgba(124,58,237,0.3));
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,212,255,0.3);
  border-color: var(--neon);
}

/* 奖项证书样式 */
.award-certificate {
  margin-top: 0.8rem;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.cert-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  object-fit: cover;
}

.cert-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cert-image {
    max-width: 160px;
  }
  
  .award-certificate {
    padding: 0.5rem;
    margin-top: 0.6rem;
  }
}

@media (max-width: 480px) {
  .cert-image {
    max-width: 140px;
  }
}

/* 原有奖项列表样式保留 */
.awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 基本信息排版优化 */
.basic-info-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 10px 0;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
  flex-shrink: 0;
}

.info-section {
  flex: 1;
  min-width: 400px;
}

/* 增强项目展示样式 */
.project.enhanced {
  background: rgba(255,255,255,.1);
  border: 2px solid var(--line);
  border-radius: 25px;
  padding: 30px;
  margin: 30px 0;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.project.enhanced:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,212,255,0.3);
  border-color: var(--neon);
}

.project.enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--neon), var(--electric), var(--cosmic));
  animation: shimmer 3s infinite;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.project-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.8em;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
  flex: 1;
  min-width: 250px;
}

.project-period {
  background: linear-gradient(135deg, var(--neon), var(--electric));
  color: #000;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.project-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  align-items: start;
}

.project-description {
  flex: 1;
}

.project-summary {
  font-size: 1.1em;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.6;
  font-weight: 500;
}

.project-details {
  margin: 20px 0;
}

.project-details h4 {
  color: var(--neon);
  margin: 20px 0 10px 0;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 20px;
}

.project-details h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--electric);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--electric);
}

.project-details ul {
  margin: 10px 0;
  padding-left: 20px;
  list-style: none;
}

.project-details li {
  margin: 8px 0;
  position: relative;
  color: var(--text);
  line-height: 1.5;
  padding-left: 20px;
}

.project-details li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--neon);
  font-weight: bold;
}

.project-media {
  background: rgba(0,0,0,0.3);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0,212,255,0.2);
}

.media-gallery {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.media-item {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,212,255,0.2);
  transition: all 0.3s ease;
}

.media-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,212,255,0.3);
  border-color: var(--neon);
}

.project-image, .project-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  transition: all 0.3s ease;
}

.video-container {
  background: #000;
}

.project-video {
  height: 180px;
  background: #000;
}

.media-caption {
  padding: 10px 15px;
  margin: 0;
  font-size: 0.9em;
  color: var(--muted);
  text-align: center;
  background: rgba(0,0,0,0.5);
  border-radius: 0 0 15px 15px;
}

.media-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.view-btn, .demo-btn {
  background: linear-gradient(135deg, var(--neon), var(--electric));
  color: #000;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.view-btn:hover, .demo-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,212,255,0.5);
  background: linear-gradient(135deg, var(--electric), var(--cosmic));
}

.view-btn .icon, .demo-btn .icon {
  font-size: 1.1em;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .project-content {
    grid-template-columns: 1fr 350px;
    gap: 25px;
  }
}

@media (max-width: 992px) {
  .project-content {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .project-media {
    margin-top: 20px;
  }
  
  .media-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .project.enhanced {
    padding: 20px;
    margin: 20px 0;
  }
  
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .project-header h3 {
    font-size: 1.5em;
  }
  
  .media-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .view-btn, .demo-btn {
    justify-content: center;
  }
}

/* 动画效果 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 项目图集模态框样式 */
.project-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-gallery-modal.show {
  opacity: 1;
}

.gallery-content {
  background: linear-gradient(135deg, rgba(15, 15, 35, 0.95), rgba(45, 27, 105, 0.95));
  border: 2px solid var(--neon);
  border-radius: 25px;
  padding: 30px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(20px);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.project-gallery-modal.show .gallery-content {
  transform: scale(1);
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line);
}

.gallery-header h3 {
  margin: 0;
  color: var(--neon);
  font-size: 1.8em;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.close-gallery, .close-viewer, .close-demo {
  background: linear-gradient(135deg, var(--electric), var(--cosmic));
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 0, 111, 0.3);
}

.close-gallery:hover, .close-viewer:hover, .close-demo:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(255, 0, 111, 0.5);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.gallery-item:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
  border-color: var(--neon);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-caption {
  padding: 15px;
  color: var(--text);
  font-weight: 500;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

/* 图片查看器样式 */
.image-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-viewer-modal.show {
  opacity: 1;
}

.image-viewer-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}

.image-viewer-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
}

.image-caption {
  margin-top: 20px;
  color: var(--text);
  font-size: 1.2em;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.close-viewer {
  position: absolute;
  top: -20px;
  right: -20px;
}

/* 视频演示模态框样式 */
.video-demo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-demo-modal.show {
  opacity: 1;
}

.video-demo-content {
  background: linear-gradient(135deg, rgba(15, 15, 35, 0.95), rgba(45, 27, 105, 0.95));
  border: 2px solid var(--electric);
  border-radius: 25px;
  padding: 30px;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(255, 0, 111, 0.3);
  backdrop-filter: blur(20px);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-demo-modal.show .video-demo-content {
  transform: scale(1);
}

.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line);
}

.demo-header h3 {
  margin: 0;
  color: var(--electric);
  font-size: 1.8em;
  text-shadow: 0 0 20px rgba(255, 0, 111, 0.5);
}

.demo-video-container {
  margin-bottom: 20px;
}

.demo-video {
  width: 100%;
  max-width: 800px;
  height: auto;
  min-height: 400px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.demo-description {
  text-align: center;
  color: var(--muted);
  font-size: 1.1em;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gallery-content, .video-demo-content {
    padding: 20px;
    margin: 20px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .gallery-header h3, .demo-header h3 {
    font-size: 1.4em;
  }
  
  .demo-video {
    min-height: 250px;
  }
  
  .image-viewer-content img {
    max-height: 70vh;
  }
}

/* 实习经验样式 - 优化紧凑排版 */
.intern-experience {
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0,212,255,0.2);
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
}

.intern-experience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), var(--starlight), var(--electric));
  animation: shimmer 3s infinite;
}

.intern-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0,212,255,0.2);
}

.company-info {
  flex: 1;
  min-width: 250px;
}

.company-name {
  margin: 0 0 5px 0;
  color: var(--neon);
  font-size: 1.5em;
  font-weight: 700;
  text-shadow: 0 0 15px rgba(0,212,255,0.4);
}

.position-period {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.position {
  color: var(--text);
  font-size: 1.1em;
  font-weight: 600;
}

.period {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 500;
  background: rgba(0,212,255,0.1);
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
}

.intern-badge {
  background: linear-gradient(135deg, var(--starlight), var(--electric));
  color: #000;
  padding: 6px 12px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(251,191,36,0.3);
}

.intern-content {
  display: grid;
  gap: 20px;
}

.work-description h4,
.work-achievements h4,
.skills-gained h4 {
  color: var(--electric);
  margin: 0 0 12px 0;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 20px;
}

.work-description h4::before,
.work-achievements h4::before,
.skills-gained h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--electric);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--electric);
}

.responsibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.responsibility-item {
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 15px;
  border: 1px solid rgba(0,212,255,0.2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.responsibility-item:hover {
  transform: translateY(-3px);
  border-color: var(--neon);
  box-shadow: 0 8px 25px rgba(0,212,255,0.15);
}

.responsibility-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--neon), var(--electric));
  transition: width 0.3s ease;
}

.responsibility-item:hover::before {
  width: 5px;
}

.resp-icon {
  font-size: 1.4em;
  min-width: 30px;
  text-align: center;
  margin-top: 2px;
}

.resp-content strong {
  color: var(--neon);
  font-size: 1em;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

.resp-content p {
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  font-size: 0.9em;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.achievement-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,.06);
  padding: 12px;
  border-radius: 10px;
  border-left: 3px solid var(--starlight);
  transition: all 0.3s ease;
}

.achievement-item:hover {
  background: rgba(251,191,36,.08);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(251,191,36,0.15);
}

.achievement-icon {
  font-size: 1.2em;
  min-width: 25px;
  text-align: center;
  margin-top: 1px;
}

.achievement-text {
  flex: 1;
  color: var(--text);
  line-height: 1.5;
  font-size: 0.9em;
}

.achievement-text strong {
  color: var(--starlight);
  font-weight: 600;
}

.skills-gained {
  background: rgba(0,0,0,0.2);
  border-radius: 15px;
  padding: 15px;
  border: 1px solid rgba(0,212,255,0.1);
}

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(255,0,111,0.15));
  color: var(--text);
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.85em;
  font-weight: 500;
  border: 1px solid rgba(0,212,255,0.2);
  transition: all 0.3s ease;
  cursor: default;
}

.skill-tag:hover {
  background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(255,0,111,0.25));
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,212,255,0.15);
  border-color: var(--neon);
}

.contact-verification {
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 15px;
  border: 1px solid rgba(124,58,237,0.3);
  margin-top: 5px;
}

.verification-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verification-icon {
  font-size: 1.4em;
  color: var(--cosmic);
  min-width: 30px;
  text-align: center;
}

.verification-content strong {
  color: var(--cosmic);
  font-size: 1em;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.verification-content p {
  color: var(--text);
  margin: 0;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
  background: rgba(124,58,237,0.1);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* 技术详情样式 */
.technical-details {
  background: rgba(0,0,0,0.25);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(124,58,237,0.3);
  margin-top: 5px;
}

.technical-details h4 {
  color: var(--cosmic);
  margin: 0 0 15px 0;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-left: 20px;
}

.technical-details h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--cosmic);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cosmic);
}

.tech-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 15px;
}

.tech-detail-item {
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(124,58,237,0.3);
  display: flex;
  gap: 15px;
  align-items: flex-start;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tech-detail-item:hover {
  transform: translateY(-3px);
  border-color: var(--cosmic);
  box-shadow: 0 8px 25px rgba(124,58,237,0.2);
}

.tech-detail-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--cosmic), var(--electric));
  transition: width 0.3s ease;
}

.tech-detail-item:hover::before {
  width: 5px;
}

.tech-icon {
  font-size: 1.5em;
  min-width: 35px;
  text-align: center;
  margin-top: 2px;
  color: var(--cosmic);
}

.tech-content strong {
  color: var(--cosmic);
  font-size: 1.1em;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.tech-content p {
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95em;
  font-family: 'Courier New', monospace;
  background: rgba(124,58,237,0.1);
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid var(--cosmic);
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .intern-experience {
    padding: 15px;
  }
  
  .intern-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .position-period {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .responsibility-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .achievements-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .verification-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .intern-content {
    gap: 15px;
  }
  
  .tech-details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .tech-detail-item {
    padding: 15px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .tech-content p {
    font-size: 0.9em;
    padding: 8px;
  }
}

/* 优化信息列表样式 */
.kv {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  align-items: center;
}

.kv li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.06);
  padding: 15px 20px;
  border-radius: 15px;
  border: 1px solid rgba(0,212,255,0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  min-height: 60px;
}

.kv li:hover {
  background: rgba(0,212,255,.08);
  border-color: var(--neon);
  transform: translateX(5px) scale(1.02);
  box-shadow: 0 5px 15px rgba(0,212,255,0.2);
}

.kv li span:first-child {
  font-weight: 600;
  color: var(--neon);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 80px;
  text-align: left;
}

.kv li span:last-child {
  font-weight: 500;
  color: var(--text);
  font-size: 16px;
  text-align: right;
  flex: 1;
  margin-left: 20px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .basic-info-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
  }
  
  .avatar-section {
    margin-bottom: 10px;
  }
  
  .info-section {
    width: 100%;
    min-width: auto;
  }
  
  .kv {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .kv li {
    flex-direction: column;
    text-align: center;
    padding: 12px 15px;
    min-height: auto;
  }
  
  .kv li span:first-child,
  .kv li span:last-child {
    text-align: center;
    margin: 0;
  }
  
  .kv li span:first-child {
    margin-bottom: 5px;
  }
}

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 15px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--neon);
  box-shadow: 0 0 30px rgba(0,255,255,0.4);
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.default-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--electric));
  border: 3px solid var(--neon);
  box-shadow: 0 0 30px rgba(0,255,255,0.4);
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-shadow: none;
}

.default-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px rgba(0,255,255,0.6);
}

.avatar-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px rgba(0,255,255,0.6);
}

.avatar-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--neon), var(--electric), var(--neon));
  background-clip: border-box;
  z-index: 1;
  animation: rotate 3s linear infinite;
}

.avatar-ring::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
}

.avatar-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,255,0.1) 0%, transparent 70%);
  z-index: 0;
  animation: pulse 2s ease-in-out infinite alternate;
}

.avatar-label {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin: 8px 0 0 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 1px;
  position: relative;
}

.avatar-label::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(45deg, var(--neon), var(--electric));
  border-radius: 1px;
  opacity: 0.8;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  from { 
    transform: scale(1);
    opacity: 0.3;
  }
  to { 
    transform: scale(1.1);
    opacity: 0.1;
  }
}

@media (max-width: 768px) {
  .basic-info-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .avatar-section {
    margin-bottom: 20px;
  }
  
  .info-section {
    width: 100%;
  }
}

.awards-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.awards-list li:hover {
  background: rgba(0,255,255,.05);
  border-color: var(--neon);
  transform: translateX(5px);
}

.award-text {
  flex: 1;
  margin-right: 15px;
}

.certs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.cert-item:hover {
  background: rgba(138,43,226,.05);
  border-color: var(--electric);
  transform: translateX(5px);
}

.cert-text {
  flex: 1;
  margin-right: 15px;
}

/* 新版证书展示样式 */
.certificates-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.cert-category {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 18px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.cert-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cosmic), var(--electric), var(--neon));
  animation: shimmer 3s infinite;
}

.cert-category-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px 0;
  color: var(--cosmic);
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cert-icon {
  font-size: 1.5em;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(255,0,111,0.2));
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(124,58,237,0.4);
}

.cert-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cert-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--cosmic), var(--electric));
  transition: width 0.3s ease;
}

.cert-item:hover {
  transform: translateY(-3px);
  border-color: var(--cosmic);
  box-shadow: 0 8px 25px rgba(124,58,237,0.2);
  background: rgba(255,255,255,0.08);
}

.cert-item:hover::before {
  width: 6px;
}

.cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(255,0,111,0.15));
  border-radius: 12px;
  padding: 12px 8px;
  border: 2px solid rgba(124,58,237,0.3);
  position: relative;
}

.cert-level {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--cosmic);
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(124,58,237,0.4);
}

.cert-type {
  font-size: 0.75em;
  color: var(--electric);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cert-content {
  flex: 1;
  min-width: 0;
}

.cert-name {
  color: var(--text);
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.cert-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.cert-subject {
  color: var(--cosmic);
  font-weight: 600;
  font-size: 0.95em;
  background: rgba(124,58,237,0.15);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(124,58,237,0.3);
}

.cert-status {
  color: var(--starlight);
  font-size: 0.85em;
  background: rgba(251,191,36,0.15);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,0.3);
  font-weight: 500;
}

.cert-description {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.4;
  font-style: italic;
}

.cert-view-btn {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(255,0,111,0.2));
  border: 1px solid rgba(124,58,237,0.4);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 120px;
  justify-content: center;
}

.cert-view-btn:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(255,0,111,0.3));
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(124,58,237,0.3);
  border-color: var(--cosmic);
}

.btn-icon {
  font-size: 1.1em;
}

.btn-text {
  font-weight: 500;
}

.cert-summary {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
}

.summary-title {
  color: var(--cosmic);
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.skill-tags .skill-tag {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(255,0,111,0.15));
  color: var(--text);
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 0.85em;
  font-weight: 500;
  border: 1px solid rgba(124,58,237,0.3);
  transition: all 0.3s ease;
}

.skill-tags .skill-tag:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(255,0,111,0.25));
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124,58,237,0.2);
  border-color: var(--cosmic);
}

/* 查看按钮样式 */
.view-btn {
  background: linear-gradient(135deg, var(--neon), var(--electric));
  border: none;
  color: #000;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.view-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,255,255,0.5);
  background: linear-gradient(135deg, #00cccc, #9932cc);
}

.view-btn:active {
  transform: scale(0.95);
}

/* 新版技能展示样式 */
.skills-overview {
  margin-bottom: 25px;
}

.skills-description {
  color: var(--muted);
  font-size: 1em;
  line-height: 1.6;
  text-align: center;
  background: rgba(0,212,255,0.05);
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0,212,255,0.2);
  margin: 0;
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.skill-category {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.skill-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--electric), var(--starlight));
  opacity: 0.7;
}

.skill-category:hover {
  transform: translateY(-3px);
  border-color: var(--neon);
  box-shadow: 0 8px 25px rgba(0,212,255,0.15);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,212,255,0.2);
}

.category-icon {
  font-size: 1.5em;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--neon), var(--electric));
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.category-header h3 {
  color: var(--neon);
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0,212,255,0.3);
}

.skill-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.3s ease;
}

.skill-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--neon);
  transform: translateX(3px);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.skill-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95em;
}

.skill-level {
  color: var(--electric);
  font-size: 0.85em;
  font-weight: 500;
  background: rgba(255,0,111,0.15);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,0,111,0.3);
}

.skill-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--electric), var(--starlight));
  border-radius: 3px;
  position: relative;
  transition: width 1.5s ease-in-out;
  animation: progressGlow 2s ease-in-out infinite alternate;
}

@keyframes progressGlow {
  0% {
    box-shadow: 0 0 5px rgba(0,212,255,0.5);
  }
  100% {
    box-shadow: 0 0 15px rgba(0,212,255,0.8), 0 0 25px rgba(255,0,111,0.4);
  }
}

.skills-highlights {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
}

.skills-highlights h3 {
  color: var(--cosmic);
  margin: 0 0 15px 0;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.highlight-tag {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(255,0,111,0.2));
  color: var(--text);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid rgba(124,58,237,0.4);
  transition: all 0.3s ease;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.highlight-tag:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(255,0,111,0.3));
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 15px rgba(124,58,237,0.3);
  border-color: var(--cosmic);
}

/* 原有技能条样式保留（兼容性） */
.skill-bars{display:grid;gap:10px}
.bar{position:relative;height:10px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bar span{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#5b78ff,#8ac5ff)}
.bar em{position:absolute;left:10px;top:-24px;font-style:normal;color:var(--muted);font-size:12px}

/* 作品集 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tile{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03);cursor:pointer;transition:.2s;padding:8px}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.tile img{border-radius:10px}
.tile .video-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:48px;border:1px dashed var(--line);border-radius:10px;color:var(--muted) }
.tile span{display:block;text-align:center;margin-top:6px;color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:13px}

/* 弹窗 */
.viewer{position:fixed;inset:0;z-index:1000}
.viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px)}
.viewer-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,92vw);max-height:84vh;background:var(--panel);border:2px solid var(--neon);border-radius:16px;overflow:hidden;box-shadow:0 0 50px rgba(0,255,255,0.5)}
.viewer-close{position:absolute;right:8px;top:6px;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer;z-index:10;transition:all 0.3s ease}
.viewer-close:hover{color:var(--neon);text-shadow:0 0 10px var(--neon)}
#viewer-content{padding:12px;display:flex;justify-content:center;align-items:center}
#viewer-content img, #viewer-content video{max-width:100%;max-height:78vh;border-radius:8px;box-shadow:0 0 30px rgba(0,255,255,0.3)}

/* 页脚 */
.footer{text-align:center;padding:20px;color:var(--muted);background:rgba(0,0,0,.5);backdrop-filter:blur(10px);position:relative;z-index:1}
.footer{color:var(--muted);text-align:center;padding:24px 0 40px}

/* 课程成绩样式 */
.courses-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:18px}
.course-item {background:rgba(255,255,255,0.07);border:1px solid rgba(0,212,255,0.25);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden;transition:.3s}
.course-item.highlight {border:1px solid var(--neon);box-shadow:0 0 20px rgba(0,212,255,.25)}
.course-item:hover {transform:translateY(-4px);border-color:var(--neon);box-shadow:0 8px 24px rgba(0,212,255,0.25)}
.course-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.course-name {font-weight:600;color:var(--text);font-size:1em}
.course-score {background:linear-gradient(135deg,var(--neon),var(--electric));color:#000;padding:4px 10px;border-radius:14px;font-size:.8em;font-weight:700;letter-spacing:1px}
.course-points {list-style:none;margin:0;padding:0}
.course-points li {font-size:.8em;color:var(--muted);margin:4px 0 0 0;padding-left:14px;position:relative;line-height:1.4}
.course-points li::before {content:'✔';position:absolute;left:0;top:0;color:var(--neon);font-size:.7em;transform:translateY(2px)}
.course-summary {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:28px;padding:18px 14px;background:rgba(0,0,0,0.25);border:1px solid rgba(0,212,255,0.2);border-radius:18px}
.course-stat {text-align:center;min-width:120px}
.stat-label {display:block;font-size:.7em;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.stat-value {font-size:1.3em;font-weight:700;color:var(--neon);text-shadow:0 0 10px rgba(0,212,255,0.4)}
@media (max-width:680px){
  .courses-grid {grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .course-item {padding:14px 14px}
  .course-name {font-size:.95em}
  .course-score {padding:4px 8px;font-size:.7em}
  .course-points li {font-size:.75em}
  .course-summary {gap:14px;padding:14px 12px}
  .stat-value {font-size:1.15em}
}

/* 成绩单展示 */
.transcript-wrapper {display:flex;gap:28px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
.transcript-media {flex:1 1 260px;max-width:360px;position:relative}
.transcript-image {width:100%;border:2px solid rgba(0,212,255,0.25);border-radius:14px;box-shadow:0 12px 35px rgba(0,212,255,0.15);background:rgba(255,255,255,.05);backdrop-filter:blur(4px);transition:.35s}
.transcript-image:hover {transform:scale(1.03);box-shadow:0 18px 50px rgba(0,212,255,0.25);border-color:var(--neon)}
.transcript-summary {flex:1 1 340px;min-width:300px;background:rgba(255,255,255,0.05);border:1px solid rgba(0,212,255,0.25);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden}
.transcript-summary::before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(0,212,255,0.08),transparent 60%)}
.transcript-summary ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.85em;color:var(--muted)}
.transcript-summary li {position:relative;padding-left:16px;line-height:1.5}
.transcript-summary li::before {content:'★';position:absolute;left:0;top:2px;font-size:.6em;color:var(--neon)}
@media (max-width:780px){
  .transcript-wrapper {flex-direction:column}
  .transcript-media, .transcript-summary {max-width:100%}
}

/* 移动端底部导航 */
.mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: rgba(15,23,42,0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,212,255,0.25);
  display: none;
  z-index: 10000;
  padding: 0 6px;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.4);
}
.mobile-tabbar button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all .25s ease;
  border-radius: 10px;
}
.mobile-tabbar button:hover, .mobile-tabbar button.active {
  color: var(--neon);
  background: rgba(0,212,255,0.12);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.4), 0 4px 14px -2px rgba(0,212,255,0.3) inset;
}
@media (max-width: 768px) {
  .mobile-tabbar { display: flex; }
  body { padding-bottom: 70px; }
}

/* 移动端进一步压缩阴影和间距，提升性能 */
@media (max-width: 600px) {
  .card { padding: 18px; margin: 16px 0; }
  .hero { padding: 52px 12px 24px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .nav-buttons button { padding:10px 14px; font-size:12px; }
  .project.enhanced { padding:22px; }
  .project-header h3 { font-size:1.35em; }
  .project-period { padding:6px 12px; font-size:.75em; }
  .project-summary { font-size:1em; }
  .media-item .project-image, .media-item .project-video { height:160px; }
}

/* 极小屏（窄手机） */
@media (max-width: 360px) {
  .media-item .project-image, .media-item .project-video { height:140px; }
  .project-details h4 { font-size:1.05em; }
  .view-btn, .demo-btn { padding:10px 14px; font-size:0.75rem; }
}

/* 技能部分移动端响应式样式 */
@media (max-width: 768px) {
  .skills-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .skill-category {
    padding: 15px;
  }
  
  .category-icon {
    width: 35px;
    height: 35px;
    font-size: 1.3em;
  }
  
  .category-header h3 {
    font-size: 1.1em;
  }
  
  .skill-items {
    gap: 10px;
  }
  
  .skill-item {
    padding: 10px;
  }
  
  .skills-highlights {
    padding: 15px;
  }
  
  .highlight-tags {
    gap: 8px;
  }
  
  .highlight-tag {
    padding: 6px 12px;
    font-size: 0.85em;
  }
  
  .skills-description {
    padding: 12px 15px;
    font-size: 0.95em;
  }
  
  /* 奖项时间线移动端样式 */
  .award-item {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    gap: 12px;
  }
  
  .award-content {
    order: 1;
  }
  
  .award-item .view-btn {
    order: 2;
    margin-top: 10px;
  }
  
  .award-details {
    justify-content: center;
    gap: 8px;
  }
  
  .year-title {
    font-size: 1.2em;
    padding: 8px 15px;
  }
  
  /* 证书部分移动端样式 */
  .cert-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    padding: 18px;
  }
  
  .cert-badge {
    order: 1;
    min-width: 70px;
    padding: 10px 6px;
  }
  
  .cert-content {
    order: 2;
    text-align: center;
  }
  
  .cert-view-btn {
    order: 3;
    margin-top: 10px;
    padding: 10px 18px;
    min-width: 100px;
  }
  
  .cert-details {
    justify-content: center;
    gap: 8px;
  }
  
  .skill-tags {
    gap: 8px;
  }
  
  .skill-tags .skill-tag {
    padding: 5px 12px;
    font-size: 0.8em;
  }
}

/* 流星动画 */
@keyframes meteor {
  0% {
    transform: translateX(0) translateY(0) rotate(45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) translateY(500px) rotate(45deg);
    opacity: 0;
  }
}

/* 额外的流星动画变体 */
@keyframes meteor-fast {
  0% {
    transform: translateX(0) translateY(0) rotate(35deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(-800px) translateY(400px) rotate(35deg);
    opacity: 0;
  }
}

@keyframes meteor-slow {
  0% {
    transform: translateX(0) translateY(0) rotate(50deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(-1200px) translateY(600px) rotate(50deg);
    opacity: 0;
  }
}

/* --- 追加：项目区手机端深度适配 --- */
@media (max-width: 520px) {
  .project.enhanced { 
    padding: 18px 16px 20px; 
    border: 1px solid rgba(0,212,255,0.25); 
    margin: 18px 0 24px; 
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  }
  .project-header h3 { font-size: 1.25em; line-height:1.3; }
  .project-period { font-size: 0.7em; padding:5px 10px; }
  .project-summary { font-size: 0.95em; margin-bottom: 14px; }
  .project-details { margin: 14px 0 10px; }
  .project-details h4 { font-size: 1.05em; margin:14px 0 6px; padding-left:14px; }
  .project-details h4::before { width:10px; height:10px; }
  .project-details ul { padding-left: 14px; }
  .project-details li { margin:6px 0; padding-left:16px; font-size:0.9em; }
  .project-details li::before { left:0; }
  .tag-list { display:flex; flex-wrap:wrap; gap:6px; }
  .tag { margin:0; font-size:0.65rem; padding:2px 6px; }
  .project-content { display:block; }
  .project-media { padding:14px 12px; margin-top:14px; }
  .media-gallery { 
    display:flex; 
    gap:12px; 
    overflow-x:auto; 
    scrollbar-width:none; 
    -ms-overflow-style:none; 
    scroll-snap-type:x mandatory; 
  }
  .media-gallery::-webkit-scrollbar { display:none; }
  .media-item { 
    min-width:72%; 
    flex:0 0 72%; 
    scroll-snap-align:center; 
    border-radius:14px; 
  }
  .project-image, .project-video { height: 150px; border-radius:14px 14px 0 0; }
  .media-caption { font-size:0.75rem; padding:8px 10px; }
  .view-btn, .demo-btn { padding:10px 14px; font-size:0.7rem; letter-spacing:.5px; }
  .media-controls { flex-direction:row; gap:8px; }
}

@media (max-width: 380px) {
  .media-item { min-width:80%; flex:0 0 80%; }
  .project-image, .project-video { height:140px; }
  .project-header h3 { font-size:1.15em; }
}

/* 图片加载失败视觉兜底 */
img.img-error {
  position: relative;
  background: repeating-linear-gradient(45deg, rgba(255,0,111,0.15) 0 8px, rgba(0,212,255,0.15) 8px 16px);
  border:2px dashed rgba(255,0,111,0.5) !important;
  filter: grayscale(60%) contrast(110%);
}

/* 打印优化：去除背景/动画，提高可读性 */
@media print {
  body, .card { background:#fff !important; color:#000 !important; box-shadow:none !important; }
  .hero, .stars-container, .side-navigation, .mobile-tabbar, .scroll-progress, .viewer, .project-gallery-modal, .video-demo-modal { display:none !important; }
  .card { border:1px solid #ccc !important; }
  a { color:#000 !important; text-decoration:none; }
  img, video { box-shadow:none !important; filter:none !important; }
  .tag, .skill-tag, .highlight-tag { border:1px solid #999 !important; background:#f5f5f5 !important; color:#000 !important; }
  .project.enhanced::before, .award-item::before, .cert-category::before { display:none !important; }
  .project-image, .project-video { height:auto !important; }
}