.roles-list-page{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding-top:60px}.page-header{background:linear-gradient(135deg,#1e293b,#334155);padding:60px 0 40px;margin-bottom:40px}.back-button{color:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.2)!important;margin-bottom:24px}.back-button:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.3)!important}.page-title{font-size:clamp(2rem,4vw,3rem)!important;font-weight:800!important;color:white;margin-bottom:16px!important}.page-subtitle{color:rgba(255,255,255,.85);font-size:1.125rem}.main-content{padding:0 16px 60px}.role-card{height:100%;border-radius:16px!important;border:1px solid rgba(0,0,0,.08)!important;transition:all .3s ease!important;background:white!important}.role-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(139,92,246,.15)!important;border-color:rgba(139,92,246,.3)!important}.role-card-header{margin-bottom:16px}.role-name{font-weight:600!important;color:#1e293b;margin-bottom:8px!important}.role-badges{display:flex;gap:6px;flex-wrap:wrap}.segment-chip{background:rgba(99,102,241,.1)!important;color:#6366f1!important;border:1px solid rgba(99,102,241,.2)!important;font-size:.7rem!important;height:22px!important}.role-description{color:#64748b!important;line-height:1.5;margin-bottom:20px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ai-impact-tags{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,rgba(248,250,252,.8),rgba(241,245,249,.8));border-radius:12px;border:1px solid rgba(226,232,240,.6)}.tag-group{display:flex;align-items:center;gap:12px}.tag-label{min-width:80px;font-weight:600!important;color:#64748b!important;font-size:.75rem!important;text-transform:uppercase;letter-spacing:.5px}.role-metrics{display:flex;gap:20px;margin-bottom:20px}.metric{flex:1}.metric-header{display:flex;align-items:center;gap:6px;margin-bottom:6px}.metric-icon{font-size:16px!important}.ai-icon{color:#8b5cf6!important}.demand-icon{color:#10b981!important}.metric-progress{height:6px!important;border-radius:3px!important;background-color:rgba(0,0,0,.08)!important;margin-bottom:4px}.ai-progress .MuiLinearProgress-bar{background:linear-gradient(90deg,#8b5cf6,#6366f1)!important}.demand-progress .MuiLinearProgress-bar{background:linear-gradient(90deg,#10b981,#059669)!important}.metric-value{color:#475569!important;font-weight:600!important;font-size:.75rem!important}.role-link{background:linear-gradient(135deg,#f8fafc,#f1f5f9)!important;color:#475569!important;border:1px solid rgba(0,0,0,.08)!important;font-weight:500!important}.role-link:hover{background:linear-gradient(135deg,#8b5cf6,#6366f1)!important;color:white!important;border-color:transparent!important}@media (max-width:768px){.role-metrics{flex-direction:column;gap:12px}}