:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border: #e2e8f0;--accent: #6366f1;--accent-light: #ede9fe;--accent-dark: #4f46e5;--danger: #ef4444}.app{background:var(--bg-primary);min-height:100vh}.header{text-align:center;padding:3rem 0}.header-content{display:flex;align-items:center;justify-content:center;gap:1.5rem}.header .logo{color:var(--accent)}.header h1{font-size:2.5rem;font-weight:300;color:var(--text-primary);letter-spacing:-.5px;margin:0}.subtitle{color:var(--text-secondary);font-size:.875rem;letter-spacing:2px;text-transform:uppercase;margin:0}.container{max-width:1200px;margin:0 auto;padding:2rem}.main-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin-top:2rem}.card{background:var(--bg-secondary);border-radius:16px;padding:1.5rem;box-shadow:0 1px 3px #0000000d;border:1px solid var(--border);transition:box-shadow .3s ease}.card:hover{box-shadow:0 4px 12px #00000014}.chart-card{grid-column:span 7}.stats-card{grid-column:span 5}.skills-card{grid-column:span 8}.wide-skills-card{grid-column:span 12!important}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.card-header h3{font-size:1.125rem;font-weight:500;color:var(--text-primary);margin:0}.chart-category{margin-left:auto;padding:.25rem .75rem;background:var(--accent-light);color:var(--accent);border-radius:20px;font-size:.75rem;font-weight:500}.card-header .icon{color:var(--accent)}.add-skill-btn{background:var(--accent);border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:.5rem;transition:all .2s}.add-skill-btn:hover{transform:scale(1.1);background:var(--accent-dark)}.badge{margin-left:auto;padding:.25rem .75rem;background:var(--accent-light);color:var(--accent);border-radius:20px;font-size:.75rem;font-weight:500}.category-list{display:flex;flex-direction:column;gap:1rem}.category-item{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:12px;cursor:pointer;transition:background .2s}.category-item:hover{background:var(--bg-primary)}.category-item.active{background:var(--accent-light)}.category-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#fff}.category-info{flex:1;display:flex;justify-content:space-between;align-items:center}.category-name{font-size:.875rem;color:var(--text-primary);font-weight:500}.category-score{font-size:.75rem;color:var(--text-secondary)}.progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-left:1rem}.progress-fill{height:100%;border-radius:3px;transition:width .6s ease}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.skill-card{padding:1rem;border:1px solid var(--border);border-radius:12px;background:#fff;transition:all .2s;cursor:pointer;position:relative}.skill-card:hover{border-color:var(--accent);box-shadow:0 4px 12px #00000014}.skill-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.skill-name{font-weight:600;color:var(--text-primary);font-size:.875rem}.skill-actions{display:flex;gap:.25rem}.skill-action-btn{background:var(--bg-primary);border:none;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.skill-action-btn.edit-btn{color:var(--accent)}.skill-action-btn.delete-btn{color:var(--danger)}.skill-action-btn:hover{opacity:.8;transform:scale(1.1)}.skill-category{font-size:.7rem;color:var(--text-secondary);padding:.25rem .5rem;background:var(--bg-primary);border-radius:4px}.skill-metrics{display:flex;gap:1rem;margin-bottom:.75rem}.metric{display:flex;flex-direction:column}.metric-label{font-size:.65rem;color:var(--text-secondary);margin-bottom:.25rem}.metric-value{font-size:.875rem;font-weight:600;color:var(--text-primary)}.skill-progress{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.skill-progress>div{height:100%;background:var(--accent);border-radius:2px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:500px;box-shadow:0 10px 30px #0000004d;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border)}.modal-header h2{margin:0;color:var(--text-primary)}.close-modal{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:.25rem;border-radius:4px}.close-modal:hover{background:var(--bg-primary)}.modal-body{padding:1.5rem}.skill-form{width:100%}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-weight:500}.form-group input,.form-group select{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;background:var(--bg-primary);color:var(--text-primary)}.form-group input[type=range]{width:100%;padding:0;margin-top:.5rem}.slider-value{margin-top:.5rem;font-weight:600;color:var(--accent)}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.btn-cancel,.btn-submit{padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-cancel{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary)}.btn-cancel:hover{background:var(--bg-secondary)}.btn-submit{background:var(--accent);border:none;color:#fff}.btn-submit:hover{background:var(--accent-dark)}@media (max-width: 1024px){.main-grid{grid-template-columns:repeat(8,1fr)}.chart-card,.stats-card{grid-column:span 4}.skills-card,.achievements-card{grid-column:span 8}}@media (max-width: 768px){.main-grid{grid-template-columns:1fr}.chart-card,.stats-card,.skills-card,.achievements-card{grid-column:span 1}.container{padding:1rem}.header h1{font-size:2rem}.header-content{flex-direction:column}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #fafafa;--bg-secondary: #ffffff;--text-primary: #1a1a1a;--text-secondary: #666666;--accent: #6366f1;--accent-light: #e0e7ff;--border: #e5e5e5}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease-out}