:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#ffffff08;--bg-card-hover:#ffffff0f;--bg-glass:#ffffff0a;--border-primary:#ffffff0f;--border-subtle:#ffffff0a;--border-accent:#8b5cf64d;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-violet:#8b5cf6;--accent-violet-light:#a78bfa;--accent-violet-bg:#8b5cf61a;--accent-violet-glow:#8b5cf640;--success:#34d399;--success-bg:#34d3991a;--success-border:#34d39933;--warning:#fbbf24;--warning-bg:#fbbf241a;--warning-border:#fbbf2433;--info:#60a5fa;--info-bg:#60a5fa1a;--info-border:#60a5fa33;--danger:#f87171;--danger-bg:#f871711a;--danger-border:#f8717133;--gradient-accent:linear-gradient(135deg, #8b5cf6, #6366f1, #8b5cf6);--gradient-bg:radial-gradient(ellipse 80% 50% at 50% -20%, #8b5cf626, transparent);--font-sans:"Inter", system-ui, -apple-system, sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 8px 32px #0006;--shadow-glow:0 0 40px #8b5cf626;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.6}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{background:var(--accent-violet-bg);color:var(--accent-violet-light)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(30px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes progressPulse{0%,to{box-shadow:0 0 0 0 var(--accent-violet-glow)}50%{box-shadow:0 0 20px 4px var(--accent-violet-glow)}}@keyframes dropZonePulse{0%,to{border-color:var(--border-accent);background:var(--accent-violet-bg)}50%{border-color:var(--accent-violet);background:#8b5cf626}}.app{min-height:100vh;position:relative}.app:before{content:"";background:var(--gradient-bg);pointer-events:none;z-index:0;position:fixed;inset:0}.app-container{z-index:1;max-width:880px;margin:0 auto;padding:40px 24px 80px;position:relative}.header{text-align:center;animation:fadeInUp var(--transition-slow) ease-out;margin-bottom:48px}.header-badge{border-radius:var(--radius-full);background:var(--accent-violet-bg);border:1px solid var(--border-accent);color:var(--accent-violet-light);letter-spacing:.3px;align-items:center;gap:6px;margin-bottom:20px;padding:6px 14px;font-size:13px;font-weight:500;display:inline-flex}.header-badge-dot{background:var(--accent-violet);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}.site-logo{object-fit:contain;border-radius:15px;width:auto;max-height:260px;margin:-35px auto -45px;display:block}.header h1{letter-spacing:-1.5px;background:linear-gradient(135deg,#f1f5f9 0%,#8b5cf6 50%,#6366f1 100%) 0 0/200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:48px;font-weight:800;line-height:1.1;animation:6s infinite gradientShift}.header p{color:var(--text-secondary);max-width:480px;margin:0 auto;font-size:17px;font-weight:400;line-height:1.6}.drop-zone{border:2px dashed var(--border-primary);border-radius:var(--radius-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--bg-card);animation:fadeInUp var(--transition-slow) ease-out .1s both;margin-bottom:24px;padding:56px 32px;position:relative;overflow:hidden}.drop-zone:before{content:"";pointer-events:none;border-radius:inherit;opacity:0;transition:opacity var(--transition-base);background:radial-gradient(circle,#8b5cf60a,#0000 70%);position:absolute;inset:0}.drop-zone:hover{border-color:var(--border-accent);background:var(--bg-card-hover)}.drop-zone:hover:before{opacity:1}.drop-zone.dragging{animation:1.5s ease-in-out infinite dropZonePulse;transform:scale(1.01)}.drop-zone.has-file{border-color:var(--success-border);background:var(--success-bg);border-style:solid}.drop-zone-input{display:none}.drop-zone-icon{border-radius:var(--radius-lg);background:var(--accent-violet-bg);width:56px;height:56px;transition:all var(--transition-base);justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.drop-zone:hover .drop-zone-icon{background:#8b5cf626;transform:translateY(-2px)}.drop-zone-icon svg{width:24px;height:24px;color:var(--accent-violet-light)}.drop-zone-title{color:var(--text-primary);margin-bottom:6px;font-size:16px;font-weight:600}.drop-zone-title span{color:var(--accent-violet-light);text-underline-offset:2px;text-decoration:underline}.drop-zone-subtitle{color:var(--text-muted);font-size:13px}.file-info{justify-content:center;align-items:center;gap:12px;display:flex}.file-icon{border-radius:var(--radius-md);background:var(--success-bg);border:1px solid var(--success-border);flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.file-icon svg{width:22px;height:22px;color:var(--success)}.file-details{text-align:left}.file-name{color:var(--text-primary);margin-bottom:2px;font-size:15px;font-weight:600}.file-size{color:var(--text-muted);font-size:12px}.file-remove{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);z-index:2;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex;position:relative}.file-remove:hover{color:var(--danger);background:var(--danger-bg)}.file-remove svg{width:18px;height:18px}.analyze-btn{border-radius:var(--radius-lg);width:100%;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);animation:fadeInUp var(--transition-slow) ease-out .2s both;border:none;justify-content:center;align-items:center;gap:10px;padding:16px 32px;font-size:16px;font-weight:600;display:flex;position:relative;overflow:hidden}.analyze-btn:not(:disabled){background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-md), 0 0 20px #8b5cf633;background-size:200%}.analyze-btn:not(:disabled):hover{box-shadow:var(--shadow-lg), 0 0 30px #8b5cf64d;background-position:100%;transform:translateY(-1px)}.analyze-btn:not(:disabled):active{transform:translateY(0)}.analyze-btn:disabled{background:var(--bg-card);color:var(--text-muted);cursor:not-allowed;border:1px solid var(--border-primary)}.analyze-btn svg{width:20px;height:20px}.loading-container{text-align:center;animation:scaleIn var(--transition-slow) ease-out;padding:60px 24px}.loading-spinner{border:3px solid var(--border-primary);border-top-color:var(--accent-violet);border-radius:50%;width:48px;height:48px;margin:0 auto 24px;animation:.8s linear infinite spin}.loading-text{color:var(--text-primary);margin-bottom:8px;font-size:17px;font-weight:600}.loading-subtext{color:var(--text-muted);font-size:14px;animation:2s ease-in-out infinite pulse}.error-card{background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-lg);animation:slideInFromBottom var(--transition-slow) ease-out;align-items:flex-start;gap:14px;margin-top:32px;padding:24px;display:flex}.error-icon{border-radius:var(--radius-md);background:#f8717126;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.error-icon svg{width:20px;height:20px;color:var(--danger)}.error-title{color:var(--danger);margin-bottom:4px;font-size:15px;font-weight:600}.error-message{color:var(--text-secondary);font-size:14px;line-height:1.5}.results{margin-top:40px;animation:.5s ease-out slideInFromBottom}.results-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.results-title{color:var(--text-primary);letter-spacing:-.3px;font-size:22px;font-weight:700}.results-reset{border:1px solid var(--border-primary);color:var(--text-secondary);font-family:var(--font-sans);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);background:0 0;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;display:flex}.results-reset:hover{border-color:var(--border-accent);color:var(--accent-violet-light);background:var(--accent-violet-bg)}.results-reset svg{width:14px;height:14px}.score-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);text-align:center;margin-bottom:20px;padding:40px;animation:.5s ease-out .1s both slideInFromBottom;position:relative;overflow:hidden}.score-card:before{content:"";background:var(--gradient-accent);background-size:200%;height:2px;animation:4s infinite gradientShift;position:absolute;top:0;left:0;right:0}.score-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;font-size:13px;font-weight:500}.score-value-wrapper{justify-content:center;align-items:center;margin-bottom:16px;display:inline-flex;position:relative}.score-ring{width:140px;height:140px;transform:rotate(-90deg)}.score-ring-bg{fill:none;stroke:var(--border-primary);stroke-width:6px}.score-ring-fill{fill:none;stroke-width:6px;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}.score-ring-fill.excellent{stroke:var(--success)}.score-ring-fill.good{stroke:var(--accent-violet)}.score-ring-fill.average{stroke:var(--warning)}.score-ring-fill.poor{stroke:var(--danger)}.score-number{letter-spacing:-1px;color:var(--text-primary);font-size:40px;font-weight:800;position:absolute}.score-desc{color:var(--text-secondary);font-size:15px;font-weight:500}.score-desc.excellent{color:var(--success)}.score-desc.good{color:var(--accent-violet-light)}.score-desc.average{color:var(--warning)}.score-desc.poor{color:var(--danger)}.detail-grid{grid-template-columns:1fr;gap:16px;display:grid}.detail-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:24px;animation:.5s ease-out both slideInFromBottom}.detail-card:first-child{animation-delay:.2s}.detail-card:nth-child(2){animation-delay:.3s}.detail-card:nth-child(3){animation-delay:.4s}.detail-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover)}.detail-card-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.detail-card-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.detail-card-icon svg{width:18px;height:18px}.detail-card-icon.success{background:var(--success-bg);border:1px solid var(--success-border)}.detail-card-icon.success svg{color:var(--success)}.detail-card-icon.warning{background:var(--warning-bg);border:1px solid var(--warning-border)}.detail-card-icon.warning svg{color:var(--warning)}.detail-card-icon.info{background:var(--info-bg);border:1px solid var(--info-border)}.detail-card-icon.info svg{color:var(--info)}.detail-card-title{color:var(--text-primary);font-size:16px;font-weight:600}.detail-card-list{flex-direction:column;gap:10px;list-style:none;display:flex}.detail-card-item{color:var(--text-secondary);background:var(--bg-glass);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);transition:all var(--transition-fast);align-items:flex-start;gap:10px;padding:10px 14px;font-size:14px;line-height:1.55;display:flex}.detail-card-item:hover{border-color:var(--border-primary);background:#ffffff0f}.detail-card-item-bullet{border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:7px}.detail-card-item-bullet.success{background:var(--success)}.detail-card-item-bullet.warning{background:var(--warning)}.detail-card-item-bullet.info{background:var(--info)}.job-section{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);animation:fadeInUp var(--transition-slow) ease-out .15s both;transition:all var(--transition-base);margin-bottom:24px;padding:24px}.job-section:hover{border-color:var(--border-accent)}.job-section-header{margin-bottom:16px}.job-section-label{color:var(--text-primary);align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.job-section-label svg{width:18px;height:18px;color:var(--accent-violet-light)}.job-optional-badge{color:var(--text-muted);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-full);letter-spacing:.3px;padding:2px 10px;font-size:11px;font-weight:500}.input-toggle{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);gap:4px;margin-bottom:14px;padding:4px;display:flex}.toggle-btn{border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;display:flex}.toggle-btn svg{width:15px;height:15px}.toggle-btn:hover{color:var(--text-secondary)}.toggle-btn.active{background:var(--accent-violet-bg);color:var(--accent-violet-light);border:1px solid var(--border-accent)}.url-input-wrapper{align-items:center;margin-bottom:12px;display:flex;position:relative}.url-input-icon{pointer-events:none;align-items:center;display:flex;position:absolute;left:14px}.url-input-icon svg{width:16px;height:16px;color:var(--text-muted)}.url-input{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition-fast);outline:none;padding:12px 42px;font-size:14px}.url-input::placeholder{color:var(--text-muted)}.url-input:focus{border-color:var(--border-accent);background:#8b5cf60d;box-shadow:0 0 0 3px #8b5cf61a}.url-clear{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;align-items:center;padding:4px;display:flex;position:absolute;right:8px}.url-clear svg{width:16px;height:16px}.url-clear:hover{color:var(--danger);background:var(--danger-bg)}.text-input{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-sans);resize:vertical;min-height:100px;transition:all var(--transition-fast);outline:none;margin-bottom:12px;padding:12px 16px;font-size:14px;line-height:1.6}.text-input::placeholder{color:var(--text-muted)}.text-input:focus{border-color:var(--border-accent);background:#8b5cf60d;box-shadow:0 0 0 3px #8b5cf61a}.job-hint{border-radius:var(--radius-sm);animation:fadeIn var(--transition-fast) ease-out;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.job-hint.success{color:var(--success);background:var(--success-bg);border:1px solid var(--success-border)}.job-hint.success svg{flex-shrink:0;width:16px;height:16px}.job-hint.neutral{color:var(--text-muted);background:var(--bg-glass);border:1px solid var(--border-subtle)}.skill-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}.skill-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:24px;animation:.5s ease-out both slideInFromBottom}.skill-card:first-child{animation-delay:.2s}.skill-card:nth-child(2){animation-delay:.3s}.skill-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover)}.skill-card-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.skill-count{border-radius:var(--radius-full);margin-left:auto;padding:2px 10px;font-size:13px;font-weight:600}.skill-count.success{color:var(--success);background:var(--success-bg)}.skill-count.danger{color:var(--danger);background:var(--danger-bg)}.skill-tags{flex-wrap:wrap;gap:8px;display:flex}.skill-tag{border-radius:var(--radius-full);transition:all var(--transition-fast);animation:scaleIn var(--transition-base) ease-out both;align-items:center;gap:5px;padding:6px 12px;font-size:13px;font-weight:500;display:inline-flex}.skill-tag:first-child{animation-delay:.25s}.skill-tag:nth-child(2){animation-delay:.3s}.skill-tag:nth-child(3){animation-delay:.35s}.skill-tag:nth-child(4){animation-delay:.4s}.skill-tag:nth-child(5){animation-delay:.45s}.skill-tag:nth-child(6){animation-delay:.5s}.skill-tag:nth-child(n+7){animation-delay:.55s}.skill-tag.success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success)}.skill-tag.success:hover{background:#34d39933}.skill-tag.danger{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}.skill-tag.danger:hover{background:#f8717133}.skill-tag-icon{align-items:center;display:flex}.skill-tag-icon svg{width:12px;height:12px}.summary-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);margin-bottom:16px;padding:24px;animation:.5s ease-out .15s both slideInFromBottom}.summary-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover)}.summary-card-header{align-items:center;gap:12px;margin-bottom:14px;display:flex}.summary-text{color:var(--text-secondary);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;line-height:1.7}.detail-card-icon.danger{background:var(--danger-bg);border:1px solid var(--danger-border)}.detail-card-icon.danger svg{color:var(--danger)}.hr-dashboard{margin-top:28px;animation:.5s ease-out .4s both slideInFromBottom}.hr-dashboard-header{margin-bottom:20px}.hr-dashboard-badge{border-radius:var(--radius-full);border:1px solid var(--border-accent);color:var(--accent-violet-light);background:linear-gradient(135deg,#8b5cf626,#6366f126);align-items:center;gap:8px;margin-bottom:8px;padding:8px 16px;font-size:15px;font-weight:600;display:inline-flex}.hr-dashboard-badge svg{width:18px;height:18px}.hr-dashboard-subtitle{color:var(--text-muted);margin-left:4px;font-size:13px}.hr-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.hr-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:22px;animation:.5s ease-out both slideInFromBottom;position:relative;overflow:hidden}.hr-card:before{content:"";border-radius:3px 0 0 3px;width:3px;position:absolute;top:0;bottom:0;left:0}.hr-card-violet:before{background:var(--accent-violet)}.hr-card-info:before{background:var(--info)}.hr-card-success:before{background:var(--success)}.hr-card-warning:before{background:var(--warning)}.hr-card-danger:before{background:var(--danger)}.hr-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.hr-card-header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.hr-card-icon{border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.hr-card-icon svg{width:16px;height:16px}.hr-card-icon.violet{background:var(--accent-violet-bg);border:1px solid var(--border-accent)}.hr-card-icon.violet svg{color:var(--accent-violet-light)}.hr-card-icon.info{background:var(--info-bg);border:1px solid var(--info-border)}.hr-card-icon.info svg{color:var(--info)}.hr-card-icon.success{background:var(--success-bg);border:1px solid var(--success-border)}.hr-card-icon.success svg{color:var(--success)}.hr-card-icon.warning{background:var(--warning-bg);border:1px solid var(--warning-border)}.hr-card-icon.warning svg{color:var(--warning)}.hr-card-icon.danger{background:var(--danger-bg);border:1px solid var(--danger-border)}.hr-card-icon.danger svg{color:var(--danger)}.hr-card-title{color:var(--text-primary);letter-spacing:-.1px;font-size:14px;font-weight:600}.hr-card-text{color:var(--text-secondary);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin:0;padding:10px 12px;font-size:13px;line-height:1.7}.footer{text-align:center;border-top:1px solid var(--border-primary);animation:fadeIn var(--transition-slow) ease-out .5s both;margin-top:60px;padding-top:24px}.footer p{color:var(--text-muted);font-size:13px}.footer span{color:var(--accent-violet-light)}@media (width<=640px){.app-container{padding:24px 16px 60px}.header h1{font-size:32px}.header p{font-size:15px}.drop-zone{padding:40px 20px}.score-card{padding:28px 20px}.score-ring{width:120px;height:120px}.score-number{font-size:32px}.results-header{flex-direction:column;align-items:flex-start;gap:12px}.skill-grid,.hr-grid{grid-template-columns:1fr}.input-toggle{flex-direction:row}.job-section{padding:18px}}
