.app{min-height:100vh;background:var(--bg-primary)}.header{background:linear-gradient(135deg,#d9711e,#f5a623);padding:var(--spacing-4xl) var(--spacing-lg);text-align:center;position:relative;overflow:hidden}.header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 60s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header h1{font-size:var(--text-4xl);margin:0 0 var(--spacing-md);color:var(--neutral-white);font-weight:var(--font-bold);text-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:1}.header .subtitle{font-size:var(--text-xl);color:#ffffffe6;margin:0 0 var(--spacing-lg);position:relative;z-index:1}.header .contact{display:flex;justify-content:center;gap:var(--spacing-lg);flex-wrap:wrap;color:#fffffff2;font-size:var(--text-sm);position:relative;z-index:1}.header .contact span{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:#ffffff26;border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-fast)}.header .contact span:hover{background:#ffffff40;transform:translateY(-2px)}.nav{background:#fffffffa;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color-light)}.nav .container{max-width:1200px;margin:0 auto;display:flex;justify-content:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-padding-left:var(--spacing-lg)}.nav .container:before{content:"";min-width:var(--spacing-lg)}.nav .container:after{content:"";min-width:var(--spacing-lg)}.nav .container::-webkit-scrollbar{height:4px}.nav .container::-webkit-scrollbar-track{background:var(--neutral-gray100);border-radius:var(--radius-full)}.nav .container::-webkit-scrollbar-thumb{background:var(--primary-300);border-radius:var(--radius-full)}.nav a{color:var(--neutral-gray700);text-decoration:none;font-weight:var(--font-medium);transition:all var(--transition-fast);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);white-space:nowrap;font-size:var(--text-sm);position:relative;overflow:hidden}.nav a:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--primary-100);opacity:0;transition:opacity var(--transition-fast);border-radius:var(--radius-full)}.nav a:hover:before{opacity:1}.nav a:hover{color:var(--primary-600)}.nav a.active{color:var(--primary-600);background:#d9711e1a;font-weight:var(--font-semibold)}.section{padding:var(--spacing-3xl) var(--spacing-lg)}.section-title{font-size:var(--text-3xl);text-align:center;margin-bottom:var(--spacing-3xl);color:var(--neutral-gray900);font-weight:var(--font-bold);position:relative}.section-title:after{content:"";display:block;width:80px;height:4px;background:var(--gradient-primary);margin:var(--spacing-md) auto 0;border-radius:var(--radius-full)}.tech-stack{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.tech-category{background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color-light);transition:all var(--transition-normal)}.tech-category:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.tech-category h3{margin:0 0 var(--spacing-md);color:var(--primary-600);font-size:var(--text-lg);font-weight:var(--font-semibold);display:flex;align-items:center;gap:var(--spacing-sm)}.tech-category ul{margin:0;padding-left:var(--spacing-lg);color:var(--neutral-gray600);line-height:var(--leading-relaxed);font-size:var(--text-sm)}.tech-category li{padding:var(--spacing-xs) 0}.projects-grid{display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.project-card{background:var(--bg-secondary);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);transition:all var(--transition-normal);border:1px solid var(--border-color-light)}.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.project-video{height:220px;background:var(--gradient-ocean);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:all var(--transition-normal)}.project-video:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-slow)}.project-video:hover:before{left:100%}.project-video:hover{transform:scale(1.02);box-shadow:0 12px 40px #d9711e4d}.project-video-icon{width:80px;height:80px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.4);transition:all var(--transition-normal);box-shadow:var(--shadow-lg)}.project-video:hover .project-video-icon{background:#ffffff4d;transform:scale(1.15);box-shadow:0 8px 30px #fff6}.project-video-icon:after{content:"";width:0;height:0;border-left:28px solid var(--neutral-white);border-top:18px solid transparent;border-bottom:18px solid transparent;margin-left:5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.project-video-text{position:absolute;bottom:var(--spacing-md);left:0;right:0;text-align:center;color:#fffffff2;font-size:var(--text-sm);font-weight:var(--font-medium);text-shadow:0 2px 4px rgba(0,0,0,.4);letter-spacing:var(--tracking-wide)}.project-info{padding:var(--spacing-lg)}.project-info h3{margin:0 0 var(--spacing-sm);color:var(--neutral-gray900);font-size:var(--text-xl);font-weight:var(--font-semibold)}.project-meta{color:var(--neutral-gray500);font-size:var(--text-sm);margin:0 0 var(--spacing-md);font-family:var(--font-mono)}.project-desc{color:var(--neutral-gray600);line-height:var(--leading-relaxed);margin:0 0 var(--spacing-lg);font-size:var(--text-sm)}.project-tags{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.tag{padding:var(--spacing-xs) var(--spacing-sm);background:var(--neutral-gray100);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--neutral-gray600);transition:all var(--transition-fast)}.tag:hover{background:var(--neutral-gray200);transform:translateY(-1px)}.tag.react{background:#61dafb26;color:#00bcd4}.tag.ios{background:#ff634726;color:tomato}.tag.android{background:#4caf5026;color:#4caf50}.work-experience{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:900px;margin:0 auto}.work-item{background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color-light);border-left:4px solid var(--primary-500);transition:all var(--transition-normal)}.work-item:hover{box-shadow:var(--shadow-lg);border-left-color:var(--primary-600)}.work-item h3{margin:0 0 var(--spacing-sm);color:var(--primary-600);font-size:var(--text-lg);font-weight:var(--font-semibold)}.work-item .company{color:var(--neutral-gray800);font-weight:var(--font-semibold);margin:0 0 var(--spacing-xs);font-size:var(--text-md)}.work-item .time{color:var(--neutral-gray500);font-size:var(--text-sm);margin:0 0 var(--spacing-lg);font-family:var(--font-mono)}.work-item ul{margin:0;padding-left:var(--spacing-lg);color:var(--neutral-gray600);line-height:var(--leading-relaxed);font-size:var(--text-sm)}.work-item li{padding:var(--spacing-xs) 0}.about-content{background:var(--bg-secondary);padding:var(--spacing-3xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:900px;margin:0 auto;border:1px solid var(--border-color-light)}.about-content p{color:var(--neutral-gray600);line-height:var(--leading-relaxed);margin:0 0 var(--spacing-lg);font-size:var(--text-md)}.about-content p:last-child{margin-bottom:0}.footer{background:var(--neutral-gray900);padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;color:#fffc}.footer p{margin:var(--spacing-xs) 0;font-size:var(--text-sm)}.footer-buttons{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-lg);flex-wrap:wrap}.info-button,.logout-button{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:#ffffffe6;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.info-button:hover,.logout-button:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-fast)}body.modal-open{overflow:hidden}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-xl);width:100%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:modalSlideIn var(--transition-normal) ease-out;border:1px solid var(--border-color-light)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--border-color-light)}.modal-header h3{margin:0;font-size:var(--text-2xl);color:var(--neutral-gray900);font-weight:var(--font-semibold)}.modal-close{background:none;border:none;font-size:2rem;color:var(--neutral-gray400);cursor:pointer;line-height:1;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:all var(--transition-fast)}.modal-close:hover{background:var(--neutral-gray100);color:var(--neutral-gray900)}.modal-body{padding:var(--spacing-xl);overflow-y:auto;flex:1}.modal-footer{padding:var(--spacing-md) var(--spacing-xl);border-top:1px solid var(--border-color-light);display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);background:var(--bg-tertiary);border-radius:0 0 var(--radius-xl) var(--radius-xl)}.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--gradient-ocean);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer;animation:fadeIn var(--transition-fast)}.video-modal .close{position:absolute;top:var(--spacing-lg);right:var(--spacing-xl);font-size:3rem;color:var(--neutral-white);cursor:pointer;transition:all var(--transition-fast);z-index:1001}.video-modal .close:hover{color:#ffffffb3;transform:scale(1.1)}.video-modal video{max-width:90%;max-height:90%;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}@media(max-width:768px){.header{padding:var(--spacing-3xl) var(--spacing-md)}.header h1{font-size:var(--text-3xl)}.header .subtitle{font-size:var(--text-lg)}.header .contact{flex-direction:column;gap:var(--spacing-xs);font-size:var(--text-xs)}.nav .container{gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.nav a{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-xs)}.section{padding:var(--spacing-2xl) var(--spacing-md)}.section-title{font-size:var(--text-2xl);margin-bottom:var(--spacing-2xl)}.tech-category{padding:var(--spacing-md)}.tech-category h3{font-size:var(--text-md)}.projects-grid{grid-template-columns:1fr}.project-video{height:200px}.project-info{padding:var(--spacing-md)}.work-item{padding:var(--spacing-lg)}.about-content{padding:var(--spacing-xl)}.footer{padding:var(--spacing-xl) var(--spacing-md);font-size:var(--text-sm)}.modal-content{max-height:90vh}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-body{padding:var(--spacing-md)}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.auth-box{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:400px;box-shadow:0 20px 60px #0000004d;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{font-size:28px;margin:0 0 8px;color:#333;font-weight:600}.auth-header p{color:#666;margin:0;font-size:14px}.auth-form{display:flex;flex-direction:column;gap:20px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:600;color:#555;font-size:14px}.input-group input{width:100%;padding:12px 16px;font-size:15px;border:2px solid #e0e0e0;border-radius:10px;outline:none;transition:all .3s ease;background:#fff}.input-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-group input:disabled{background:#f5f5f5;cursor:not-allowed}.input-group input::placeholder{color:#999}.error-message{background:#fee;color:#c00;padding:12px 15px;border-radius:8px;font-size:14px;text-align:center;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.auth-button{width:100%;padding:14px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;margin-top:10px}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-footer{margin-top:25px;text-align:center;color:#999;font-size:13px}.auth-footer p{margin:0}@media(max-width:768px){.auth-box{padding:32px 24px}.auth-header h1{font-size:24px}}:root{--primary-50: #fdf6f0;--primary-100: #fae8d5;--primary-200: #f5d5b3;--primary-300: #f0c291;--primary-400: #ebaf6f;--primary-500: #d9711e;--primary-600: #c45f14;--primary-700: #af4d0a;--primary-800: #9a3b00;--primary-900: #7a2a00;--neutral-white: #ffffff;--neutral-gray50: #fafafa;--neutral-gray100: #f5f5f5;--neutral-gray200: #eeeeee;--neutral-gray300: #e0e0e0;--neutral-gray400: #bdbdbd;--neutral-gray500: #9e9e9e;--neutral-gray600: #757575;--neutral-gray700: #616161;--neutral-gray800: #424242;--neutral-gray900: #212121;--neutral-black: #000000;--success: #4CAF50;--success-light: #e8f5e9;--warning: #FFC107;--warning-light: #fff8e1;--error: #f44336;--error-light: #ffebee;--info: #2196F3;--info-light: #e3f2fd;--gradient-primary: linear-gradient(135deg, #d9711e 0%, #f5a623 100%);--gradient-primary-reverse: linear-gradient(135deg, #f5a623 0%, #d9711e 100%);--gradient-ocean: linear-gradient(135deg, #d9711e 0%, #f5a623 50%, #ff8c42 100%);--gradient-success: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);--gradient-warning: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);--gradient-error: linear-gradient(135deg, #f44336 0%, #e53935 100%);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-4xl: 96px;--radius-none: 0;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--shadow-primary: 0 4px 14px 0 rgba(217, 113, 30, .39);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 28px;--text-4xl: 32px;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.6;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--bg-primary: var(--neutral-gray50);--bg-secondary: var(--neutral-white);--bg-tertiary: var(--neutral-gray100);--border-color: var(--neutral-gray200);--border-color-light: var(--neutral-gray100)}@media(prefers-color-scheme:dark){:root{--bg-primary: #121212;--bg-secondary: #1e1e1e;--bg-tertiary: #2d2d2d;--text-primary: var(--neutral-gray100);--text-secondary: var(--neutral-gray400);--text-tertiary: var(--neutral-gray500);--border-color: #404040;--border-color-light: #333333;--primary-500: #bb86fc}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--neutral-gray900);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:var(--text-4xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter)}h2{font-size:var(--text-3xl);font-weight:var(--font-bold);line-height:var(--leading-tight)}h3{font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:var(--leading-tight)}h4{font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-normal)}p{margin-bottom:var(--spacing-md)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--text-md);font-weight:var(--font-semibold);line-height:var(--leading-normal);text-decoration:none;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);min-height:52px}.btn-primary{background:var(--gradient-primary);color:var(--neutral-white);box-shadow:0 4px 14px #d9711e63}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #d9711e66}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--neutral-white);color:var(--primary-600);border:2px solid var(--primary-200)}.btn-secondary:hover:not(:disabled){background:var(--primary-50);border-color:var(--primary-400)}.btn-danger{background:var(--gradient-error);color:var(--neutral-white)}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f4433666}.card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color-light);transition:all var(--transition-normal)}.card:hover{box-shadow:var(--shadow-lg)}.card-elevated{box-shadow:var(--shadow-lg);border:none}.input{width:100%;padding:var(--spacing-md);font-size:var(--text-md);font-family:var(--font-sans);border:2px solid var(--border-color);border-radius:var(--radius-md);outline:none;transition:all var(--transition-fast);min-height:52px}.input:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px #667eea1a}.input:disabled{background:var(--bg-tertiary);cursor:not-allowed}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-full);white-space:nowrap}.badge-primary{background:var(--primary-100);color:var(--primary-700)}.badge-success{background:var(--success-light);color:var(--success)}.badge-warning{background:var(--warning-light);color:#996d00}.badge-error{background:var(--error-light);color:var(--error)}.badge-admin{background:var(--gradient-primary);color:var(--neutral-white)}.text-center{text-align:center}.text-primary{color:var(--primary-600)}.text-secondary{color:var(--neutral-gray600)}.text-muted{color:var(--neutral-gray500)}.font-mono{font-family:var(--font-mono)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn var(--transition-slow) ease-out}.animate-slideUp{animation:slideUp var(--transition-slow) ease-out}.animate-slideDown{animation:slideDown var(--transition-slow) ease-out}@media(max-width:768px){html{font-size:14px}.container{padding:0 var(--spacing-md)}}