@charset "utf-8";

* { margin: 0px; padding: 0px; box-sizing: border-box; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: rgba(255, 255, 255, 0.85); background: rgb(10, 14, 39); min-height: 100vh; position: relative; overflow-x: hidden; }

body::before { content: ""; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: radial-gradient(at center top, rgba(102, 126, 234, 0.3) 0%, transparent 50%), radial-gradient(at center bottom, rgba(118, 75, 162, 0.3) 0%, transparent 50%); z-index: 0; pointer-events: none; animation: 10s ease-in-out 0s infinite normal none running backgroundPulse; }

@keyframes backgroundPulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

body::after { content: ""; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-image: linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px); background-size: 50px 50px; z-index: 0; pointer-events: none; animation: 20s linear 0s infinite normal none running gridMove; }

@keyframes gridMove { 
  0% { transform: translate(0px, 0px); }
  100% { transform: translate(50px, 50px); }
}

.particles { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.particle { position: absolute; width: 4px; height: 4px; background: rgba(102, 126, 234, 0.15); border-radius: 50%; animation: 15s ease-in-out 0s infinite normal none running float; }

@keyframes float { 
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

.container { max-width: 1400px; margin: 0px auto; padding: 0px 20px; position: relative; z-index: 1; }

.header { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2.5rem 0px; margin-bottom: 3rem; position: relative; z-index: 10; overflow: hidden; }

.header::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent); animation: 3s ease 0s infinite normal none running headerShine; }

@keyframes headerShine { 
  0% { left: -100%; }
  100% { left: 200%; }
}

.header h1 { color: rgb(255, 255, 255); font-size: 3rem; margin-bottom: 0.5rem; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px, rgba(102, 126, 234, 0.5) 0px 0px 40px, rgba(0, 0, 0, 0.5) 0px 2px 4px; animation: 2s ease-in-out 0s infinite normal none running titleGlow; letter-spacing: 2px; font-weight: 700; }

@keyframes titleGlow { 
  0%, 100% { text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px, rgba(102, 126, 234, 0.5) 0px 0px 40px, rgba(0, 0, 0, 0.5) 0px 2px 4px; }
  50% { text-shadow: rgb(102, 126, 234) 0px 0px 30px, rgba(102, 126, 234, 0.7) 0px 0px 60px, rgba(0, 0, 0, 0.5) 0px 2px 4px; }
}

.header .subtitle { color: rgba(255, 255, 255, 0.9); font-size: 1.3rem; font-weight: 500; letter-spacing: 1px; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 10px; }

.header-content { display: flex; justify-content: space-between; align-items: center; }

.header-left { flex: 1 1 0%; }

.header-right { display: flex; align-items: center; }

.user-section { display: flex; align-items: center; }

.login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); backdrop-filter: blur(15px) saturate(180%); border: 2px solid rgba(102, 126, 234, 0.6); border-radius: 18px; color: white; text-decoration: none; font-weight: 600; font-size: 16px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; animation: 3s ease-in-out 0s infinite normal none running loginBtnGlow; }

@keyframes loginBtnGlow { 
  0%, 100% { border-color: rgba(102, 126, 234, 0.6); }
  50% { border-color: rgba(118, 75, 162, 0.8); }
}

.login-btn::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transition: left 0.6s; }

.login-btn:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(102, 126, 234, 0.9); background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%); }

.login-btn:hover::before { left: 100%; }

.user-info { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); backdrop-filter: blur(15px) saturate(180%); border: 2px solid rgba(102, 126, 234, 0.6); border-radius: 18px; animation: 3s ease-in-out 0s infinite normal none running userInfoGlow; }

@keyframes userInfoGlow { 
  0%, 100% { border-color: rgba(102, 126, 234, 0.6); }
  50% { border-color: rgba(118, 75, 162, 0.8); }
}

.user-phone { color: white; font-weight: 600; font-size: 15px; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px; letter-spacing: 0.5px; }

.logout-btn { padding: 6px 14px; background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%); backdrop-filter: blur(10px); border: 1.5px solid rgba(231, 76, 60, 0.5); border-radius: 10px; color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.3s; }

.logout-btn:hover { background: linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(192, 57, 43, 0.3) 100%); border-color: rgba(231, 76, 60, 0.8); color: white; transform: translateY(-2px); }

.modal-overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.3s; }

.modal-overlay.show { opacity: 1; }

.modal-box { background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(10, 14, 39, 0.98) 100%); backdrop-filter: blur(20px) saturate(180%); border: 2px solid rgba(102, 126, 234, 0.6); border-radius: 24px; padding: 40px; min-width: 400px; max-width: 500px; animation: 3s ease-in-out 0s infinite normal none running modalPulse; transform: scale(0.9); transition: transform 0.3s; }

.modal-overlay.show .modal-box { transform: scale(1); }

@keyframes modalPulse { 
  0%, 100% { border-color: rgba(102, 126, 234, 0.6); }
  50% { border-color: rgba(118, 75, 162, 0.8); }
}

.modal-icon { font-size: 64px; text-align: center; margin-bottom: 20px; filter: drop-shadow(rgba(255, 193, 7, 0.8) 0px 0px 20px); }

.modal-message { color: white; font-size: 18px; font-weight: 500; text-align: center; margin-bottom: 30px; line-height: 1.6; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px; }

.modal-buttons { display: flex; gap: 16px; justify-content: center; }

.modal-btn { padding: 12px 32px; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; border: 2px solid; backdrop-filter: blur(10px); position: relative; overflow: hidden; }

.modal-btn::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transition: left 0.5s; }

.modal-btn:hover::before { left: 100%; }

.modal-btn-cancel { background: linear-gradient(135deg, rgba(108, 117, 125, 0.15) 0%, rgba(73, 80, 87, 0.15) 100%); border-color: rgba(108, 117, 125, 0.6); color: rgba(255, 255, 255, 0.9); }

.modal-btn-cancel:hover { background: linear-gradient(135deg, rgba(108, 117, 125, 0.25) 0%, rgba(73, 80, 87, 0.25) 100%); border-color: rgba(108, 117, 125, 0.8); color: white; transform: translateY(-2px); }

.modal-btn-confirm { background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%); border-color: rgba(231, 76, 60, 0.6); color: rgba(255, 255, 255, 0.9); }

.modal-btn-confirm:hover { background: linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(192, 57, 43, 0.3) 100%); border-color: rgba(231, 76, 60, 0.8); color: white; transform: translateY(-2px); }

.toast-message { position: fixed; top: 20px; right: 20px; padding: 16px 28px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%); backdrop-filter: blur(15px); border: 2px solid rgba(102, 126, 234, 0.6); border-radius: 16px; color: white; font-size: 15px; font-weight: 600; z-index: 10001; transform: translateX(400px); transition: transform 0.3s; }

.toast-message.show { transform: translateX(0px); }

.intro-section { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; }

.philosophy-banner { background: rgba(10, 14, 39, 0.15); backdrop-filter: blur(10px); border: 2px solid rgba(102, 126, 234, 0.5); padding: 3rem 2.5rem; border-radius: 25px; color: white; position: relative; overflow: hidden; animation: 3s ease-in-out 0s infinite normal none running borderGlow; }

@keyframes borderGlow { 
  0%, 100% { border-color: rgba(102, 126, 234, 0.5); }
  50% { border-color: rgba(118, 75, 162, 0.8); }
}

.philosophy-banner::before { content: ""; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%); border-radius: 50%; z-index: 0; animation: 6s ease-in-out 0s infinite normal none running floatOrb; }

@keyframes floatOrb { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-30px, -30px) scale(1.1); }
}

.philosophy-banner h2 { color: white; margin-bottom: 1.5rem; font-size: 2rem; text-align: center; position: relative; z-index: 1; }

.philosophy-content { position: relative; z-index: 1; }

.highlight-text { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; line-height: 1.4; background: linear-gradient(90deg, rgb(102, 126, 234), rgb(118, 75, 162), rgb(240, 147, 251), rgb(102, 126, 234)) 0% 0% / 300% 100% text; -webkit-text-fill-color: transparent; animation: 5s ease 0s infinite normal none running gradientShift; letter-spacing: 2px; filter: drop-shadow(rgba(102, 126, 234, 0.5) 0px 0px 20px); }

@keyframes gradientShift { 
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.philosophy-content .description { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; text-align: center; opacity: 0.95; }

.philosophy-content .description strong { color: rgb(255, 215, 0); font-weight: 600; text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px; }

.platform-intro { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2.5rem; border-radius: 20px; }

.platform-intro h2 { color: rgb(255, 255, 255); margin-bottom: 2rem; font-size: 2rem; text-align: center; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }

.feature-item { text-align: center; padding: 1.5rem; border-radius: 15px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.3); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; }

.course-card.interview-card.featured-card { grid-column: 1 / -1; background: radial-gradient(circle at left top, rgba(148, 163, 253, 0.35), transparent 60%), radial-gradient(circle at right bottom, rgba(248, 250, 252, 0.08), transparent 55%), linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.92)); border-radius: 26px; padding: 2.6rem 2.4rem; border: 1px solid rgba(191, 219, 254, 0.4); transform: translateY(-4px) scale(1.01); }

.course-card.interview-card.featured-card .course-icon { font-size: 3.2rem; margin-bottom: 1.2rem; }

.course-card.interview-card.featured-card h2 { font-size: 2rem; background: linear-gradient(90deg, rgb(224, 242, 254), rgb(191, 219, 254), rgb(251, 191, 36)) text; -webkit-text-fill-color: transparent; text-align: left; }

.course-card.interview-card.featured-card > p { text-align: left; color: rgba(226, 232, 240, 0.96); font-size: 1.02rem; }

.course-card.interview-card.featured-card .chapters-list { margin-top: 1.5rem; gap: 0.75rem; }

.course-card.interview-card.featured-card .chapter-link { border-radius: 999px; text-align: center; }

.course-card.interview-card.featured-card .chapter-link:first-child { background: rgba(30, 64, 175, 0.15); border-color: rgba(191, 219, 254, 0.8); }

.course-card.interview-card.featured-card .chapter-link:first-child:hover { background: rgba(59, 130, 246, 0.15); }

.course-card.interview-card.featured-card span.chapter-link { background: rgba(15, 23, 42, 0.15); border-radius: 999px; }

.course-card.interview-card.featured-card:hover { transform: translateY(-18px) scale(1.04); }

.interview-floating-badge { position: fixed; right: 24px; top: 82%; z-index: 50; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.4rem; background: linear-gradient(135deg, rgba(30, 64, 175, 0.96), rgba(129, 140, 248, 0.96)); border-radius: 999px 0px 0px 999px; color: rgb(229, 240, 255); text-decoration: none; transform: translateX(0px); transition: 0.3s; border: 1px solid rgba(219, 234, 254, 0.8); }

.interview-floating-badge:hover { transform: translateY(-4px) scale(1.03); }

.interview-floating-badge-icon { font-size: 1.6rem; }

.interview-floating-badge-text { display: flex; flex-direction: column; font-size: 0.9rem; line-height: 1.35; }

.interview-floating-badge-text strong { font-size: 1rem; color: rgb(254, 249, 195); }

@media (max-width: 768px) {
  .interview-floating-badge { display: none; }
}

.basic-floating-badge { position: fixed; right: 24px; top: 70%; z-index: 50; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.4rem; background: linear-gradient(135deg, rgba(17, 94, 89, 0.96), rgba(45, 212, 191, 0.86)); border-radius: 999px 0px 0px 999px; color: rgba(240, 253, 250, 0.96); text-decoration: none; transform: translateX(0px); transition: 0.3s; border: 1px solid rgba(153, 246, 228, 0.7); }

.basic-floating-badge:hover { transform: translateY(-4px) scale(1.03); }

.basic-floating-badge-icon { font-size: 1.6rem; }

.basic-floating-badge-text { display: flex; flex-direction: column; font-size: 0.9rem; line-height: 1.35; }

.basic-floating-badge-text strong { font-size: 1rem; color: rgba(236, 254, 255, 0.98); }

@media (max-width: 768px) {
  .basic-floating-badge { display: none; }
}

.feature-item::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); opacity: 0; transition: opacity 0.4s; }

.feature-item:hover { transform: translateY(-12px) scale(1.02); border-color: rgba(102, 126, 234, 0.8); }

.feature-item:hover::before { opacity: 1; }

.feature-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }

.feature-item h3 { color: rgb(255, 255, 255); font-size: 1.3rem; margin-bottom: 0.8rem; font-weight: 600; position: relative; z-index: 1; }

.feature-item p { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; line-height: 1.6; position: relative; z-index: 1; }

.learning-paths { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; margin-bottom: 2rem; }

.learning-paths h2 { color: rgb(255, 255, 255); margin-bottom: 1.5rem; text-align: center; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px; }

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

.path-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.3); padding: 1.5rem; border-radius: 15px; text-align: center; transition: 0.4s; position: relative; overflow: hidden; }

.path-card::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0px; height: 0px; border-radius: 50%; background: rgba(102, 126, 234, 0.06); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; }

.path-card:hover::after { width: 300px; height: 300px; }

.path-card:hover { transform: translateY(-8px); border-color: rgba(102, 126, 234, 0.8); }

.path-card h3 { color: rgb(255, 255, 255); margin-bottom: 0.5rem; font-size: 1.3rem; position: relative; z-index: 1; }

.path-card p { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; line-height: 1.5; position: relative; z-index: 1; }

.category-section { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; margin-bottom: 2rem; }

.category-section h2 { color: rgb(255, 255, 255); margin-bottom: 1.5rem; text-align: center; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px; }

.category-filters { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.filter-btn { padding: 0.8rem 1.5rem; border: 2px solid rgba(102, 126, 234, 0.5); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border-radius: 25px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: 0.3s; outline: none; position: relative; overflow: hidden; }

.filter-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0px; height: 0px; border-radius: 50%; background: rgba(102, 126, 234, 0.09); transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; }

.filter-btn:hover::before { width: 300px; height: 300px; }

.filter-btn:hover { border-color: rgba(102, 126, 234, 0.8); transform: translateY(-2px); }

.filter-btn.active { background: rgba(102, 126, 234, 0.09); border-color: rgb(102, 126, 234); color: white; }

.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 2rem; width: 100%; }

.course-card.hidden { display: none; }

.course-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 0.8rem; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 1; transform: scale(1); position: relative; overflow: hidden; min-width: 0px; font-size: 0.9rem; }

.course-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent); transform: rotate(45deg); transition: 0.6s; }

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

.course-card:hover { transform: translateY(-10px) scale(1.02); border-color: rgba(102, 126, 234, 0.5); }

.course-icon { font-size: 2.5rem; text-align: center; margin-bottom: 0.5rem; }

.course-card h2 { text-align: center; margin-bottom: 0.3rem; font-size: 1.3rem; position: relative; z-index: 1; }

.html-card h2 { color: rgb(227, 76, 38); }

.css-card h2 { color: rgb(38, 77, 228); }

.js-card h2 { color: rgb(240, 219, 79); text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px; }

.java-card h2 { color: rgb(248, 152, 32); }

.python-card h2 { color: rgb(55, 118, 171); }

.mysql-card h2 { color: rgb(0, 117, 143); }

.linux-card h2 { color: rgb(252, 198, 36); }

.spring-card h2 { color: rgb(109, 179, 63); }

.springboot-card h2 { color: rgb(109, 179, 63); }

.mybatis-card h2 { color: rgb(211, 47, 47); }

.course-card > p { text-align: center; color: rgba(255, 255, 255, 0.7); margin-bottom: 1.5rem; font-size: 1rem; position: relative; z-index: 1; }

.chapters-list { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: visible; }

.chapter-link { display: block; padding: 0.6rem 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; transition: 0.3s; border-left: 3px solid transparent; position: relative; z-index: 1; backdrop-filter: blur(5px); }

.chapter-link.locked::after { content: "🔒"; margin-left: 8px; font-size: 0.9em; opacity: 0.8; }

.html-card .chapter-link:hover { background: rgba(227, 76, 38, 0.04); border-left-color: rgb(227, 76, 38); transform: translateX(8px); }

.css-card .chapter-link:hover { background: rgba(38, 77, 228, 0.04); border-left-color: rgb(38, 77, 228); transform: translateX(8px); }

.js-card .chapter-link:hover { background: rgba(240, 219, 79, 0.04); border-left-color: rgb(240, 219, 79); transform: translateX(8px); }

.java-card .chapter-link:hover { background: rgba(248, 152, 32, 0.04); border-left-color: rgb(248, 152, 32); transform: translateX(8px); }

.python-card .chapter-link:hover { background: rgba(55, 118, 171, 0.04); border-left-color: rgb(55, 118, 171); transform: translateX(8px); }

.mysql-card .chapter-link:hover { background: rgba(0, 117, 143, 0.04); border-left-color: rgb(0, 117, 143); transform: translateX(8px); }

.linux-card .chapter-link:hover { background: rgba(252, 198, 36, 0.04); border-left-color: rgb(252, 198, 36); transform: translateX(8px); }

.spring-card .chapter-link:hover { background: rgba(52, 211, 153, 0.06); border-left-color: rgb(52, 211, 153); transform: translateX(8px); }

.springboot-card .chapter-link:hover { background: rgba(109, 179, 63, 0.04); border-left-color: rgb(109, 179, 63); transform: translateX(8px); }

.mybatis-card .chapter-link:hover { background: rgba(211, 47, 47, 0.04); border-left-color: rgb(211, 47, 47); transform: translateX(8px); }

.llm-card { background: rgba(102, 126, 234, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(102, 126, 234, 0.5); }

.llm-card:hover { border-color: rgba(102, 126, 234, 0.8); }

.llm-card .course-icon { filter: drop-shadow(rgba(102, 126, 234, 0.6) 0px 0px 10px); }

.llm-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px; }

.llm-card p { color: rgba(255, 255, 255, 0.9); }

.llm-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(102, 126, 234, 0.2); }

.llm-card .chapter-link:hover { background: rgba(102, 126, 234, 0.06); border-left-color: rgb(102, 126, 234); transform: translateX(8px); }

.spring-card { background: rgba(106, 242, 146, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(106, 242, 146, 0.5); }

.spring-card:hover { border-color: rgba(52, 211, 153, 0.8); }

.spring-card .course-icon { filter: drop-shadow(rgba(106, 242, 146, 0.6) 0px 0px 10px); }

.spring-card h2 { color: rgb(106, 242, 146); text-shadow: rgba(106, 242, 146, 0.8) 0px 0px 20px; }

.spring-card p { color: rgba(255, 255, 255, 0.9); }

.spring-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(106, 242, 146, 0.2); }

.spring-card .chapter-link:hover { background: rgba(52, 211, 153, 0.06); border-left-color: rgb(52, 211, 153); transform: translateX(8px); }

.springboot-card { background: rgba(251, 146, 60, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(251, 146, 60, 0.5); }

.springboot-card:hover { border-color: rgba(249, 115, 22, 0.8); }

.springboot-card .course-icon { filter: drop-shadow(rgba(251, 146, 60, 0.6) 0px 0px 10px); }

.springboot-card h2 { color: rgb(107, 255, 107); text-shadow: rgba(251, 146, 60, 0.8) 0px 0px 20px; }

.springboot-card p { color: rgba(255, 255, 255, 0.9); }

.springboot-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(251, 146, 60, 0.2); }

.springboot-card .chapter-link:hover { background: rgba(249, 115, 22, 0.06); border-left-color: rgb(249, 115, 22); transform: translateX(8px); }

.springmvc-card { background: rgba(240, 147, 251, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(240, 147, 251, 0.5); }

.springmvc-card:hover { border-color: rgba(245, 87, 108, 0.8); }

.springmvc-card .course-icon { filter: drop-shadow(rgba(240, 147, 251, 0.6) 0px 0px 10px); }

.springmvc-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(240, 147, 251, 0.8) 0px 0px 20px; }

.springmvc-card p { color: rgba(255, 255, 255, 0.9); }

.springmvc-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(240, 147, 251, 0.2); }

.springmvc-card .chapter-link:hover { background: rgba(245, 87, 108, 0.06); border-left-color: rgb(245, 87, 108); transform: translateX(8px); }

.mybatis-card { background: rgba(59, 130, 246, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(59, 130, 246, 0.5); }

.mybatis-card:hover { border-color: rgba(37, 99, 235, 0.8); }

.mybatis-card .course-icon { filter: drop-shadow(rgba(59, 130, 246, 0.6) 0px 0px 10px); }

.mybatis-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(59, 130, 246, 0.8) 0px 0px 20px; }

.mybatis-card p { color: rgba(255, 255, 255, 0.9); }

.mybatis-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(59, 130, 246, 0.2); }

.mybatis-card .chapter-link:hover { background: rgba(37, 99, 235, 0.06); border-left-color: rgb(37, 99, 235); transform: translateX(8px); }

.langchain-card { background: rgba(168, 85, 247, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(168, 85, 247, 0.5); }

.langchain-card:hover { border-color: rgba(147, 51, 234, 0.8); }

.langchain-card .course-icon { filter: drop-shadow(rgba(168, 85, 247, 0.6) 0px 0px 10px); }

.langchain-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(168, 85, 247, 0.8) 0px 0px 20px; }

.langchain-card p { color: rgba(255, 255, 255, 0.9); }

.langchain-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 85, 247, 0.2); }

.langchain-card .chapter-link:hover { background: rgba(147, 51, 234, 0.06); border-left-color: rgb(147, 51, 234); transform: translateX(8px); }

.spring-ai-card { background: rgba(34, 211, 238, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(34, 211, 238, 0.5); }

.spring-ai-card:hover { border-color: rgba(6, 182, 212, 0.8); }

.spring-ai-card .course-icon { filter: drop-shadow(rgba(34, 211, 238, 0.6) 0px 0px 10px); }

.spring-ai-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(34, 211, 238, 0.8) 0px 0px 20px; }

.spring-ai-card p { color: rgba(255, 255, 255, 0.9); }

.spring-ai-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(34, 211, 238, 0.2); }

.spring-ai-card .chapter-link:hover { background: rgba(6, 182, 212, 0.06); border-left-color: rgb(6, 182, 212); transform: translateX(8px); }

.html-card { background: rgba(255, 107, 107, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(255, 107, 107, 0.5); }

.html-card:hover { border-color: rgba(239, 68, 68, 0.8); }

.html-card .course-icon { filter: drop-shadow(rgba(255, 107, 107, 0.6) 0px 0px 10px); }

.html-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(255, 107, 107, 0.8) 0px 0px 20px; }

.html-card p { color: rgba(255, 255, 255, 0.9); }

.html-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 107, 107, 0.2); }

.html-card .chapter-link:hover { background: rgba(239, 68, 68, 0.06); border-left-color: rgb(239, 68, 68); transform: translateX(8px); }

.css-card { background: rgba(236, 72, 153, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(236, 72, 153, 0.5); }

.css-card:hover { border-color: rgba(219, 39, 119, 0.8); }

.css-card .course-icon { filter: drop-shadow(rgba(236, 72, 153, 0.6) 0px 0px 10px); }

.css-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(236, 72, 153, 0.8) 0px 0px 20px; }

.css-card p { color: rgba(255, 255, 255, 0.9); }

.css-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(236, 72, 153, 0.2); }

.css-card .chapter-link:hover { background: rgba(219, 39, 119, 0.06); border-left-color: rgb(219, 39, 119); transform: translateX(8px); }

.js-card { background: rgba(250, 204, 21, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(250, 204, 21, 0.5); }

.js-card:hover { border-color: rgba(234, 179, 8, 0.8); }

.js-card .course-icon { filter: drop-shadow(rgba(250, 204, 21, 0.6) 0px 0px 10px); }

.js-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(250, 204, 21, 0.8) 0px 0px 20px; }

.js-card p { color: rgba(255, 255, 255, 0.9); }

.js-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(250, 204, 21, 0.2); }

.js-card .chapter-link:hover { background: rgba(234, 179, 8, 0.06); border-left-color: rgb(234, 179, 8); transform: translateX(8px); }

.java-card { background: rgba(220, 38, 38, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(220, 38, 38, 0.5); }

.java-card:hover { border-color: rgba(185, 28, 28, 0.8); }

.java-card .course-icon { filter: drop-shadow(rgba(220, 38, 38, 0.6) 0px 0px 10px); }

.java-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(220, 38, 38, 0.8) 0px 0px 20px; }

.java-card p { color: rgba(255, 255, 255, 0.9); }

.java-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(220, 38, 38, 0.2); }

.java-card .chapter-link:hover { background: rgba(185, 28, 28, 0.06); border-left-color: rgb(185, 28, 28); transform: translateX(8px); }

.python-card { background: rgba(20, 184, 166, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(20, 184, 166, 0.5); }

.python-card:hover { border-color: rgba(13, 148, 136, 0.8); }

.python-card .course-icon { filter: drop-shadow(rgba(20, 184, 166, 0.6) 0px 0px 10px); }

.python-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(20, 184, 166, 0.8) 0px 0px 20px; }

.python-card p { color: rgba(255, 255, 255, 0.9); }

.python-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(20, 184, 166, 0.2); }

.python-card .chapter-link:hover { background: rgba(13, 148, 136, 0.06); border-left-color: rgb(13, 148, 136); transform: translateX(8px); }

.mysql-card { background: rgba(30, 64, 175, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(30, 64, 175, 0.5); }

.mysql-card:hover { border-color: rgba(29, 78, 216, 0.8); }

.mysql-card .course-icon { filter: drop-shadow(rgba(30, 64, 175, 0.6) 0px 0px 10px); }

.mysql-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(30, 64, 175, 0.8) 0px 0px 20px; }

.mysql-card p { color: rgba(255, 255, 255, 0.9); }

.mysql-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(30, 64, 175, 0.2); }

.mysql-card .chapter-link:hover { background: rgba(29, 78, 216, 0.06); border-left-color: rgb(29, 78, 216); transform: translateX(8px); }

.linux-card { background: rgba(34, 197, 94, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(34, 197, 94, 0.5); }

.linux-card:hover { border-color: rgba(22, 163, 74, 0.8); }

.linux-card .course-icon { filter: drop-shadow(rgba(34, 197, 94, 0.6) 0px 0px 10px); }

.linux-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(34, 197, 94, 0.8) 0px 0px 20px; }

.linux-card p { color: rgba(255, 255, 255, 0.9); }

.linux-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(34, 197, 94, 0.2); }

.linux-card .chapter-link:hover { background: rgba(22, 163, 74, 0.06); border-left-color: rgb(22, 163, 74); transform: translateX(8px); }

.wechat-miniapp-card { background: rgba(132, 204, 22, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(132, 204, 22, 0.5); }

.wechat-miniapp-card:hover { border-color: rgba(101, 163, 13, 0.8); }

.wechat-miniapp-card .course-icon { filter: drop-shadow(rgba(132, 204, 22, 0.6) 0px 0px 10px); }

.wechat-miniapp-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(132, 204, 22, 0.8) 0px 0px 20px; }

.wechat-miniapp-card p { color: rgba(255, 255, 255, 0.9); }

.wechat-miniapp-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(132, 204, 22, 0.2); }

.wechat-miniapp-card .chapter-link:hover { background: rgba(101, 163, 13, 0.06); border-left-color: rgb(101, 163, 13); transform: translateX(8px); }

.wechat-mp-card { background: rgba(9, 198, 249, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(9, 198, 249, 0.5); }

.wechat-mp-card:hover { border-color: rgba(4, 93, 233, 0.8); }

.wechat-mp-card .course-icon { filter: drop-shadow(rgba(9, 198, 249, 0.6) 0px 0px 10px); }

.wechat-mp-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(9, 198, 249, 0.8) 0px 0px 20px; }

.wechat-mp-card p { color: rgba(255, 255, 255, 0.9); }

.wechat-mp-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(9, 198, 249, 0.2); }

.wechat-mp-card .chapter-link:hover { background: rgba(4, 93, 233, 0.06); border-left-color: rgb(4, 93, 233); transform: translateX(8px); }

.wechat-miniapp-card { background: rgba(168, 237, 234, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(168, 237, 234, 0.5); }

.wechat-miniapp-card:hover { border-color: rgba(254, 214, 227, 0.8); }

.wechat-miniapp-card .course-icon { filter: drop-shadow(rgba(168, 237, 234, 0.6) 0px 0px 10px); }

.wechat-miniapp-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(168, 237, 234, 0.8) 0px 0px 20px; }

.wechat-miniapp-card p { color: rgba(255, 255, 255, 0.9); }

.wechat-miniapp-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 237, 234, 0.2); }

.wechat-miniapp-card .chapter-link:hover { background: rgba(33, 150, 243, 0.06); border-left-color: rgb(33, 150, 243); transform: translateX(8px); }

.langchain-card { background: rgba(102, 126, 234, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(118, 75, 162, 0.5); }

.langchain-card:hover { border-color: rgba(118, 75, 162, 0.8); }

.langchain-card .course-icon { filter: drop-shadow(rgba(118, 75, 162, 0.6) 0px 0px 10px); }

.langchain-card h2, .langchain-card h3 { color: rgb(255, 255, 255); text-shadow: rgba(118, 75, 162, 0.8) 0px 0px 20px; }

.langchain-card p { color: rgba(255, 255, 255, 0.9); }

.langchain-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(118, 75, 162, 0.2); }

.langchain-card .chapter-link:hover { background: rgba(118, 75, 162, 0.06); border-left-color: rgb(118, 75, 162); transform: translateX(8px); }

.spring-ai-card { background: rgba(240, 147, 251, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(245, 87, 108, 0.5); }

.spring-ai-card:hover { border-color: rgba(245, 87, 108, 0.8); }

.spring-ai-card .course-icon { filter: drop-shadow(rgba(245, 87, 108, 0.6) 0px 0px 10px); }

.spring-ai-card h2, .spring-ai-card h3 { color: rgb(255, 255, 255); text-shadow: rgba(245, 87, 108, 0.8) 0px 0px 20px; }

.spring-ai-card p { color: rgba(255, 255, 255, 0.9); }

.spring-ai-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(245, 87, 108, 0.2); }

.spring-ai-card .chapter-link:hover { background: rgba(245, 87, 108, 0.06); border-left-color: rgb(245, 87, 108); transform: translateX(8px); }

.footer { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem 0px; text-align: center; margin-top: 3rem; position: relative; z-index: 10; }

.footer p { margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }

.footer .copyright-main { font-size: 1rem; margin-bottom: 1rem; }

.footer .copyright-warning { font-size: 0.95rem; color: rgb(255, 215, 0); font-weight: 600; padding: 0.8rem 1.5rem; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 8px; display: inline-block; text-shadow: rgba(255, 215, 0, 0.5) 0px 0px 10px; animation: 2s ease-in-out 0s infinite normal none running warningPulse; }

@keyframes warningPulse { 
  0%, 100% { }
  50% { }
}

@media (max-width: 768px) {
  .courses-grid { grid-template-columns: 1fr; }
  .header h1 { font-size: 2rem; }
  .header .subtitle { font-size: 1rem; }
  .paths-grid { grid-template-columns: 1fr; }
  .category-filters { flex-direction: column; align-items: stretch; }
  .filter-btn { width: 100%; text-align: center; }
  .philosophy-banner { padding: 2rem 1.5rem; }
  .philosophy-banner h2 { font-size: 1.5rem; }
  .highlight-text { font-size: 1.4rem; }
  .philosophy-content .description { font-size: 1rem; }
  .features-grid { grid-template-columns: 1fr; }
  .platform-intro { padding: 1.5rem; }
}

.ai-tools-card { background: rgba(102, 126, 234, 0.1); backdrop-filter: blur(15px); border: 2px solid rgba(102, 126, 234, 0.5); }

.ai-tools-card:hover { border-color: rgba(102, 126, 234, 0.8); }

.ai-tools-card .course-icon { filter: drop-shadow(rgba(102, 126, 234, 0.6) 0px 0px 10px); }

.ai-tools-card h2 { color: rgb(255, 255, 255); text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px; }

.ai-tools-card p { color: rgba(255, 255, 255, 0.9); }

.ai-tools-card .chapter-link { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(102, 126, 234, 0.2); }

.ai-tools-card .chapter-link:hover { background: rgba(102, 126, 234, 0.06); border-left-color: rgb(102, 126, 234); transform: translateX(8px); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0px; }

.card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1.5rem; text-decoration: none; color: rgb(255, 255, 255); transition: 0.3s; cursor: pointer; display: block; }

.card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(102, 126, 234, 0.5); transform: translateY(-5px); }

.card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: rgb(102, 126, 234); }

.card p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin: 0px; }

.contact-float-btn { position: fixed; right: 30px; bottom: 30px; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.contact-float-btn > div:first-child { background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }

.contact-float-btn > div:first-child::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: rotate(45deg); transition: 0.6s; }

.contact-float-btn > div:first-child:hover::before { left: 100%; }

.contact-float-btn > div:first-child:hover { transform: scale(1.1); }

.admin-btn { background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); color: rgb(102, 126, 234); padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: 0.3s; margin-right: 10px; }

.admin-btn:hover { background: rgba(102, 126, 234, 0.06); border-color: rgba(102, 126, 234, 0.5); transform: translateY(-2px); }

.logout-btn { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: rgb(239, 68, 68); padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: 0.3s; }

.contact-float-btn span { background: rgba(20, 25, 60, 0.55); backdrop-filter: blur(10px); color: white; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; border: 1px solid rgba(102, 126, 234, 0.3); box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 25px; text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 6px; white-space: nowrap; }

.qr-popup { position: absolute; bottom: 80px; right: 0px; z-index: 2001; background: linear-gradient(145deg, rgba(20, 25, 60, 0.95), rgba(30, 35, 70, 0.95)); backdrop-filter: blur(20px); border: 2px solid rgba(102, 126, 234, 0.3); border-radius: 20px; padding: 20px; min-width: 320px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.qr-popup::after { content: ""; position: absolute; bottom: -10px; right: 30px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(102, 126, 234, 0.3); }

.qr-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(102, 126, 234, 0.2); }

.qr-popup-header span { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }

.close-btn { color: rgba(255, 255, 255, 0.6); cursor: pointer; font-size: 18px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; }

.close-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; }

.qr-popup-content { display: flex; gap: 15px; justify-content: center; }

.qr-item { text-align: center; }

.qr-image-wrapper { background: white; border-radius: 10px; padding: 8px; margin-bottom: 10px; }

.qr-image-wrapper img { width: 120px; height: 120px; object-fit: contain; display: block; }

.qr-label { font-size: 14px; color: rgba(255, 255, 255, 0.8); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }

.qr-icon { font-size: 16px; }

@media (max-width: 768px) {
  .contact-float-btn { right: 20px; bottom: 20px; }
  .qr-popup { min-width: 280px; right: -40px; bottom: 70px; }
  .qr-image-wrapper img { width: 100px; height: 100px; }
  .qr-popup-content { gap: 12px; }
}

@media (max-width: 480px) {
  .qr-popup { right: -60px; min-width: 250px; padding: 15px; }
  .qr-image-wrapper img { width: 85px; height: 85px; }
  .qr-popup-content { gap: 10px; }
}