*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#8b5cf6;--secondary-color:#6366f1;--accent-color:#ec4899;--text-color:#e2e8f0;--text-light:#94a3b8;--bg-dark:#0f172a;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--card-bg:#1e293bf2;--card-border:#ffffff1a;--shadow:0 8px 32px 0 #0000004d;--transition:all .3s ease;--info-bg:#0f172acc;--info-border:#ffffff26;--skill-bg:#8b5cf626;--skill-border:#8b5cf64d;--skill-color:#a78bfa;--nav-hover-bg:#8b5cf626}.light-mode{--primary-color:#6366f1;--secondary-color:#8b5cf6;--accent-color:#ec4899;--text-color:#1e293b;--text-light:#475569;--bg-dark:#f8fafc;--bg-gradient:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--card-bg:#fffffff2;--card-border:#0000001a;--shadow:0 8px 32px 0 #0000001a;--info-bg:#f1f5f9f2;--info-border:#00000014;--skill-bg:#6366f11a;--skill-border:#6366f140;--skill-color:#4338ca;--nav-hover-bg:#6366f11a}body{background:var(--bg-gradient);color:var(--text-color);min-height:100vh;transition:var(--transition);margin:0;padding:20px 0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{min-height:100vh}.app{background:var(--card-bg);max-width:1200px;box-shadow:var(--shadow);border:1px solid var(--card-border);min-height:100vh;transition:var(--transition);border-radius:20px;margin:0 auto;overflow:hidden}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--card-border);z-index:100;transition:var(--transition);background:#0f172af2;padding:20px 0;position:sticky;top:0}.light-mode .navbar{background:#fffffff2}.nav-content{justify-content:center;align-items:center;gap:40px;max-width:1200px;margin:0 auto;display:flex}.nav-link{color:var(--text-light);transition:var(--transition);border-radius:25px;padding:8px 20px;font-size:16px;font-weight:500;text-decoration:none}.nav-link:hover{background:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf64d}.nav-link.active{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #8b5cf64d}.main-content{min-height:60vh;padding:40px 20px}.home-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:70vh;display:flex}.home-content{max-width:800px;animation:.8s ease-out fadeInUp}.home-title{background:linear-gradient(135deg, var(--primary-color), var(--accent-color));-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:48px;font-weight:700}.home-subtitle{color:var(--text-light);opacity:.8;margin-bottom:60px;font-size:18px}.links-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;width:100%;max-width:900px;display:grid}.link-card{background:var(--card-bg);color:var(--text-color);box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--card-border);border-radius:20px;flex-direction:column;align-items:center;gap:15px;padding:40px 30px;text-decoration:none;display:flex}.link-card:hover{border-color:var(--primary-color);transform:translateY(-10px)scale(1.02);box-shadow:0 12px 40px #8b5cf640}.link-icon{margin-bottom:10px;font-size:48px}.link-card h3{color:var(--primary-color);margin:0;font-size:24px}.link-card p{color:var(--text-light);margin:0;font-size:14px;line-height:1.6}.page-container{max-width:1200px;margin:0 auto;animation:.5s ease-out fadeIn}.page-title{text-align:center;background:linear-gradient(135deg, var(--primary-color), var(--accent-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:50px;font-size:42px;font-weight:700;position:relative}.page-title:after{content:"";background:linear-gradient(90deg, var(--primary-color), var(--accent-color));border-radius:2px;width:80px;height:4px;margin:20px auto 0;display:block}.resume-page{padding:40px 20px}.resume-wrapper{gap:30px;max-width:1200px;margin:0 auto;display:flex}.resume-sidebar{flex:0 0 250px;height:fit-content;position:sticky;top:100px}.resume-nav{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:20px;padding:30px}.resume-nav .nav-title{color:var(--primary-color);border-bottom:1px solid var(--card-border);margin-bottom:20px;padding-bottom:15px;font-size:18px;font-weight:700}.resume-nav .nav-items{flex-direction:column;gap:10px;display:flex}.resume-nav .nav-item{cursor:pointer;transition:var(--transition);color:var(--text-light);border-radius:10px;padding:12px 15px;font-size:14px;font-weight:500}.resume-nav .nav-item:hover{background:var(--nav-hover-bg);color:var(--primary-color);transform:translate(5px)}.resume-nav .nav-item.active{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;box-shadow:0 4px 12px #8b5cf64d}.resume-content{flex:1;min-width:0}.resume-section{background:var(--card-bg);box-shadow:var(--shadow);border:1px solid var(--card-border);transition:var(--transition);border-radius:20px;margin-bottom:30px;padding:40px}.resume-section:hover{transform:translateY(-5px);box-shadow:0 12px 40px #8b5cf633}.resume-section h2{color:var(--primary-color);border-bottom:2px solid var(--card-border);align-items:center;gap:12px;margin-bottom:25px;padding-bottom:15px;font-size:26px;display:flex}.resume-section h2:before{content:"";background:linear-gradient(180deg, var(--primary-color), var(--secondary-color));border-radius:2px;width:4px;height:24px;display:inline-block}.resume-section p{color:var(--text-light);margin-bottom:12px;line-height:1.8}.resume-section ul{flex-direction:column;gap:12px;margin-top:20px;list-style:none;display:flex}.resume-section li{background:var(--info-bg);color:var(--text-color);border:1px solid var(--info-border);transition:var(--transition);border-radius:12px;align-items:flex-start;gap:12px;padding:15px 20px;font-weight:500;line-height:1.6;display:flex}.resume-section li:before{content:attr(data-num);background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;min-width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.resume-section li:hover{border-color:var(--primary-color);transform:translate(5px)}.personal-info{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid}.info-row{background:var(--info-bg);border:1px solid var(--info-border);border-radius:15px;padding:20px}.info-row .label{color:var(--text-light);margin-bottom:5px;font-size:14px;display:block}.info-row .value{color:var(--text-color);font-size:16px;font-weight:600}.expectation{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;display:grid}.expect-item{background:var(--info-bg);border:1px solid var(--info-border);border-radius:15px;padding:20px}.expect-item .label{color:var(--text-light);margin-bottom:8px;font-size:14px;display:block}.expect-item .value{color:var(--text-color);font-size:16px;font-weight:600}.work-experience,.project-experience{flex-direction:column;gap:25px;display:flex}.job,.project{background:var(--info-bg);border:1px solid var(--info-border);transition:var(--transition);border-radius:20px;padding:30px}.job:hover,.project:hover{border-color:var(--primary-color);transform:translate(5px)}.job-header,.project-header{border-bottom:1px solid var(--info-border);justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:15px;display:flex}.job-title,.project-title{color:var(--text-color);font-size:20px;font-weight:600}.job-period,.project-period{color:var(--primary-color);font-size:14px;font-weight:500}.job-skills{background:var(--skill-bg);color:var(--skill-color);border-radius:8px;margin-bottom:15px;padding:10px 15px;font-size:13px;display:inline-block}.job-content,.project-content{color:var(--text-light);line-height:1.8}.job-content p,.project-content p{margin-bottom:15px}.job-content ul,.project-content ul{margin-top:15px}.job-content li,.project-content li{color:var(--text-color);background:var(--info-bg);border:1px solid var(--info-border);border-radius:10px;align-items:flex-start;gap:10px;margin-bottom:12px;padding:12px 15px;font-weight:400;line-height:1.5;display:flex}.job-content li:before,.project-content li:before{content:attr(data-num);background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex}.job-content li:hover,.project-content li:hover{border-color:var(--primary-color);transform:translate(5px)}.education{flex-direction:column;gap:20px;display:flex}.edu-item{background:var(--info-bg);border:1px solid var(--info-border);border-radius:20px;padding:30px}.edu-header{border-bottom:1px solid var(--info-border);justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:15px;display:flex}.edu-school{color:var(--text-color);font-size:20px;font-weight:600}.edu-period{color:var(--primary-color);font-size:14px;font-weight:500}.edu-content{color:var(--text-light);line-height:1.8}.edu-major,.edu-degree{color:var(--text-color);margin-bottom:8px;font-weight:600}.blog-search-container{flex-direction:column;gap:20px;margin-bottom:40px;display:flex}.search-box{gap:10px;display:flex}.search-input{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text-color);transition:var(--transition);border-radius:10px;flex:1;padding:15px 20px;font-size:16px}.search-input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #8b5cf61a}.search-input::placeholder{color:var(--text-light)}.search-filters{flex-wrap:wrap;gap:10px;display:flex}.filter-btn{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text-light);cursor:pointer;transition:var(--transition);border-radius:25px;padding:10px 20px;font-size:14px;font-weight:500}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.blog-list{flex-direction:column;gap:20px;display:flex}.blog-post{background:var(--card-bg);box-shadow:var(--shadow);transition:var(--transition);cursor:pointer;border:1px solid var(--card-border);border-radius:15px;padding:30px}.blog-post:hover{border-color:var(--primary-color);transform:translate(10px);box-shadow:0 8px 30px #8b5cf633}.blog-post-title{color:var(--primary-color);margin-bottom:10px;font-size:22px}.post-date{color:var(--text-light);margin-bottom:15px;font-size:14px;display:block}.blog-tags{flex-wrap:wrap;gap:8px;display:flex}.tag{background:var(--skill-bg);color:var(--skill-color);border:1px solid var(--skill-border);border-radius:15px;padding:5px 12px;font-size:12px;font-weight:500;display:inline-block}.no-results{text-align:center;color:var(--text-light);padding:40px 20px;font-size:16px}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;display:grid}.project-card{background:var(--card-bg);box-shadow:var(--shadow);transition:var(--transition);text-align:center;border:1px solid var(--card-border);border-radius:20px;padding:30px}.project-card:hover{border-color:var(--primary-color);transform:translateY(-10px);box-shadow:0 15px 40px #8b5cf64d}.project-preview{background:linear-gradient(135deg, var(--primary-color), var(--accent-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:64px}.project-card h3{color:var(--primary-color);margin-bottom:10px;font-size:24px}.project-card p{color:var(--text-light);line-height:1.6}.contact-content{background:var(--card-bg);box-shadow:var(--shadow);text-align:center;border:1px solid var(--card-border);border-radius:20px;padding:50px}.contact-item{background:var(--info-bg);transition:var(--transition);border:1px solid var(--info-border);border-radius:15px;justify-content:center;align-items:center;gap:20px;margin:20px 0;padding:25px;display:flex}.contact-item:hover{background:var(--skill-bg);border-color:var(--primary-color);transform:scale(1.02)}.contact-icon{font-size:32px}.footer{text-align:center;color:var(--text-light);border-top:1px solid var(--card-border);background:#0f172af2;margin-top:auto;padding:30px}.light-mode .footer{background:#f1f5f9f2}.theme-switcher{align-items:center;margin-right:15px;display:flex}.theme-btn{background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;transition:var(--transition);border-radius:25px;justify-content:center;align-items:center;width:40px;height:40px;padding:8px 15px;font-size:20px;display:flex}.theme-btn:hover{background:var(--primary-color);color:#fff;transform:scale(1.1);box-shadow:0 4px 12px #8b5cf64d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=992px){.resume-wrapper{flex-direction:column}.resume-sidebar{flex:none;width:100%;position:static}.resume-nav{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.resume-nav .nav-title{display:none}.resume-nav .nav-item{text-align:center;flex:calc(20% - 10px)}}@media (width<=768px){.home-title{font-size:32px}.nav-content{flex-wrap:wrap;gap:15px}.links-grid,.portfolio-grid{grid-template-columns:1fr}.contact-item{flex-direction:column}.page-title{font-size:32px}.resume-section{padding:25px}.job-header,.project-header,.edu-header{flex-direction:column;gap:10px}.job-title,.project-title,.edu-school{font-size:18px}.job-period,.project-period,.edu-period{font-size:13px}.search-filters{flex-direction:column}.filter-btn{width:100%}.blog-post{padding:20px}.blog-post-title{font-size:18px}.tag{font-size:11px}}.audio-toggle{background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;transition:var(--transition);border-radius:25px;justify-content:center;align-items:center;min-width:44px;height:44px;padding:8px 15px;font-size:20px;display:flex}.audio-toggle:hover{background:var(--primary-color);border-color:var(--primary-color);transform:scale(1.1)}.audio-toggle:active{transform:scale(.95)}.language-switcher{align-items:center;margin-right:20px;display:flex;position:relative}.lang-selector{border:1px solid var(--card-border);background:var(--card-bg);color:var(--text-color);cursor:pointer;transition:var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:112px;box-shadow:var(--shadow);border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:8px 18px;font-size:14px;font-weight:600;display:flex}.lang-selector:hover,.lang-selector:focus{background:var(--skill-bg);color:var(--primary-color);border-color:var(--primary-color);transform:translateY(-1px)}.arrow{transition:var(--transition);font-size:10px}.lang-dropdown{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:140px;box-shadow:var(--shadow);z-index:1000;border-radius:14px;position:absolute;top:calc(100% + 10px);left:0;overflow:hidden}.lang-option{color:var(--text-light);cursor:pointer;transition:var(--transition);text-align:left;background:0 0;border:none;width:100%;padding:10px 16px;font-size:14px;font-weight:500}.lang-option:hover{background:var(--skill-bg);color:var(--primary-color)}.lang-option.active{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff}@media (width<=768px){.language-switcher{margin-bottom:10px;margin-right:0}}